How to upload and download files using asp net and c# Part 139

this is part 139 of asp.net MVC tutorial in this video we'll discuss uploading and downloading files in asp.net we want the user interface to upload and download files to be as shown in the image here notice that we have a file upload control here now when I click on this choose file button I should be able to select a file from the client machine and then once I have this file selected and when I click this upload button we want that file to be uploaded onto our web server okay So within the web server I'm going to have this data folder within the root of a web application project so the file should be uploaded into that folder and as soon as the file is uploaded into the folder on the web server we also want those uploaded files to be listed in the grid view control as you can see here so we want the name of the file the size of the uploaded file in bytes and the file type whether if it's a text Excel word or an image okay and in addition the name of the file should should be rendered as a link so once I click on that file name I should be able to download the uploaded file let's see have to achieve this so let's flip to visual studio so here I have a blank asp.net web application first of all let's go ahead and add a data folder so this is the folder into which we'll be uploading our files all right and the next step is to design the web form so the first step is to drag and drop a file upload control and we also need a button control so let's drag and drop a button control and let's change the text on the button control to upload and now let's drag and drop a grid view control and let's autof format the script view control let's choose Auto Miss scream okay now let's set font family to area so there is a div tag so let's use the style attribute and set font family to area all right okay now let's configure this grid view control so what should the grid view control display the grid view control should be displaying the name of the file the size of the file and the file type okay so let's configure The gri View control so we need three columns so I'm going to click on this edit columns and then the First Column I'm going to add a template field because we need a link button there and once we click that link button we should be able to download the uploaded file so I'm going to include a link button within this template um field but we'll do that in just a bit first of all let's include the header text so what should the header say it should say file so let's specify the header text as file and then the next column is going to be size of the file so size in bytes that's going to be the uh header text so let's use a bound column for this purpose so size in byes and then the data for this column so there's a property called Data field so the data for this column within the grid view control is going to come from size column from the data source so in a bit we'll specify what the data source for this grid view control is going to be we discussed grid view in detail in asp.net grid view tutorial so if you're new to grid view control please watch that video series all right so let's add another bound column and this column is going to display the file type so that's going to be the header text so the header text is going to be file typee and the data for this column is going to come from a column called type within the data source okay and then one more thing that we need to do is we don't want you know other columns to be autogenerated so let's click on edit columns once again and let's uncheck this checkbox autogenerate Fields click okay so that the gri view control is not going to autogenerate columns for us okay and then one final thing that we need to do here as far as the script view configuration is concerned is that we need to edit the template within the template field so click on this edit templates link so you know within the file I mean the file name should be displayed using a link button so that when we click that link button we should be able to download that file so now let's include a link Button as the item template within that template field and then let's edit the data bindings for for this link button control okay so the text for this link button so every time the text for this link button should come from the data source of the grid view control okay so what what is um from where is the text for the link button going to come from from which column it's going to come from a column called file that will be within the data source and then we need to use this eal function and again we discussed the evl function within the asp.net grid view tutorial so if you're new to this function please watch that video all right so that's going to be the text and then I'm going to also set command argument property of this link button in a bit you'll understand how we're going to make use of this command argument and again the command argument value is going to come from file column of the data source okay and then one more thing that we need to do for this link button is we need to specify the command name so we can give any meaningful command name but I'm going to give it download because we will be using this link button to download the upload fi uploaded file all right so that's the configuration for the template field so let's edit uh end template editing all right now let's write the server side code so when should be a we be able to upload the file whenever we click this upload button so let's go ahead and double click this upload button so we have the event handler there now first of all when we run this application at the moment you know uh we have the file upload control so I will be able to select a file from the client machine so when I click this choose file look at that I'm able to select a file for example SQL Developer and then once I click this upload button I should be able to upload that at the moment when I click this nothing is going to happen because we have haven't written any code so what should we do we should be able to upload the file so first of all we need to check if the file upload control has a file selected so file upload one do has file so this has file property is going to return true or false if the file is selected then it's going to return true otherwise false so if the file is selected then what we need to do we need to upload that selected file so how do we do that so file upload one. posted file is going to give us the file that we have selected within the file upload control and I want to save that file uh that posted file so I'm going to use the save as function so where do we want to save that uploaded file we want to save it to the data folder that is present within the root directory of a web application project okay so how am I going to get the path of that I can use server. map path function so server. map path and then the data folder is present within the root directory of the web application project so I'm going to use the T slash data so that's where we we need to upload the file that we have within the file upload control okay so that's the directory but then with what name you want to save that file you know with the same name as what is there on the client machine so how do I get the file name I can simply say file upload one do file name is going to give us the name of the file okay so this code should now be able to upload the file let's see if if that's working as expected so I have the solution built let's refresh this View and let's choose a file let's say we want to upload this image I click upload now let's go back to our Visual Studio let's click on this show all files within the solution Explorer look at that the file is uploaded as expected so once the file is uploaded what is our next requirement our requirement is to actually list the uploaded files within the grid view control so we already have a grid view control on our web form all we need to do is now Loop through this directory get all the files that are present within that directory and then display the name of the file its size and the file type within the grid view control so let's say have to do that okay so we should do that within the click even Handler of the button control because immediately after the file is uploaded that's when we need to also display the uploaded files within the grid view control all right so how do I get the list of files within this folder so a folder is nothing but a directory okay so anytime we need to work with files and directories within net we need to import a namespace called system.io so let's go ahead and import that namespace and within this namespace there is a class called directory class and this class has got a static method called get files and if you specify the path of the directory this method is going to return the names of all the files within the directory you know in um in the form of a string array and then we can Loop through each file and print its name okay so what's the path the path is so again we have to use the server. map path function and then we need to specify the path of that folder so told for/ data that's the folder so what is this method going to return this method is going to return a string array so what we are going to do here we're going to use a for each Loop gr so for each string and let's call it s Str maybe file in the string array that is returned by this function so we are going to Loop through each name of the file and what do we need to do we need to display the name of the file its size and file type so how do I get the file name so obviously this variable is going to have the name of the file but how am I going to get the size of the file now there's another class called file info class okay so file info let's call it fi is equal to new file info and then if you give it the file name so this file info class is going to retrieve all the information about that file that is its name its size the file extension Etc so we can use this object to find out the name of the file it's size its type Etc okay so let's say all right now obviously we want the N all these columns to be displayed at the the grid view control and we need to specify a data source for the grid view control so let's build a data table dynamically so I'm going to build a data table and again data table is present in a namespace called system. dat so let's go ahead and include that name space so let's create this data table now so data table let's call it datay so we've got data table and within this data table we need three columns so uh file size and type okay so dt. columns. add and then the First Column name is going to be file look at this I'm going to use this overloaded version where we specify the column name and the type and the type is going to be a string so type of the type of the column in that table is going to be string because file name is string so similarly we want file size and file type okay so we have added the required columns okay so now what we need to do now we need to Loop through actually this piece of code let's move it outside of the 4 each Loop because we don't want to build the table for every file we just want one table and then to that table we need to add a row okay so we have the table with three columns and now we are looping through each file within that directory within that data directory and then so to the D to this data table we are going to add rows so dt. rows. add so I'm going to use this overloaded Constructor I mean uh this overloaded method add method where we can specify the values for each column within that row Okay so the First Column is the file name so how do I get the file name I can simply say fi. name so that's going to give us the file name and then what is the next column the U size of the file so fi. length is going to give us the size of the file look at the intellisense gets the size in bytes of the current file and then the last one is the file type whether if it's going to be a text word excel Etc I mean basically file type now it terms of that the file info object doesn't have file type property but what it has is an extension property the file extension property okay so it gives us the extension of the file whether if it's a txt dodo. xlsx so we'll get the extension but in a bit we'll see how we can make use of that extension to compute the file type okay so at this point what do we have we have a data table and we have looped through each file within the data folder and added the information of that file as a row to the data table all that is left out at the moment is to associate this data table as the data source for the grid view control so grid view 1. data source is equal to data table and grid View 1. databind all right so let's run this and see if we are able to list the files okay so let's select a file the word document let's click that look at that at the moment we have two files so and we have the size of the files but the file type look at that we are actually looking at the file extension instead of the file type so let's see how to get the file extension so I mean we have the file extension based on the file extension we need to compute the file type and let's see how to do that so what I'm going to do at the moment is add a private function to this code right here so let's add a private function and this function is going to return a string and let's call it get file type by extension so we give it the extension and then based on that it should tell us what is the file type okay so I'm going to use the switch statement here so I'm going to switch on this extension so we are going to pass the extension of the file to this function and this function is going to return us the file type so the extension I'm going to convert that to lawyer so that it will be easier for comparison so switch case so if it is going to be do then what we want to do we want to return saying that this is a Microsoft Word document so if it if the extension is Doc we want to say it's Microsoft Word document so I'm going to return this hardcoded string Microsoft Word document okay now Microsoft Word documents can also have an extension of dox so whether if it is dooc or dox return this for that extension okay so we need to have a DOT there all right similarly we need to do the same thing for Excel notepads images Etc and to just speed things up I have that already typed so let me copy that code and paste it right there so it's it's a similar code except that we have different extensions here and then if it is a default then we are returning unknown so if it's not any of this file types then we are going to get this as the file type that's unkown known okay let's build a solution let's go ahead refresh this view upload another file maybe the notepad click upload look at that oh okay look at that still I don't get the file type why is that that's because we have defined our private function but we are not really using that so what we need to do is here we are passing file extension okay directly to the row but instead of that I'm going to call this function and then pass the return type of that function as the value for that column okay all we are doing is invoking that function that's it so let's build our project let's click this button once again so now look at that text document Microsoft Word document image okay so we have achieved everything except you know downloading so when I click this button right here I should be able to download that file okay but at the moment when I click on that nothing is going to happen why we haven't written the code so let's go ahead and implement the download code So within the web form we have this grid view control and if you remember within this grid view control this is a link button okay so whenever we click the link button within the grid view control grid view raises an event called row command event okay so let's go ahead and handle the true command event so I'm going to go to the properties of the grid view control click on the lightning bolt symbol and there's going to be something called row command event so I'm going to double click on that one that will generate row command event handler so here we're going to write the code to download the uploaded files so F so that this object uh grid view command event arguments object so this is going to contain all the properties that we need so if e do command name is equal to download and if you remember we have set the command name property of the link button within the grid view control in that template field so within the grid view control the First Column is a template field and within that we have this link button and notice that we have set the command name as download so if somebody has clicked this link button then it's going to raise a command with the name download so if that is the command name so if command name is download then we what we need to do we need to download the file so first of all I'm going to clear anything that is present within the response stream and then response do we need to specify the content type so the content type is an application content so application for slash octet stream and then we also need to append a header so response dot upend header so content hyphen disposition and then we need to specify the file name so file name is equal to so where are we going to get the file name that we want to download and again if you remember you know look at this the link button text is nothing but the file name not only that when we were configuring the link button within the template field we have set command argument property of the link button to be this file name okay so we're going to make use of that command argument so e do command argument is going to return us the file name okay and then finally what we need to do we need to stream the file so response. transmit file okay and we need to specify the file name I mean basically the full path of the file name so we're going to make use of the server. map path we have used the server. map paath several times now if you need to know what the server m. map paath is actually doing I recorded a video on this in the previous sessions of this asp.net video series so please watch that video all right so till for slash within the data folder and how are we going to get the file name again e. command argument is going to give us that and finally after we have transmitted the file and the response that's it so let's build the solution let's go ahead and try to upload another file let's select the file first of all so we have Word document we have notepad image let's now upload this Excel document look at that we get the file type as expected now let's click on any of these for example let me click on this relationship do excel look at that the moment I do that I'm able to download that and I want to download this image the word document so we are able to upload and download files all right so this is the code to upload files that we have just written and this is the code to get the file extension I mean file type based on the file extension and this is the code to download the file that's it for today thank you for listening have a great day

Channel: kudvenkat

Views: 296,566

Keywords: upload, download, files, asp.net, c#, save, folder, uploading, downloading, web form to upload files in arabic, website form with file upload in arabic, upload file using fileupload control in asp.net in arabic, c# code to download file from server in arabic, c# code to upload file to server in arabic, upload word document c# in arabic, upload excel file c# in arabic, download excel file c# in arabic, upload xlsx file c# in arabic, upload txt file c# in arabic

Id: -fkdrgFiaeI

Length: 24min 15sec (1455 seconds)

Published: Sun Aug 11 2013