.NET Image Uploading

• Download source - netimageupload.zip (2.4 Kb)

Uploading images via .NET

Previously, adding the ability to upload images via ASP (with sizing, thumbnail features, etc.) would have required the use of an external component. With the advent of .NET, the ability to handle images can be done easily and freely through the use of the Bitmap and Image classes.

In this tutorial, we will be going through the steps of creating a simple web form in which you can upload an image file, and the form will verify whether it�s a JPEG file, whether there are duplicate files already (and rename your uploaded file if necessary), and create a thumbnail of the file uploaded.

This tutorial already assumes a basic knowledge of .NET Web Forms and C#.

By the way, some credit goes to Konstantin Vasserman for his code on uploading. If you need to upload the image into a DB, then look at his article.

1. Create a new web application project.
   
   
2. Open up the web form.
   
   
3. Add a File field from the HTML tab onto your form, and convert it into a server control. In this example, the file field will be named filUpload.
   (To convert any HTML tag into a server control, right click on it and select Run As Server Control.)
   
   
4. Switch to HTML view and add/alter the enctype attribute of the form tag to multipart/form-data.
   Example: enctype="multipart/form-data"
   
   
5. Add a Web Form Button onto the form, and name it btnUpload.
   
   
6. Add a folder called /images to the web application.
   
   
7. Add a Web Form Image onto the form, and name it imgPicture. Adjust the width to 160 and height to 120.
   
   
8. Add a Label called lblOutput. This will return any errors if the upload happens to fail.
   
   
9. In the btnUpload Click event, add the following code.
   (If you want to analyze the code in detail below, it's better to copy and paste into the VS.NET IDE since some of the lines are long.)
   

   private void btnUpload_Click(object sender, System.EventArgs e)
   {
       // Initialize variables
   
       string sSavePath;
       string sThumbExtension;
       int intThumbWidth;
       int intThumbHeight;
   
       // Set constant values
   
       sSavePath = "images/";
       sThumbExtension = "_thumb";
       intThumbWidth = 160;
       intThumbHeight = 120;
   
       // If file field isn�t empty
   
       if (filUpload.PostedFile != null)
       {
           // Check file size (mustn�t be 0)
   
           HttpPostedFile myFile = filUpload.PostedFile;
           int nFileLen = myFile.ContentLength;
           if (nFileLen == 0)
           {
               lblOutput.Text = "No file was uploaded.";
               return;
           }
   
           // Check file extension (must be JPG)
   
           if (System.IO.Path.GetExtension(myFile.FileName).ToLower() != ".jpg")
           {
               lblOutput.Text = "The file must have an extension of JPG";
               return;
           }
   
           // Read file into a data stream
   
           byte[] myData = new Byte[nFileLen];
           myFile.InputStream.Read(myData,0,nFileLen);
   
           // Make sure a duplicate file doesn�t exist.  If it does, keep on appending an 
   
           // incremental numeric until it is unique
   
           string sFilename = System.IO.Path.GetFileName(myFile.FileName);
           int file_append = 0;
           while (System.IO.File.Exists(Server.MapPath(sSavePath + sFilename)))
           {
               file_append++;
               sFilename = System.IO.Path.GetFileNameWithoutExtension(myFile.FileName)
                                + file_append.ToString() + ".jpg";
           }
   
           // Save the stream to disk
   
           System.IO.FileStream newFile
                   = new System.IO.FileStream(Server.MapPath(sSavePath + sFilename), 
                                              System.IO.FileMode.Create);
           newFile.Write(myData,0, myData.Length);
           newFile.Close();
   
           // Check whether the file is really a JPEG by opening it
   
           System.Drawing.Image.GetThumbnailImageAbort myCallBack = 
                          new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback);
           Bitmap myBitmap;
           try
           {
               myBitmap = new Bitmap(Server.MapPath(sSavePath + sFilename));
   
               // If jpg file is a jpeg, create a thumbnail filename that is unique.
   
               file_append = 0;
               string sThumbFile = System.IO.Path.GetFileNameWithoutExtension(myFile.FileName)
                                                        + sThumbExtension + ".jpg";
               while (System.IO.File.Exists(Server.MapPath(sSavePath + sThumbFile)))
               {
                   file_append++;
                   sThumbFile = System.IO.Path.GetFileNameWithoutExtension(myFile.FileName) + 
                                  file_append.ToString() + sThumbExtension + ".jpg";
               }
   
               // Save thumbnail and output it onto the webpage
   
               System.Drawing.Image myThumbnail
                       = myBitmap.GetThumbnailImage(intThumbWidth, 
                                                    intThumbHeight, myCallBack, IntPtr.Zero);
               myThumbnail.Save (Server.MapPath(sSavePath + sThumbFile));
               imgPicture.ImageUrl = sSavePath + sThumbFile;
   
               // Displaying success information
   
               lblOutput.Text = "File uploaded successfully!";
   
               // Destroy objects
   
               myThumbnail.Dispose();
               myBitmap.Dispose();
           }
           catch (ArgumentException errArgument)
           {
               // The file wasn't a valid jpg file
   
               lblOutput.Text = "The file wasn't a valid jpg file.";
               System.IO.File.Delete(Server.MapPath(sSavePath + sFilename));
           }
       }
   }
   
   public bool ThumbnailCallback()
   {
       return false;
   }        
   

