Online Training for Asp.net MVC Web Designing Development, MS SQL, Digital Marketing

File uploading with Asp.net FileUpload Control

Here we learn how to upload file on web server in Asp.net application, add, upload, delete, and manage files, images in asp.net application.

How to upload files, images in Asp.net application

ASP.NET provides two type of control to upload files on web server.
  • FileUpload - this is ASP.NET web control
  • HtmlInputFile - this is HTML server control
Both asp.net controls allow you to upload files, images, the difference is that FileUpload control sets the encoding of the form.
So, we look at both example with code syntax

FileUpload control in Asp.net

Let's write the html code, place one asp:FileUpload and a asp:Button control in your form
<form id="form1" runat="server">
<div>
<%=ViewState["result"] %>
</div>
<div style="padding: 15px;">
<asp:FileUpload ID="fuUser" runat="server" />
<asp:Button ID="btnUpload" Text="Upload File"
runat="server" OnClick="btnUpload_Click" /> </div> </form>

Now open your codebehind file, inside button click event write the following code
protected void btnUpload_Click(object sender, EventArgs e)
{
    string userFolderPath = Server.MapPath("~/userdocs");            
    if (fuUser.HasFile)
    {
        fuUser.SaveAs(userFolderPath + "/" + fuUser.FileName);
        ViewState["result"] = "File has been uploaded successfully";
    }
    else
    {
        ViewState["result"] = "Please select a file";
    }
}
    

Now above code will allow user to upload any type of file on your web server, which can be dangerous, so now we learn how to restrict all other file types other than the type we allow
Write the following RegularExpressionValidator control to check the file type before uploading
<asp:RegularExpressionValidator id="regexpFileUpLoadValidator"
runat="server" ErrorMessage="Upload jpg, gif or png only."
ValidationExpression="^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))
(.jpg|.JPG|.gif|.GIF|.png|PNG)$"
ControlToValidate="fuUser">
</asp:RegularExpressionValidator>
Now user can upload only jpg/png/gif file type

HtmlInputFile Example

Another way of uploading file is HttpPostedFile, actually this is how we used to upload file in classic asp days, let’s look at the same implementation Asp.net code.
Write the following code in your html
<input type="file" runat="server" id="fuControl" />
<asp:Button ID="btnFileUpload" Text="Upload File" runat="server" OnClick="btnFileUpload_Click" />

Now here is the serverside code in button click event
protected void btnFileUpload_Click(object sender, EventArgs e)
{
    string userFolderPath = Server.MapPath("~/userdocs");
    HttpPostedFile _file = fuControl.PostedFile;

    if (_file != null)
    {
        _file.SaveAs(userFolderPath + "/" + _file.FileName);
        ViewState["result"] = "File has been uploaded successfully";
    }
}
The above code will allow user to upload all type of files.
In earlier example we implemented a regular expression control to restrict other file type.
But here we check the file type in server side code to make sure only images are allowed
HttpPostedFile _file = fuControl.PostedFile;
// check the following property 
if(_file.ContentType=="jpg" || _file.ContentType=="gif") { // then upload the file on server. }
You can allow file type as per your business requirement



Comment
Name Email Website
Subscribe
 
File uploading with Asp.net FileUpload Control

Group Training