{"id":4115,"date":"2022-12-29T16:02:29","date_gmt":"2022-12-29T16:02:29","guid":{"rendered":"https:\/\/isophal.com\/?p=4115"},"modified":"2022-12-29T16:02:30","modified_gmt":"2022-12-29T16:02:30","slug":"how-to-fileupload-control-in-asp-net-c","status":"publish","type":"post","link":"https:\/\/isophal.com\/news\/2022\/12\/29\/4115.html\/","title":{"rendered":"How to FileUpload Control in ASP.Net C#"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">ASP.Net FileUpload Control<\/h2>\n\n\n\n<p>In this asp.net tutorial i will explain how to upload file or image from local drive to website using fileupload control.<\/p>\n\n\n\n<p>The fileupload control in asp.net used to upload any file like image, document file, zip file ..etc to asp.net website.<\/p>\n\n\n\n<p>Here, we understand how to upload file using fileupload control with an asp.net example.<\/p>\n\n\n\n<p>first create a new asp.net empty website, add new web forms Default.aspx in asp.net website and drag and drop fileupload control from toolbox to default page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">FileUpload Control Example in ASP.Net<\/h3>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<ul class=\"wp-block-list\">\n<li><strong>Step 1 \u2013<\/strong>&nbsp;Open the Visual Studio \u2013&gt; Create a new empty Web application.<\/li>\n\n\n\n<li><strong>Step 2 \u2013<\/strong>&nbsp;Create a&nbsp; New web page for display FileUpload control.<\/li>\n\n\n\n<li><strong>Step 3 \u2013<\/strong>&nbsp;Drag and drop&nbsp;<strong>FileUpload control<\/strong>&nbsp;on web page along with one Button control from Toolbox.<\/li>\n\n\n\n<li><strong>Step 4 \u2013<\/strong>&nbsp;Write server side code in&nbsp; button click event for upload image using FileUpload control.<\/li>\n\n\n\n<li><strong>Step 5 \u2013<\/strong>&nbsp;Create new folder \u201cimg\u201d in solution explorer to store images.<\/li>\n<\/ul>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">ASP.Net FileUpload Control Example<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"469\" src=\"https:\/\/isophal.com\/wp-content\/uploads\/2022\/12\/image-62-1024x469.png\" alt=\"\" class=\"wp-image-4116\" srcset=\"https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/image-62-1024x469.png 1024w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/image-62-600x275.png 600w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/image-62-300x138.png 300w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/image-62-768x352.png 768w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/image-62-585x268.png 585w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/image-62.png 1104w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">ASP.Net FileUpload Control<\/figcaption><\/figure>\n\n\n\n<p>Here is the html source code for above asp.net web page.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;table border=\"0\" class=\"auto-style1\">\r\n                &lt;tr>\r\n                    &lt;td class=\"auto-style2\" colspan=\"3\">\r\n                        &lt;asp:Label ID=\"Label01\" runat=\"server\" Text=\"ASP.Net FileUpload Controle in ASP.Net C#\">&lt;\/asp:Label>\r\n                    &lt;\/td>\r\n                &lt;\/tr>\r\n                &lt;tr>\r\n                    &lt;td>&amp;nbsp;&lt;\/td>\r\n                    &lt;td>&amp;nbsp;&lt;\/td>\r\n                    &lt;td>&amp;nbsp;&lt;\/td>\r\n                &lt;\/tr>\r\n                &lt;tr>\r\n                    &lt;td>Upload File&lt;\/td>\r\n                    &lt;td>\r\n                        &lt;asp:FileUpload ID=\"FileUpload1\" runat=\"server\" Font-Size=\"16pt\" Width=\"269px\" \/>\r\n                    &lt;\/td>\r\n                    &lt;td>&amp;nbsp;&lt;\/td>\r\n                &lt;\/tr>\r\n                &lt;tr>\r\n                    &lt;td class=\"auto-style3\">&lt;\/td>\r\n                    &lt;td class=\"auto-style3\">\r\n                        &lt;asp:Label ID=\"Label1\" runat=\"server\" Font-Size=\"12pt\" ForeColor=\"#FF3300\">&lt;\/asp:Label>\r\n                    &lt;\/td>\r\n                    &lt;td class=\"auto-style3\">&lt;\/td>\r\n                &lt;\/tr>\r\n                &lt;tr>\r\n                    &lt;td colspan=\"3\">\r\n                        &amp;nbsp;&lt;\/td>\r\n                &lt;\/tr>\r\n            &lt;\/table>\n<\/code><\/pre>\n\n\n\n<p><strong>CSS Style for Class<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;style type=\"text\/css\">\r\n        .auto-style1 {\r\n            width: 673px;\r\n            height: 269px;\r\n        }\r\n        .auto-style2 {\r\n            height: 61px;\r\n            background-color:blue;\r\n            color:white;\r\n            padding:20px;\r\n            font-size:28px;\r\n            font-weight:bold;\r\n\r\n        }\r\n        .auto-style3 {\r\n            height: 35px;\r\n        }\r\n    &lt;\/style><\/code><\/pre>\n\n\n\n<p>Now, add new folder for save uploaded image by right click on website project and select New Folder shows like below. give name img to newly created folder in asp.net. when we upload file or image using fileupload control the file uploaded in to img folder in our website.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"845\" src=\"https:\/\/isophal.com\/wp-content\/uploads\/2022\/12\/2022-12-29_22-47-29-1024x845.jpg\" alt=\"\" class=\"wp-image-4117\" srcset=\"https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/2022-12-29_22-47-29-1024x845.jpg 1024w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/2022-12-29_22-47-29-600x495.jpg 600w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/2022-12-29_22-47-29-300x247.jpg 300w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/2022-12-29_22-47-29-768x633.jpg 768w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/2022-12-29_22-47-29-1170x965.jpg 1170w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/2022-12-29_22-47-29-585x483.jpg 585w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/2022-12-29_22-47-29.jpg 1290w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">ASP.Net FileUpload Control<\/figcaption><\/figure>\n\n\n\n<p>Here, is the asp.net fileupload control example design layout. here we took one fileupload control, a button control and a label control for design web page. fileupload control brows and select the image or file from our local drive fro upload and the button control upload the file to desired folder in out website. In this fileupload control example we make img folder for save file on website.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"993\" height=\"353\" src=\"https:\/\/isophal.com\/wp-content\/uploads\/2022\/12\/image-63.png\" alt=\"\" class=\"wp-image-4118\" srcset=\"https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/image-63.png 993w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/image-63-600x213.png 600w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/image-63-300x107.png 300w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/image-63-768x273.png 768w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/image-63-585x208.png 585w\" sizes=\"auto, (max-width: 993px) 100vw, 993px\" \/><figcaption class=\"wp-element-caption\">ASP.Net FileUpload Control<\/figcaption><\/figure>\n\n\n\n<p>Here, we can see the output when we browse the file for upload. just select any file from local drive and select open button to select the file for upload.<\/p>\n\n\n\n<p>Here, is the button click event code for upload file to specific folder on website.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>protected void btn_upload_Click(object sender, EventArgs e)<br>{<br>if (FileUpload1.HasFile)<br>{<br>FileUpload1.SaveAs(Server.MapPath(\"~\/img\/\") + FileUpload1.FileName);<br>Label1.Text = \"Image Uploaded Successfully !!\";<br>}<br>else<br>{<br>Label1.Text = \"Select image first !!\";<br>}<br>}<\/code><\/pre>\n\n\n\n<p>Here, we can see the output when we browse the file for upload. just select any file from local drive and select open button to select the file for upload.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"489\" src=\"https:\/\/isophal.com\/wp-content\/uploads\/2022\/12\/image-64-1024x489.png\" alt=\"\" class=\"wp-image-4119\" srcset=\"https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/image-64-1024x489.png 1024w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/image-64-600x286.png 600w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/image-64-300x143.png 300w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/image-64-768x367.png 768w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/image-64-1536x733.png 1536w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/image-64-1170x559.png 1170w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/image-64-585x279.png 585w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/image-64.png 1634w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/isophal.com\/wp-content\/uploads\/2022\/12\/2022-12-29_22-55-13-1024x538.jpg\" alt=\"\" class=\"wp-image-4120\" srcset=\"https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/2022-12-29_22-55-13-1024x538.jpg 1024w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/2022-12-29_22-55-13-600x315.jpg 600w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/2022-12-29_22-55-13-300x158.jpg 300w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/2022-12-29_22-55-13-768x404.jpg 768w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/2022-12-29_22-55-13-1170x615.jpg 1170w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/2022-12-29_22-55-13-585x307.jpg 585w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/2022-12-29_22-55-13.jpg 1174w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">ASP.Net FileUpload Control<\/figcaption><\/figure>\n\n\n\n<p>After selecting file for upload click the Upload button to upload file to desired location at website.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">FileUpload Control Example<\/h3>\n\n\n\n<p>Let\u2019s take an another fileupload control example to understand more about fileupload control in asp.net.<\/p>\n\n\n\n<p>Here, we design an asp.net web forms with fileupload control, a button and image control for displaying image.<\/p>\n\n\n\n<p>In this example we upload the image file using fileupload control and displaying that image on image control at same time of uploading image on asp.net web application.<\/p>\n\n\n\n<p>Design webform with fileupload control, button control along with image control like below screen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"992\" height=\"590\" src=\"https:\/\/isophal.com\/wp-content\/uploads\/2022\/12\/image-65.png\" alt=\"\" class=\"wp-image-4121\" srcset=\"https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/image-65.png 992w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/image-65-600x357.png 600w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/image-65-300x178.png 300w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/image-65-768x457.png 768w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/image-65-585x348.png 585w\" sizes=\"auto, (max-width: 992px) 100vw, 992px\" \/><figcaption class=\"wp-element-caption\">ASP.Net FileUpload Control Example<\/figcaption><\/figure>\n\n\n\n<p>Here is the upload button c# code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>protected void btn_upload_Click(object sender, EventArgs e)<br>{<br>if (FileUpload1.HasFile)<br>{<br>FileUpload1.SaveAs(Server.MapPath(\"~\/upload\/\") + FileUpload1.FileName);<br>Image1.ImageUrl = \"~\/upload\/\" + FileUpload1.FileName;<br>Label1.Text = \"Image Uploaded Successfully !!\";<br>}<br>else<br>{<br>Label1.Text = \"Select image first !!\";<br>}<br>}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"392\" src=\"https:\/\/isophal.com\/wp-content\/uploads\/2022\/12\/2022-12-29_23-00-11-1024x392.jpg\" alt=\"\" class=\"wp-image-4122\" srcset=\"https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/2022-12-29_23-00-11-1024x392.jpg 1024w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/2022-12-29_23-00-11-600x229.jpg 600w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/2022-12-29_23-00-11-300x115.jpg 300w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/2022-12-29_23-00-11-768x294.jpg 768w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/2022-12-29_23-00-11-1536x587.jpg 1536w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/2022-12-29_23-00-11-2048x783.jpg 2048w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/2022-12-29_23-00-11-1170x447.jpg 1170w, https:\/\/isophal.com\/news\/wp-content\/uploads\/2022\/12\/2022-12-29_23-00-11-585x224.jpg 585w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">ASP.Net FileUpload Control Example<\/figcaption><\/figure>\n\n\n\n<p>We hope that this asp.net tutorial helped you to understand about FileUpload control.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>ASP.Net FileUpload Control In this asp.net tutorial&hellip;<\/p>\n","protected":false},"author":1,"featured_media":4122,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[189,140],"tags":[191],"class_list":["post-4115","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-asp-net","category-programming","tag-asp-net"],"_links":{"self":[{"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/posts\/4115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/comments?post=4115"}],"version-history":[{"count":1,"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/posts\/4115\/revisions"}],"predecessor-version":[{"id":4123,"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/posts\/4115\/revisions\/4123"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/media\/4122"}],"wp:attachment":[{"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/media?parent=4115"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/categories?post=4115"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/tags?post=4115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}