Classifieds: Add image to Sell.cshtml page

EDGY · November 2nd, 2012, 09:56 PM

Mike,
Hopefully this is a worthy question.

Within the Classifieds Tutorial, I'd like to add an Image upload/display
routine to the SELL.cshtml page. I'm basically using the code attached.
Would you suggest a double SUBMIT routine or a Jscript/JQuery to download/display the image.
I shouldn't save the image untill i'm saving the new Item record, correct?
Naturally, I will use a Pictures table to store: Id,ItemId,FileName, date/time,
saved/updated when saving the item record.
(? multiple pics and then show it/them on the Display Item function, for later....) ..One step at a time...

I was using a "button" with a JS function() but it got ugly...and errors..

Thanks,
Edgy in Dallas

***************************************

Code:

@{  WebImage photo = null; 
    var newFileName = ""; 
    var imagePath = ""; 
 
    if(IsPost){ 
        photo = WebImage.GetImageFromRequest(); 
        if(photo != null){ 
            newFileName = Guid.NewGuid().ToString() + "_" + 
                Path.GetFileName(photo.FileName); 
            imagePath = @"images\" + newFileName; 
 
            photo.Save(@"~\" + imagePath); 
        } 
    } 
} 
<!DOCTYPE html> 
<html> 
<head> 
  <title>Image Upload</title> 
</head> 
<body> 
  <form action="" method="post" enctype="multipart/form-data"> 
    <fieldset> 
      <legend> Upload Image </legend> 
      <label for="Image">Image</label> 
      <input type="file" name="Image" /> 
      <br/> 
      <input type="submit" value="Upload" /> 
    </fieldset> 
  </form> 
  <h1>Uploaded Image</h1> 
    @if(imagePath != ""){ 
    <div class="result"> 
        <img src="@imagePath" alt="image" /> 
 
    </div> 
    } 
</body> 
</html>

Mike Brind · November 3rd, 2012, 04:13 AM

I'm not quite sure what you are asking, but if you want to provide the users with the facility to upload images then you can add the input type=file to the form and add the enctype as you have done in your code above. Then you can save the image to the file system and its name to the database. You just need to add one more column to the Items table in my view - possibly two if you want to store the image type (jpg, png or gif). You would save all that at the same time as you store the rest of the item details.

If you want to show a "preview" of the image, you have a number of options. One is to use a Flash or Silverlight upload control that offers this. Another is to use AJAX to upload the image and to save it temporarily, then asynchronously request it and display it. The last option is to use the HTML5 Filesystem API. You can find some interesting articles on this - it's pretty easy BUT it doesn't work in IE8....

Does that help?

EDGY · November 3rd, 2012, 02:13 PM

Mike,
Yea, I am trying to keep it simple & use the input type= "file".
Mainly, I want to PREVIEW the image inside the form without triggering a FULL submit/Post for all the Other SELL/ITEMS inputs. I wanted to use an input "button", not a "submit", and thus tryed to put some of this in a JScript or a sub process of the POST so it wouldn't try saving the other Items data yet. I want to choose & preview the image seperately on the same page. I am left floating the image Next to the DURATION input in a DIV,I got the placement done, I just want to trigger the image Preview without doing a full Form POST. Can you give an example of a JScript function do this, my syntax abilities are wanting.

Thanks

Code:

**** to preview the image before saving data( a Jscript?) ***********
 theImage = WebImage.GetImageFromRequest();
        if(theImage!=null){
            strFileName = Path.GetFileName(theImage.FileName);
        // strImgThumbnail = @"Images\Thumbnails\" + strFileName;
        // resize it n save to thumbnail var...
           strImgThumbnail = theImage.Resize(width:200, height:200,
                            preserveAspectRatio:true, preventEnlarge:true);
      
*** When saving the ITEM data (Full form submit/Post) **********    
            strImgPath = @"Images\" + strFileName;
            theImage.Save(@"~\" + strImgPath);  
             theImage.Resize(width:200, height:200,
                            preserveAspectRatio:true, preventEnlarge:true);
            theImage.Save(@"~\" + strImgThumbnail);

******   Sell snippet for Select & preview  *************
<div style=" height:100px; width: 350px; float: left" >
       <br /><span> Add a Picture to your Advertisment</span>
       <input type="file" name="Image" />
       <input type="submit" value="Upload" name="Action" />       
         // or type = "button"  with an onclick function()

         @if(strImgThumbnail != ""){
        <img src="@strImgThumbnail" alt="image" /> }

EDGY · November 3rd, 2012, 08:08 PM

OOps, My main problem it turns out was the missing parameter:
enctype="multipart/form-data"

AS in: <form id="xxx" action="xxx" enctype="multipart/form-data" >

Still want to put part in a JScript though so i can use an input "button"...

Embarassed,
Edgy