10. Run the webpage, and test with JPG files and other files to test the error-checking mechanism.
    
    
11. If you have any problems/suggestions, please leave a message below. :-)

You must Sign In to use this message board.

FAQ    Noise Tolerance Very HighHighMediumLowVery Low   Layout Expand Posts & RepliesThread ViewNo JavascriptNo JS + Preview   Per page 102550

Msgs 1 to 25 of 79 (Total in Forum: 79) (Refresh) FirstPrevNext

doubt in imgPicture preetha1985 23:45 7 Jul '09   im getting an error like this 'imgPicture' does not contain a definition for 'ImageUrl' in the line imgPicture.ImageUrl = sSavePath + sThumbFile; plz help Sign In·View Thread·PermaLink Awesome yet make a li l ammendment demonizeddevil 21:51 22 Jun '09   sSavePath = "images/"; to sSavePath = ""; over all-ly Good effort Sign In·View Thread·PermaLink VB Conversion bcalvin 17:14 17 Apr '09   I have converted the code to vb it works good for me even though it is a strict conversion if anyone else needed it in vb here it is Protected Sub btnUpload_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnUpload.Click '// Initialize variables Dim sSavePath As String 'string sSavePath; Dim sThumbExtension As String 'string sThumbExtension; Dim intThumbWidth As Integer 'int intThumbWidth; Dim intThumbHeight As Integer 'int intThumbHeight; ' // Set constant values sSavePath = "images/" '; sThumbExtension = "_thumb" '; intThumbWidth = 160 '; intThumbHeight = 120 '; '// If file field isn�t empty If (Not filUpload.PostedFile Is Nothing) Then '{ '// Check file size (mustn�t be 0) Dim myFile As HttpPostedFile myFile = filUpload.PostedFile '; Dim nFileLen As Integer = myFile.ContentLength 'int nFileLen = myFile.ContentLength; If nFileLen = 0 Then '{ lblOutput.Text = "No file was uploaded." '; Return '; End If '} '// Check file extension (must be JPG) If (Not System.IO.Path.GetExtension(myFile.FileName).ToLower() = ".jpg") Then '{ lblOutput.Text = "The file must have an extension of JPG" '; Return '; End If '} '// Read file into a data stream Dim myData() As Byte = New Byte(nFileLen) {} 'byte[] myData = new Byte[nFileLen]; myFile.InputStream.Read(myData, 0, nFileLen) '; ' // Make sure a duplicate file doesn�t exist. If it does, keep on appending an '// incremental numeric until it is unique Dim sFilename As String = System.IO.Path.GetFileName(myFile.FileName) 'string sFilename = System.IO.Path.GetFileName(myFile.FileName); Dim file_append As Integer = 0 ' int file_append = 0; While (System.IO.File.Exists(Server.MapPath(sSavePath + sFilename))) '{ file_append += 1 '; sFilename = System.IO.Path.GetFileNameWithoutExtension(myFile.FileName) & file_append.ToString() & ".jpg" '; ' } End While '// Save the stream to disk Dim newFile As System.IO.FileStream newFile = New System.IO.FileStream(Server.MapPath(sSavePath + sFilename), System.IO.FileMode.Create) '; newFile.Write(myData, 0, myData.Length) '; newFile.Close() '; '// Check whether the file is really a JPEG by opening it Dim myCallBack As System.Drawing.Image.GetThumbnailImageAbort 'System.Drawing.Image.GetThumbnailImageAbort myCallBack = myCallBack = New System.Drawing.Image.GetThumbnailImageAbort(AddressOf ThumbnailCallback) '; Dim myBitmap As Drawing.Bitmap ' Bitmap myBitmap; Try '{ myBitmap = New Drawing.Bitmap(Server.MapPath(sSavePath + sFilename)) '; '// If jpg file is a jpeg, create a thumbnail filename that is unique. file_append = 0 '; Dim sThumbFile As String = System.IO.Path.GetFileNameWithoutExtension(myFile.FileName) & sThumbExtension & ".jpg" ' ; 'string sThumbFile = System.IO.Path.GetFileNameWithoutExtension(myFile.FileName) '+ sThumbExtension + ".jpg"; While (System.IO.File.Exists(Server.MapPath(sSavePath + sThumbFile))) '{ file_append += 1 '; sThumbFile = System.IO.Path.GetFileNameWithoutExtension(myFile.FileName) & file_append.ToString() & sThumbExtension & ".jpg" '; End While '} '// Save thumbnail and output it onto the webpage Dim myThumbnail As System.Drawing.Image myThumbnail = myBitmap.GetThumbnailImage(intThumbWidth, intThumbHeight, myCallBack, IntPtr.Zero) '; myThumbnail.Save(Server.MapPath(sSavePath + sThumbFile)) '; imgPicture.ImageUrl = sSavePath + sThumbFile '; '// Displaying success information lblOutput.Text = "File uploaded successfully!" '; '// Destroy objects myThumbnail.Dispose() '; myBitmap.Dispose() '; '} Catch errArgument As ArgumentException '{ ' // The file wasn't a valid jpg file lblOutput.Text = "The file wasn't a valid jpg file." '; System.IO.File.Delete(Server.MapPath(sSavePath + sFilename)) '; End Try '} End If'} '} End Sub Public Function ThumbnailCallback() As Boolean '{ Return False '; '} End Function Sign In·View Thread·PermaLink Re: VB Conversion theboyholty 0:47 27 May '09   Thanks bcalvin. Saved me a lot of faffing about did that. Sign In·View Thread·PermaLink request for vb code Diadems27 14:07 20 Feb '09   plzzz giv me the vb code for this email : shivam.iips@gmail.com Sign In·View Thread·PermaLink Bitmap ?? vaibhavbaweja 3:50 13 Dec '08   Its giving following error............. "The type or namespace name 'Bitmap' could not be found (are you missing a using directive or an assembly reference?)" Any help.....Thanks in advance........ Sign In·View Thread·PermaLink Re: Bitmap ?? neo8223 13:15 19 Dec '08   Ok i'm a total amateur so feel free to optimise my fix. I had the same problem, however i added: using System.Drawing; to the very top. I also had a problem with the method call (i think thats what you call it.) It is supposed to be: private void btnUpload_Click(object sender, EventArgs e) I found that only: protected void btnUpload_Click(object sender, EventArgs e) works. all fixed. :D Sign In·View Thread·PermaLink Multiple Image Upload in C# anandmmsoft 21:33 12 Oct '08   Hello sir, I am having a problem, that to store more than one images to one field in database... i am having a table FingerImage in database(oracle) and i have to store upto 10 finger images to the table but in only one field. table - FingerImage fields - Id, RealImage in that RealImage field i have to store all the 10 finger images... how to perform this using C# alone. this is a window application... thanks in advance anand Sign In·View Thread·PermaLink 1.33/5 (3 votes) Great freya 23:21 6 Aug '08   This is a great article , it helped a lot! Thanks! Sign In·View Thread·PermaLink Thanks so much dcakmak 11:14 17 Apr '08   You save my ass You are a great web developer. dCakmak... Sign In·View Thread·PermaLink 3.00/5 (1 vote) images failed to load/display Thomas Toh 20:07 15 Apr '08   thanks for the wonderful code, i loaded and ran it on visual studio .net 2003, i'm able to upload the jpegs but after that it doesnt display, any idea what's wrong? Sign In·View Thread·PermaLink 1.67/5 (3 votes) thanks! xiazhi33 6:42 9 Apr '08   go and go!!! ????,?????? Sign In·View Thread·PermaLink Better way : m1234567gfd 5:01 4 Jan '08   // If file field isn’t empty if (filUpload.PostedFile != null) { // Check file size (mustn’t be 0) HttpPostedFile myFile = filUpload.PostedFile; int nFileLen = myFile.ContentLength; if (nFileLen == 0) { lblOutput.Text = "There wasn't any file uploaded."; return; } // Read file into a data stream byte[] myData = new Byte[nFileLen]; myFile.InputStream.Read(myData,0,nFileLen); Bitmap b = new Bitmap(new MemoryStream(myData)); } you might consider adding a try and catch on the new bitmap block .. Sign In·View Thread·PermaLink Not working with file size greater than 100 kb Jigs1602 0:33 19 Aug '07   Its a fantastic example of uploading image files but i m unable to upload file with size greater than 100 kb when i deploy the application and access it through internet locally it works fine ! waiting for Reply ! Thankx in advance.. Sign In·View Thread·PermaLink 2.50/5 (4 votes) Thanks for the article Boro_Bob 22:08 26 Jul '07   I found it very useful. Thanks. Words fade as the meanings change, but somehow, it don't bother me. Sign In·View Thread·PermaLink you have error in code! masfenix 14:35 3 Jun '07   in your code you have "if (filUpload.PostedFile != null)" This is straight from MSDN library: Before calling the SaveAs method to save the file to the server, use the HasFile property to verify that the FileUpload control contains a file. If the HasFile returns true, call the SaveAs method. If it returns false, display a message to the user indicating that the control does not contain a file. Do not check the PostedFile property to determine whether a file to upload exists, because this property contains 0 bytes by default. As a result, even when the FileUpload control is blank, the PostedFile property returns a non-null value. I bolded the important part. thanks Sign In·View Thread·PermaLink 2.00/5 (1 vote) keeping aspect ratio jezh1986 14:59 23 Apr '07   hey i love the code just wondering is there any way to keep the aspect ratio, by asy only declaring the height and leaving the width auto? just for when you insert portrate pictures for example cheers Jez Sign In·View Thread·PermaLink To show 3 thumbs on screen sheebalam 21:35 4 Mar '07   Thanks for the Code it is very useful what should i do to show more then 1 thumbs on the display page... Sign In·View Thread·PermaLink 2.00/5 (2 votes) Jpg will not show on page reload! programmingAddict 9:11 23 Feb '07   Great article. It has helped tremendously. The only problem is that I cannot get the jpg to display when the page reloads. Any suggestions? Sign In·View Thread·PermaLink 2.00/5 (1 vote) The type 'netimageupload.WebForm1' already contains a definition for 'filUpload' socalmp 22:12 17 Dec '06   Thanks for the article. I had to remove: protected System.Web.UI.HtmlControls.HtmlInputFile filUpload; protected System.Web.UI.WebControls.Image imgPicture; protected System.Web.UI.WebControls.Label lblOutput; protected System.Web.UI.WebControls.Button btnUpload; In order for the code to compile.   In fact I had to create a new solution, add a new file, copy your code to that file, remove the above reference and build.   I first tried to get this to work in VS Web dev edition, with no luck.   Then installed VS 2005 and finally success.   I am not sure why the framework is so touchy. Sign In·View Thread·PermaLink 1.50/5 (2 votes) Excelent friend!!! Vhakti 14:12 14 Oct '06   Hello YOU HAVE SAVE ME A LOT OF TIME Thanks!!! VHAKTI Vhakti Sign In·View Thread·PermaLink Looking for an alternate Gazzooks 10:47 26 Sep '06   Hi Chris; This worked like a charm, not a problem... I have a question for you. I want the user to select a file from thier HD, then upload just the resized image to the server. Currently the demo Uploads the original as well as the resized image. I tried removing the portion of the code that writes the original picture, but i get errors. so obviously i am removing the wrong portion. Can you email me please? Thank you Sign In·View Thread·PermaLink 5.00/5 (3 votes) Try this Solution britneyssssers 4:12 8 Sep '06   these are the important lines, you must to add the try catch sentences, but this code works if (filUpload.PostedFile.FileName.Trim().Length > 0 && filUpload.PostedFile.ContentLength > 0) // No name, No empty                   {                         string baseRoot = "C:\\Inetpub\\wwwroot\\mySite\\images\\";                         string[] directories_name = filUpload.PostedFile.FileName.Split('\\');                         string fileName = directories_name[directories_name.Length - 1]; //Get the file name include the extension                         string finalRoot = baseRoot + fileName;                         Foto.PostedFile.SaveAs(finalRoot);                         Mensaje.Text = "The image was uploaded onto: " + finalRoot;                   } keep Learning... Sign In·View Thread·PermaLink 1.67/5 (2 votes) EXCELLENT ARTICLE! FlashMerlot 3:57 3 Jul '06   Thanks for the article! Solved my problems. FlashMerlot Sign In·View Thread·PermaLink How it works with DataGrid Template?.. ArnLee10 21:22 9 Apr '06   Dear Sir, I use your code to Upload Image as standalone and it works fine. I have started facing problems while Trying to use the code in DataGrid. I set in Edit mode in Template Coloum the HTML File Control and I wanted to upload the Image to specific directory and the file name to store in Access DB. I couldn't catch the HTML Control in the UpDate Method (Working with C#..) and to continue the running of the code.. Pls Help. Thanks ArnLee P.S. 1. The UpDate Method .. private void DataGrid1_UpdateCommand(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e) { File TmpabcPic1 = (File)e.Item.FindControl("abcPic"); ....continue the code... 2. the control in the ASPX Page.. <input type="file" id="abcPic" name="abcPic" runat="server" size="50" /> Sign In·View Thread·PermaLink 1.00/5 (1 vote)

Last Visit: 17:34 9 Jul '09     Last Update: 17:34 9 Jul '09 1234 Next »