Note: This post will be part of Visual Studio 2012 feature series.In earlier version of ASP.NET there is no way to upload multiple files at same time. We need to use third party control or we need to create custom control for that. But with asp.net 4.5 now its possible to upload multiple file with file upload control.
With ASP.NET 4.5 version Microsoft has enhanced file upload control to support HTML5 multiple attribute. There is a property called ‘AllowedMultiple’ to support that attribute and with that you can easily upload the file. So what we are waiting for!! It’s time to create one example.
On the default.aspx file I have written following.
<asp:FileUpload ID="multipleFile" runat="server" AllowMultiple="true" /> <asp:Button ID="uploadFile" runat="server" Text="Upload files" onclick="uploadFile_Click"/>
Here you can see that I have given file upload control id as multipleFile and I have set AllowMultiple file to true. I have also taken one button for uploading file.For this example I am going to upload file in images folder. As you can see I have also attached event handler for button’s click event. So it’s time to write server side code for this. Following code is for the server side.
protected void uploadFile_Click(object sender, EventArgs e) { if (multipleFile.HasFiles) { foreach(HttpPostedFile uploadedFile in multipleFile.PostedFiles) { uploadedFile.SaveAs(System.IO.Path.Combine(Server.MapPath("~/Images/"),uploadedFile.FileName)); Response.Write("File uploaded successfully"); } } }
Here in the above code you can see that I have checked whether multiple file upload control has multiple files or not and then I have save that in Images folder of web application. Once you run the application in browser it will look like following.
I have selected two files. Once I have selected and clicked on upload file button it will give message like following.
As you can see now it has successfully upload file and you can see in windows explorer like following.
As you can see it’s very easy to upload multiple file in ASP.NET 4.5. Stay tuned for more. Till then happy programming.
P.S.: This feature is only supported in browser who support HTML5 multiple file upload. For other browsers it will work like normal file upload control in asp.net.
Do an MVC version please.
ReplyDeleteCould not be any easier :)
ReplyDeleteMatias Korn - Thanks
ReplyDeleteCiwan Kurd - In next post I will do MVC one.
ReplyDeleteI built something similar for other platforms becuase of the limited .NET upload. Nice to see this. Will their be any chance to see a thumbnail preview of the image before it is uploaded?
ReplyDeleteI built something similar for other platforms becuase of the limited .NET upload. Nice to see this. Will their be any chance to see a thumbnail preview of the image before it is uploaded?
ReplyDeleteDead simple.
ReplyDeleteI recommand to update the example and save the uploaded files to a sub folder of App_Data folder
ReplyDeleteGood tip. Your blog is too slow.
ReplyDeletethat's great Addition in the New Version of VS.
ReplyDeleteThis isn't .NET 4.5 only, it will work on any version,
ReplyDeleteAny progress bar included for each file? AJAX toolkit version of file upload control has progress bar for every file.
ReplyDeletegreat, in the next version they should add a progress bar to the upload control
ReplyDeleteya... it s good....
ReplyDelete@shaje9 - thanks
ReplyDeleteMichael Adomovic - Yes, they should
ReplyDeleteShafaqat Ali - By default its not there like this is a basic progress bar.
ReplyDeleteDave - Other version does not allow multiple attribute. But off course you add attribute from server side.
ReplyDelete@vipin56 - It's good
ReplyDelete@v- where you feel its slow?
ReplyDeleteBasslk - this is a just simple change. You just need to modify the path.
ReplyDeleteBojan Veljanovski - Thanks
ReplyDeleteYes you can have that in session and then once you click save.
ReplyDeletehttp://www.dotnetjalps.com/2012/07/Multiple-file-upload-with-asp-net-mvc-and-HTML5.html - this a asp.net mvc version of multiple file upload.
ReplyDeletePlease guys , i need help on uploading profile picture on my MVC application, i used an extension helper method and called it in the view,but the pix didn't display.Please i need ur help guys. i use VB
ReplyDelete@3bb5345f335a11bba6062a96d0cb9357:disqus - There is already a blog post written with same example with asp.net mvc. Following is a URL for that-http://www.dotnetjalps.com/2012/07/Multiple-file-upload-with-asp-net-mvc-and-HTML5.html
ReplyDeletevery informative post indeed.. being enrolled in http://www.wiziq.com/course/57-fresher-training-projects was looking for such articles online to assist me.. and your post helped me a lot
ReplyDeleteDoes it work with IE8?
ReplyDeleteOne of my reader ask me that does it support IE8- My answer is no. Please read following question-
ReplyDeletehttp://stackoverflow.com/questions/5987936/html5-input-type-files-multiple-attribute-not-working-in-ie
I opened Framework 4.0 project in 4.5 to use the multiple fileupload feature and it says 'System.Web.UI.WebControls.FileUpload' does not contain a definition for 'HasFiles' and System.Web.UI.WebControls.FileUpload' does not contain a definition for 'PostedFiles'. Is there a solution to get rid of this?
ReplyDeleteVery good publish. I just came upon your website and desired to say that I have really experienced studying your websites. Any way I’ll be signing up for your supply and I wish you publish again soon.
ReplyDeleteFor this example I am going to upload file in images folder. As you can
ReplyDeletesee I have also attached event handler for button’s click event. So it’s
time to write server side code for this.
Thats true, but for shared hosting and some providers like the one I'm using you cant upload directly to your any folder through your code
ReplyDeleteok I understand!! but we can live with that
ReplyDeletei am trying to upload multiple file at a time with the using this example but i am having problem with Foreach.
ReplyDeleteit is showing error foreach statement can not contain on variable of type System.web.httpfile bacuse system.web.httpfile dose not contain a public definition for Get Enumerator
which browser you are using?
ReplyDeleteGreat share.. I really enjoy your article and your blog.. I can updated with all new technology with your blog... can i share this article on my blog www.dotnetspan.com
ReplyDeleteThere is no problem to share with proper credits!!. You need to put my blog link there and then you can share!!
DeleteHello,
ReplyDeletethis is working but it is Perfect when we create web application but not working in website..any solution for these...
It should work on anything. Can you please double check your code.
ReplyDeleteits working... I want to show percantages with uploading any solution for this
ReplyDeleteI want to show percantages with uploading any solution for this
ReplyDeleteHello , I want to progress bar with this control. can i use it.. please give any solution.
ReplyDeleteHello ,
ReplyDeleteIts Working..
I want to progress bar with this control. can i use it.. please give any solution.
Thanks