Wrox Programmer Forums
|
BOOK: Beginning ASP.NET Web Pages with WebMatrix
This is the forum to discuss the Wrox book Beginning ASP.NET Web Pages with WebMatrix by Mike Brind, Imar Spaanjaars ; ISBN: 978-1-1180-5048-4
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning ASP.NET Web Pages with WebMatrix section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old November 2nd, 2012, 09:56 PM
Authorized User
 
Join Date: Jun 2012
Posts: 45
Thanks: 11
Thanked 0 Times in 0 Posts
Default Classifieds: Add image to Sell.cshtml page

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>
 
Old November 3rd, 2012, 04:13 AM
Wrox Author
 
Join Date: Dec 2011
Posts: 57
Thanks: 1
Thanked 19 Times in 19 Posts
Default

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?
 
Old November 3rd, 2012, 02:13 PM
Authorized User
 
Join Date: Jun 2012
Posts: 45
Thanks: 11
Thanked 0 Times in 0 Posts
Default Sell: Preview an image inside FORM without POSTing

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" /> }
 
Old November 3rd, 2012, 08:08 PM
Authorized User
 
Join Date: Jun 2012
Posts: 45
Thanks: 11
Thanked 0 Times in 0 Posts
Default Resolved: don forget the encryption: enctype="multipart/form-data" in the form

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





Similar Threads
Thread Thread Starter Forum Replies Last Post
_PageStart.cshtml is not handing exception dejohnny BOOK: Beginning ASP.NET Web Pages with WebMatrix 2 June 3rd, 2012 08:30 PM
sell.cshtml hozdaman BOOK: Beginning ASP.NET Web Pages with WebMatrix 2 May 9th, 2012 09:42 AM
book for cshtml lizanta ASP.NET 4 General Discussion 0 January 31st, 2012 02:31 AM
Chapter 4 Testing _PageStart.cshtml jpjamie BOOK: Beginning ASP.NET Web Pages with WebMatrix 2 January 5th, 2012 03:32 AM
class="x" to input control in Sell page doen't work? torr6420 BOOK: Beginning ASP.NET Web Pages with WebMatrix 2 December 5th, 2011 05:50 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.