File Upload in ASP.NET Core MVC | | .NET 8.0 File Upload in ASP.NET Core | | File System & Database

welcome to mcro code if you're new to this channel consider subscribing So today we're going to learn how to upload a files in.net MVC so I'm using visual studio 2022 and we are going to create a simple project and do file up to a folder and even to a database so if you're new to this channel consider subscribing and let's begin our video today so we are going to create a simple project so I'm going to create an MVC uh as. net call web app MVC so I'm going to choose that then we can actually give our project name so we can say file upload spnet MVC so that is my project name so if you have your preferred project name then you can supply it here so if you click next we should be able to choose the framework so I'm going to use net 8.0 which is is actually uh on long-term support as of this uh video so then uh under authentication type I can actually choose individual accounts then I can create my project so let's just click create then our project will be created so file upload is quite important for any kind of application that you do and you can actually tie these even uh to to the profiles assuming you want to apply to upload profiles for particular users within the application then you can actually upload and some of these files you can actually save them maybe in a shared directory or uploaded to SharePoint or even you can save some of the details to the database so in today's video we going to learn how to do this so as you can see our project has been created and we have our project folders here we have areas controllers data and uh models then we have a views so we just uh launch our application then we'll have just a simple application and so but first uh things first we need to actually uh provide an interface whereby we should be able to appload files so let's just wait our app to launch then we should be able to see how this goes so for those who are new to this Channel and you've been following us consider subscribing and like our videos so there we go so our app is launching let's just refresh let me just relaunch I think there's something wrong so let me relaunch so our app should be up there we go so you can see we have the file upload spnet MVC which is our file name so to do to change the name we can just go to our shared layout then we can call these uh can call these file upload spet then you can say file upload system let's just call it file upload system so if we just do that can do file upload system and we apply our changes then we should be able so as you can see our changes has been uh effected so we have file upload system so what I want us to do we can also change this home and provide some details so we are doing uh file upload so you can just go to home index then you can say uh subscribe to macro code so if you are new to this Channel and you have not subscribed you can consider subscribing so then here we'll just say we'll just change this then you can say we are learning we are learning on how to upload files in as. net Co MVC so if we do that then let's remove this let's just remove that then if you apply the changes then you'll be able to see that our changes has been affected subscribe to macro code and we are learning.net Co MVC file uploads so what I want us to do without uh doing anything first is I want us to create a database so I will be showing you guys how you can upload a file save some of the file details like the name to the database and actually save the file to a a folder somewhere or a shared uh folder or even you can upload this to SharePoint so we'll be covering how to upload files to SharePoint in our next uh Series so let me just uh open my Microsoft SQL uh server management Studio there we go so then I'm going to create a database so I'm going to create a database called file uploads so let me just create my database so you can also create your own database give it your preferred name so I'm going to say file uploads so if I just do that we'll have my database uh created and we don't have any folders now so we are going to use code fast approach for anything that we are going to do so but now I want us to do something on our UI here I want us to have div class to Define an area where we'll be attaching files so I'll just do Arrow then I can do DV let me try to zoom this a bit DV class then I can do here so I want us to have where we will be attaching our files so here I'll also do input then we can say type you will be attaching file there we go then I also want us to have uh so you can also do accept so this accept accept you can actually give the kind of files that you'll be accepting so I can say do jpg then I can say uh dot jpeg can also say PNG so if I do that then I can actually close my input I can also have my class here and I can say this is form form control so if we have that then I can also within our form here let me just uh do that then if we just apply some changes to this form we should see some changes you see this is we can now be able to select a file and if I click that you'll see the custom files here is actually based on what we've added and you can see I'm able to attach a file select the file and you can change this in case you want to have a that is PDF or you can have Word documents you can actually change that so but for me I want us to add uh something here I want us also to add uh just let's just do this is uh md6 you can do 12 then within here inside here you can actually do MD six then I can also close this so I can do the IV then I can also copy this then I can have my can have another input then I can say this is type we have a text then I might want to maybe provide some description to that file so I'll just do that then I can also copy this and I can have it here then I'll do I'll provide now my buttons so I can do a button I'll just do button then I can say type uh is equals to submit so that is my button then I can do class can do BTN BTN then I can say primary then I can close my button so I'll just close it that way okay so if I do that and apply my changes then we should be able to see uh some changes but you can see that we have some problems with our with our UI so let's try to change this so we can do that let me just uh so we can do this is uh can have class here the class so do we have a let's confirm if we have a bootstrap in our so let's check on the Styles you can see we have everything everything is okay so what I want us to do here is uh we've closed this youve close this so we can actually have this here so the r should be can have it that way let me format update my changes then see how it looks so that is how it looks now so we have our files we have our input then we need to have our button but this button of ours it doesn't have text so we can say value is equals to upload file so if we just do that and update we should now have our button with upload file text so let's just wait to refresh so let's confirm if uh uh you can actually do something like this you can do something like this can do something like this then you can say this is a file can say appload upload file so let me remove this so if we do that and I apply my changes then I should see the my file upload you see this is my file upload we can also try to put in some margins so I can say empty margin top then we can have 20 if I just do that let's see what will happen it should give us some spacing so let's just see this should be Marin top then you can have here can say five if we apply changes there we go so you can see it has given us some uh some spacing but now I want us to do something so I want us to do something here so the first thing that I want us to do is to create our file a model that we can also maybe uh create we can also kind kind of store it within our uh database so let's just go to models then then I want us to create uh something on like a let's just create a model then you can say file creation so you can say file creation so if we do file creation so that is our model then I'm going to say public in ID then you'll just uh say get set so that is our file uh that is our primary key then I want us to save this uh we can have a string then you can say a file name then you can also have another property you can have these as file type so then you can also have another we can say file can call this extension so you can just call this extension so assuming you want to be storing the records of files uploaded to your database so this is how you will do it then we can do a description then we can also do something called uh you can say uploaded by this the user who uploaded uploaded by then we can also have uh you can also have the T stamp so this will be date time then you can have it that way then you can have these as uploaded on so if we do that we can also do something here called Data annotation so I can actually do that then say display this is what we want to have it displayed so I'm going to use this display so this you can do display then you can do name uh equals to then you can do that then you can actually say here file name sorry so this will be file name I can also do here file type I'll do here file type I can have your file extension can have file extension extension then I can also do uh description description [Music] description so then I can also do uh uploaded by here I'll just do uploaded by then I can also have uploaded on so these will be uploaded on so this is our time stamp so the next thing that we need to do we now have our file creat we need to have this we need to set this on our application DB context so I just come to our application DB context just after this C uh Braes I'm going to have my database that is DB set down here so I'll just do public then uh DB set then we need to pass our model which is our file creation model and we need to import it so file so we need to have using this is what it has imported then we can provide the name of our file Creations so you can call it file Creations so this will be the name of our database but you can also change this assum assuming you want to say system files you can also do that you can give it the name of your but for me I usually like to have the the the model name then I do a plural so that is how I I usually like to have it so after that we've remember we created our database called file uploads so I want us to copy this uh the name of this database then we usually do connection to database at app settings for those who are new to this channel so here we'll be configuring our server and our database so to get your server name just go to Microsoft SQL Server manager Studio then you'll be able to see this link at the top here called connect object Explorer then if you click on it it will give you the server name so this is my server name then I'm going to uh replace what we have here on the uh app settings then uh the next thing is the database so I'm also going to copy the name of the database to ensure that you are providing the correct name so I'll just copy the name of the database then I'll go directly to my database section then I'm going to change this so I'll just change this to reflect the name of my database then trust connection is true then we have multiple active result set is true so I want us to add another uh thing you can say trust so just do trust server certificate trust server certificate then just just have this to true so if you do that then we are set to go so after we are done with that so the next thing that I want us to do is to add migrations so go to tools at the top uh that is at the ribbon at the top of your Visual Studio then uh package manager console then I'm going to add migrations so let me just say add migration so this is the command then I'm going to give it a name of my migration so I'm going to say add migration then I'll say initial migration so if I do that my migration will be added and everything the migration file will be generated and we should be ready to add that is to update our database with the new tables so let's just see I see there everything is good and you can see if you go to migrations folder under data you'll see under migrations folder there is a file that has been generated with a Tim stamp called initial migration so this initial migration is the is the migration name that we provided and if you click on it you'll be able to see there something here like create table and the table name is file creations and these are the fields so we have the ID file name file type extension description uh uploaded by and uploaded on with our primary key so you can see so but if you go to our database you you'll notice that we don't have that uh table so how do we make that table appear here so to do that we run another command called update database so let's just go back to our package manager console then I'm going to run H update uh database command so if you press enter Then our database will be created and you'll be able to see here some commands that are quite familiar so one of them is uh let's just do so one of them here is the create table so you'll be able to see there are some default tables for sp. net core and we are not interested with that so if we just go to our database you'll see there's a lot of tables that has been created so you can see here we have the file Creations this is the table that we have uh designed and these other ones are default tables spnet roles stores roles spnet users stores users SP not roll claims those roll claims so all these then we have one important table called EF migrations which actually keeps tracks of our migrations and as you can see we have the initial migration uh entry that we provided so we have done that so what other thing do we need to do so what I want us to do now is I want us to create a I want us to create uh assuming you want to update our table you see here we have something called uh we have a file name file type extension description uploaded by and uploaded on assuming I want to update that model so what I'll do I'll just go to file creation and assuming we want to store something different or something new so I'm going to do maybe we want to store the file path so I can do that then I can say here file path then if I do that then I need to add migrations so I'm going to add migrations again so I'm going to clear this let's just type in clear then I can add migrations I'll now give it another name so I say add file path so if I just add that another migration file will be generated called file path with a time stamp and if you can open it you'll see we are only adding a column called file path and the table is file Creations the data type you see and whether it isable and a default value so if I want to update my database I'll just do update then I just run a database so this will actually update our uh database so let's just uh wait and see if everything is okay there we go so if we go to our tables we'll notice that we've added a new column called uh file path so you see and within our migrations history we have another migration that has been tracked called path so that is by the way now let's go to the main thing so I want us to add a a folder let's just go to our project then let's create a folder called view models so I want us to add a folder called view models so inside our view models I want us to create a a a view model then you can call it file upload view model if we do that we are able to see that so on our view model I want us to I want us to borrow the properties in our in our file creation so I'll just say file creation there we go and we can as well add some properties here so what I want us to add is I want us to add uh I want us to add want us to add maybe some byes so you can say public uh we can say bite array then you then you can have that so we can say bite array data can say here file data then that is it so the best thing about uh using view models is anything that we add within our view model we don't have to add migrations so that is why why we usually prefer having this uh using view models so and as you've noticed guys we added migrations and we are able we were able to connect to the database how did that happen so if you come to our app settings remember we we did a connection to our database then we have a program. CS so this is where we are actually connecting getting the connection string that is the default connection and you are making our connection to the database using uh SQL and with the help of Entity framework call so that is why we were able to do that so after we are done with that so I want us now to go to our I want us now to go to our controller and we need now to upload files to our application so if we go to home controller we have only we have only index but I I want us to do something on our view model so that is that is on our index page I want us to borrow our model so at the top here I want us to say at model so we want to use our model so I want us to use uh file file upload Dot View models then we we should use our file upload view model so that is how you do it so we now have our file upload view model then here I can actually have a label I can say label then I can say SP 4 this label is for we can choose here this label is for files or this label is for something that we need to do but here I'll just say maybe you can let me just say file file name then I can do can close that label I can also have this here can say this for description then I can also have so I think that is the only two things that I want us to capture the file name and the description so after doing that we need need to submit this data to our controller so what I want us to do within the form just within our row here I want us to have a form then you can do that is a form method should be post so we can do Post then we have in type then that is a multiart form data then we can close this form so if you close it you need to copy this up to the end here so you should actually close it here so we have this closed this closed and this closed and you can actually have let's just have our row here anything that is uh can have our row there and let me format this so that it looks uh better so this is how now our app looks so if we just launch our application even without doing anything we should be able to see our form and we should you will be able to uh see our buttons so let's just launch our app so for those who are new to this Channel and you are watching our videos and you following it clearly comment down below subscribe if you're new to this channel so let's just launch our app and see there we go so we should be able to see we have a subscribe to macro code and I believe you are doing so then you have our file name and our description then you have our button to upload file so the next thing that is now going to happen is we need to display some data tables here assuming we want after saving the data we want to see them so I want us to Define here just below it I want us to have maybe that then we can do we can have a table so let's just have a table then you can have a can say class can have these as table then you can also have table then you can say this is stript then you can also say table then you can say this is a a bordered bordered yes then you can also have table can have another class you say w yes so if we do that then we can close this table then inside our table we need to have our table head then we can close that inside our table as well we need to have the table row can close that then we can now have our table table headers so I'll just do that then I can maybe say here now ID I can also do maybe here but instead of doing this I can just stay here at can just say your model so let's just say model so let's just do at model so where is our model that is it so you can say at model this is our model then we need to get the properties here so what is the first thing ID no this is ID you can say that then I can reuse this and say here this is uh file name can also do here can also do here file model at file file type so and another thing you can also do here you can say maybe at HTM mail. display display or is display name for then you can do that then you can say can say model model equals to then we have these as a can say model do ID then I can close it so if you do that then it also works so you can also use this or we can use this and here you just be saying file file name you can also copy this let me just uh do that can also copy this and I can have it here and I can say extension then let me just after table head I can now close this within our table head I can have my table body now T body and Define my table body then inside my table body I can have my can have my table so here I can have my table row as well I'll just do table row but now within our table in our table body we need to Loop so I want us to go to our uh file upload model view model then I want us to have a list of so you can just say public then we say list of file Creations so this is file creation and you can say files you can call it system files system files then we can have our get set so you see the best thing of that is to have this and we don't need to update our database so if I just go back to our homepage I can now do a loop I can Loop through here so I can say at at for each I can access now my files I can say v file in model so I'll just say model dot system system files then I can open then I can have all my table rows inside here so we are going to look through all the files now that will have been registered and uploaded to our database so I want us to within our table row we can have our table head and this should now reflect the number of headers that you have done here so I can just do at so we'll just do at dot then we have the first thing is the ID then you can do the next thing is our our file name then the next thing is our is our extension we just do extension and we should be good so if I apply the changes to our application then we should be able to see we have now a data table where we should have we should we have a table where we should be able to see all our files so let's just confirm there we go but now there's one thing that is the reason as you're getting that let's go back to our home controller and we should actually have our file so we say file upload view model this is our view is expecting that then you can say VM then here we can return our VM when we launch our app we should now be able to access our application and view the data which will be empty let's just hope it will run if we have an error then we need to instantiate it yes so let's just go to our our home controller again let's just say here VM then say do system files so here system files we say is equals to new we have we say list then we do that so that will give us an empty system files but also we need to check something here so we should be able to check whether our system files is empty or not so here we can do if you say if say if let me remove this sorry so we say if then we say our model do system file FES can say count is equals to zero then you can do this so if it's equals to zero else if we have anything saved to our database then we display the data table Yeah else we can actually say we don't have any files in the system so here we can do something we can have a a a caption so you can say caption then we can say can close then we can say there are no records in the system so if we do that then we can relaunch our app then you should be able to see if there's anything that will work so it we should now expect to get this caption so there we go so you can see there are no records in the system so that is okay so the next thing that I want us to do now is we need to upload our file so that is now where everything needs to happen so and how are we going to upload the file so remember on our files here I want us to do something go back to our file so we say here this is type file then I want want us to give it a name so I want us to give it a name then you can call it file so if you just do that go back to our go back to our home then I want us to say here Ione file iPhone file then say file so that one will give us the file that will be attached so even without doing anything let's just test our application so just put in a breakpoint then let's launch our app and we should be able to attach a file even if it's it's not saving anywhere so let's just go there there we go so we have our breakpoint if you hover on the file you'll see the file is null so if we proceed there we go so if I click upload choose a file then if I click submit we should be able to see that we have a file here you see we have a file that has been attached the file name is this net MVC series and if you're new to this channel guys we actually have a net MVC series that is going on you can consider watching then you have the content type it is actually an image and we have the link and the name so we've been able to see you can actually attach a file but our model here doesn't have anything so it only have the uploaded uh on default date so I want us to do something now remember we are saving our details to our database so what we need to do we need to have our application DB context here so we can say public read only then say application DB context so this is our application DB context then you do that then here we'll have our application DB context then you'll have our context here so I'm going to do that put in a comma here let me try to zoom it in a bit so there we go so here I'll also do underscore context then I assign that so we are now good up there so what I want us to do now is after we click upload file so we need to generate something so we need to create so this is a HTTP get and this one we don't want to use this so this will give us the files that has been uploaded but I want us to copy all this and I want us to remove this from index page we just have file upload then then here we want to have ATT post so this is what we'll be going to use and here we can say upload file so this is what we'll be uploading then we'll not be loading a list of files but this is what we so if we just click here we need to copy let's just copy the upload file then go to index our page then here I want to do something called SP action then put in our upload file that we've just created so if you do that then that is okay that means if a submit button is done it will actually go to this uh method upload file so after we've done that so the next thing that I want us to do is I want us to to now assign values to our file so you can say file can say created uploaded file so that's a variable uploaded uploaded file equals to so I want to say new then in this new here we we should actually Supply details to our file creation model so you see this file creation model we need to tell a file creation model the created the file that is the uploaded date when the file is being uploaded which is now so let's just take the time stamp we should also assign it the person who created so here you'll say uploaded by so we can say this is automatically macro code so you can say here macro code then within this section we can also assign it the file type so here I'll just say file type the file type will we'll get it from this file and we can just Dot type so you'll just say say do content type so there we go then the next thing is we need to get the name of the file so here I just do the file name and I can just do here dot we can actually even get a name of the file so I can do here I can say variable so I can say sorry can say there we go I can say variable then I can say file name equals to I want to get the file name so I'll just say file this is the file then do name this will give me the name of that file so if I just do that I can do do file name but now I might want to give maybe a unique name to this file so if I want to to give it a unique name then I can actually assign it maybe a Tim stamp or something that will make that file unique because you can have so many files with the same name or the same person can upload too many files so you can have so many files that uh the person can upload with the same name so we don't want to have that happening so what I want us to do I want us to I want us to add here something so let's just do that then put this then here we do that then I want us to have this as the file name here so after doing that I want us to have something else so I want us to get can say and do underscore here then I also want us to do to get the date time that is the time stamp when this file was uploaded do now then you can say to string to string then we do that then I want us to give it a format so so that we make that file unique so I'll just do that then here I can actually do I want to get year year can also do month month that is month month day day hour hour minutes minutes and seconds so I want to give it that will be the name of my file so after doing that then I can assign this name so that means our file name will be unique unless the person uploading is kind of uh acting like a a robot or something but this file will be unique you can see we actually appending up to the seconds so after doing that then we have our file uh that is our our file name so the next thing that I want us to do is uh our description so remember our description this is being keyed in by the user so this will be description we'll just do description then you can do here equals to description but this is coming from our v v VM so I'll just do VM then description so then we have another thing maybe the file file path so then that's also coming from the VM then you also have the extension so how are we going to get the extension of our our file so to get the extension of our file so to assign a file that is extension to our database and to this uh property here we need to get the file path of where that file will be stored we've not actually even indicated where we are going to store the files so what we need to do we need to store the locations where we are going to store the files so how do we do that we going to do it under app settings. Json so I want us to define something here so I want us to do a comma then we can do provide section so you'll say file management so this is where we'll be managing our files full column then open then we need to put in a comma here then inside here we need to have our key so that will be system file uploads then we need to provide a value that is the that is the folder where we'll be storing our files so after doing that I'm going to Define my location this is where I'll be storing my files so under local disk D then under docu that is the folder called documents upload so you need to copy that then go back to our system file uploads then I'm going to paste it here so this is where I'll be storing my documents so if I just do that this is now where I'll be storing my files so then we need now to tell our app where to access that file so to do that we need to have something so I want us to Define some Define the path where we'll be getting our our our file and also where we'll be saving our file so to do that you're going to use I configuration manager so let's just go back to home controller then I want us also to do something here so we just do private then read only so I'll just do read only then I'll do I configuration manager I configuration I mean then you'll just do underscore configuration then here I'll just copy this then I'll also have my configuration here so then I can also assign it here so if we do that then we can access our settings here and we can access these uh system file upload uh folder so if we go back to our home controller then I can now Define my path that is the file path so the file path will now tell us where the file will be uploaded so here I'll just do variable then say path will be equals to then I'll just do just do that sorry then inside here I can now access my Jore configuration then I say get Section so get Section so this section I'm going to get the section where I have my path set so inside the section you know this is how it is under file management then after file management it is under sub section called this system uploads so this system uploads is where we are going to upload our file so if we just do that then I do here value it will give me now the value where we are going to store our files so if I just do that then I'm able to get my I'm able to get my path so that will give me the path where we are going to store the files but now I need to combine this to get a complete file path so here I just want to have maybe just do variable file path equals to then I need now to do path I'll do path dot combine then I'll have my path so I'll just I'll just replace this with I can have this here so this will be my path then I can combine it with my file name then I'll have my complete file path so to get the extension I can now get my file extension here so I can say variable file extension extension extension equals to I can say path do get extension then I can supply my file I can supply my file file name so this is the file name here I can supply my file name and I can actually even uh Supply my so this is how I'll get my extension so I'll just do extension then path then extension so path. get extension so if I do that I'll be able to get my file extension and here also I'll be able to replace this file extension here and I can do that so I'll have my extension here then we didn't now to do something you see we now have our file path where we have our path then we can combine it with the file name we can get the extension so we can even get the complete path and you can get the name without the extension so to get the file name without extension you can say here variable file without X extension so if you do that you can do path then you can say dot get file name without extension then you supply the file name so that will give you the file name without the extension so but do we really need that so that is what we need to know so but we want to save our file so to save our file I'm going here to do one thing so we need to save this file that we've uploaded to the directly under system file uploads before even we register it to the to the database that is to ensure that our folder exist and if it doesn't exist then we don't need to register it now I'll just do a variable then I'll say stream equals to new then I'll do file Stream So if you do file stream then I can now do pass my path that is the file path so these will be my file path then I can pass the name so I can actually get so this will be the file path which will be the file plus the name so this will be okay and I can now pass the I can say file mode dot create so if I just do that then I file will be created and I can now do here so this is what we are doing here so if you're new to this channel consider subscribing so this is what we are doing we saving our file to the folder so then here I'll just do now await then I just do file so do copy copy to async then I'll pass my Stream So this file is is actually this one so after doing that I now have my extension so my file path is this one that you've just assign so I can actually save my file path I have my extension now and I can close this but now we've done that so we need to save this to the database I can do this and I can say here uh underscore context do add then I can do uploaded file so if we do that then I need to save it so I'll do a wait then context save changes a sync so that will actually save our data to the database without anything uh so I can also do here maybe a wait so if I just do a wait I can do add a sync so if I do add a sync then that is okay so let's just now confirm what will happen so I'm going to launch our app then we try to assign a file that is then we try to upload a file to our database so let's just confirm so we have an error so the error here is upload file yes we need to return something so we need to return here it is saying uh must return void task so here I'm going just to say here this one you can say return can do redirect direct to action so I can just do index sorry can do here direct to index so after after uploading redirect this to index then here we need to can say this should not be can do here let's just do so here do we need to return anything yes so something that we need to do here is we need to say task so I'm going to do that then I can do this here then on the sync so we KN we do task create then we need now to return so let's just confirm so this one then here is saying upload file not all called path returns a value so I've done that then here we need to say return so I'll just do return redirect to action so and that is okay so if we launch our app we should now be able to attach a file and we should ensure that this is saved to the database so let's just uh see what is happening so if I just click upload file attach then if I click upload here we now have our file and we have everything then let's confirm our file name that will be generated you see our file name it is now taking uh you see file name series. p yeah so there's something wrong there so what I want us to do is I want us to have so this one is giving us PNG so that's not what we want to have so I want us to have uh I want us to have the file name so let's just do this so let's just have these as the name of the file so let's do that then we can can have this time St that way so after we have the time St we can then assign the file name so we can do now our file name here will be equals to we take the name that is the the name name this file name then we say plus we can do plus then you say file do name so that should come last so if we do that then we'll have our name so then here we can actually do we can add something so I'll just do can have your my underscore then we should have this starting then underscore then the file name which will also assign with the with the with the extension so after doing that let's just let's relaunch our app and see what will happen so there we go so we are trying to prevent to have file names that are similar so I'm going to do that then I can upload so if we go back here I think we didn't have a breakpoint so yeah so that's what we let's just go back first there we go so our file name you see it is giving that that underscore file then we now have our file name here then we should have let's confirm how our file name looks this should be not name but file name sorry for that let's just stop again let's insert let's launch our app then see so this will be file. file name and this is what you're supplying here I'm going to add then upload then file name you see it is now the time stamp then underscore then the file name that we uploaded here so if you see here it is net MVC series.png but our file name now will be the timestamp net MVC series then one thing that I want you guys to note is our path you see uh it is now showing where we'll be saving that is under uh D documents upload so we've actually managed that under app settings that means you can change this and the app will still work without you changing the code so the file path you see the file path it is d a documents then it it has now appended our file name and we can get our extension our extension is PNG that is our extension we can also get the file without the extension so you can see the file name is that without the extension so and that means our file is being saved so the only challenge that we have is we are not inserting anything to the database so if we go to our folder you'll see that we have some files that have been saved so this is the file name that has been save to our folder so the challenge that we have is we are supplying null to the description you see this description is null and we are not expecting anything to be null so that means we need to add it here so we need to say we have uploaded files successfully so I'm going to do that so if we do that I'm going to click upload again then if we come here let's just have a break point here then let's just confirm our details so we have our description our description is still null our file is that and this is okay so what I'm going to do is we need to ensure that our input here yes so this is where the challenges so we need to have here we can say here SP or then you need to say equals to then you need to say this is for description sorry then you need to say your description so this will now give us the value of description that we type in then we should be able to save our app without any challenge so let's just confirm so there we go so if I if we attach a file here I can say here can say this is okay I upload there we go let's just check the description here we have this is okay which is actually being uh taken from our input then under file upload we need to ensure that you see the description this is okay extension is PNG the file name the path the file type uploaded by and the date so if we proceed then our file should be uploaded so you can see it has redirected us here and if you go to the database and file Creations we've done a lot of retries so we expect a lot of Records so let's just check yeah I think this is the first one that was inserted because we were missing the description so let's also insert some other file I'm going to attach another one and I can say [Music] day that's inserted I can also do do here can do Independence Day so if we check on our database we actually have our files so you can see we have our files being inserted the file type the extension the description uploaded on and the path so you can actually read those parts so that is it but what one thing that is happening we don't have our records and we have our records within our application that is in within our database so let's just go back to index here we need to assign this system list to we can say now a a weit we need to assign it values then we can say context then dot uh file Creations dot to list so you can say to list sync then we can say that so if we do that our file this will be okay and you see this is giving us an error why we need to do this so you can say task and you can have this so if we do that then we are good to go so I'm going to stop this then I'm going to launch our app then we are expecting to have some values within our application so as you can see now we have our details we have the ID the file name and the file extension so let's try to add more details on our home so let's just go to index and uh we need to check this is our table ERS and this one actually should be our table data so let's just check that correct that this will be our table adders and table data then we need to on our database we have some we have the file name file type so let's just confirm we have everything so we can have your file type so this will be file type so I'm going to do that can also have your file [Music] type so I can have your file type so this will be my file type then once I have this I can I can also have our description I'm going to have our description here I'll just provide our description then we need also to have our description down here so we have a description then what other thing do you need to add so let's just confirm we have our then you can have uploaded by and uploaded on let's just confirm that so here I'll just add uploaded by and uploaded on so here is uploaded by then you can also have it here as uploaded uploaded on uploaded on so we do that then we can also have our table Eder here for uploaded on uploaded on so that is okay so if I just do that there we go so if I just apply our changes I think we've missed something here our table data we need to have another upload it by here so if you don't do that correctly then your table will be distorted so if I apply the changes then let's just check how it looks there we go you see we have we now have the ID the file name the file type the file extension description uploaded by and uploaded on so so if we just add another file we say uh letest file and we upload then you see the data is now being updated here so I can also do here maybe details can say latest file latest file I can upload so you see it is actually being uploaded and if you are keing the file names are quite unique so that is how you make this to look a bit better so let me also so you can also try to have yeah we can say we want our table ERS to have colors so we can say background do your style then you can say background color let's just say background color then you can have a different background color so you can choose here let's say you want to have this that way so if I apply the changes then we'll have our table Eder with a different background color so you see so that is how we have uploaded photos that is uh files on asp.net Co so we've managed to add file extension file uploads and even save it to the database and display it so assuming you also want when you're adding data you want to see uh you want to see the the messages currently as you can see we when you are adding anything we don't don't even know when if we have added so if I just if I click save we only see that the numbers are changing down here and we don't have H the to we actually can't tell whether we've saved or not so what I want us to do is I want us to Define give the messages success messages whether we've done successful save or we've not done a successful save to our files so to do that I want us to navigate to a shared layout then we should be able to give indicate the area where we want to have our files that is our our messages populated or displayed when we save a file so let's just go to our file here let's just go here and layout then I want us to Define on our layout within the B body just within the body where we want to save our file so or even you can you can we can indicate we want to provide the name of our or we can actually let's just do it on our index page so just at the top here we can can provide a title here we say can say this H five then you can say all uploaded file so if we do that then I can let me just add a break then here I want us to do at so want us to do at let's just do let's just do sorry so if I want us to do if temp data so let's just do if temp data then we can say message temp data message is not equal to null then we want to display a success message here so what I want us to do I want to do a d class row then we can close that then you can also do D class so I'll do class then you can specify can say md12 then if we close that inside here we can have we can say divv can say class can say class then I can do can have aler can also have aler then I want to do an alert for Success this one so then I can can do here aler I can say aler so just within the class here can do alert let me remove this or you can even close it so if we close it so here I want to say aler then I can say dismissible dismissible that one then inside here I want to have something like a button so I can say button then you can say type can say button then you can have a class sorry then you can have that class and give it close then here I can say data then I can do dismiss I can I can do data dismiss then I can do is equals to I can do alert then I can say area then hiden then I can say true so if we do that then I can also can have I can now close this then I can have here and do dollar can say here times so that is an X to cancel then down here I can have now my message so here just within my divv so here I can do here can have here my strong message and do strong then I can have my temp data so I'll just do that and paste it here but here I just do at sorry I need to do it outside here I'll just do at them data then message so if we do that uh then everything will be okay when we save then we have an alert message so let's just check if we have done it right so what we need to do we need to come to our need to come to our controller let's go to our controller then here we need to spacefy Our Success message or uh just after saving here so I'll just do temp data then I'll do equals to and do dollar sign then I can say uh file so then you give the file name so I'll just give the file name so then I'll say file name of that is our file name yes file name then you can do as been successfully has been successfully uploaded to the database so if you do that file name has been successfully uploaded to the data database so if we do that then we should expect when we save now we have a success message so let's just confirm so let's launch our app so if you're new to this Channel and you like our video kindly subscribe to our Channel and if you feel you want to buy us coffee you can also buy us coffee in the link below and we will really appreciate so if I just open there we go let's just confirm there we go so if I upload a file now let's just confirm and I can do here testing message so then I click upload there we go you see we see we have file has been successfully uploaded to the database and so you see we've actually successfully uploaded a file to the database and we have now our success message so you see file.net has been successfully uploaded so let's just do another one so every time we now upload a file we'll be having our success message with the file name that has been uploaded so I think that is it for today's guys for those who are watching and you have not subscribed please consider subscribing and see you in our next video [Music] [Music] bye

Channel: Macro Code

Views: 266

Keywords: AmigosCode, .NETCORE, Sundeep, Saradhi, freecodeCamp, ProgrammingWithMosh, MikeDane, IamTimCorey, TeddySmith, FireShip, DaniKrossing, Stefan Mischook, ASP.NET CORE, Coder Foundry, Jose Montemagno, Nickchapsas, Jake Wright, Keep On Coding, QuestPond, Amigos, Developer Filip, TechWorld With Nana, Techworld, GotoConferences, CRUD, BoostMyTool, ProgrammingPragnesh, Gerald, RESTFulApi, NetCode-Hub, NET8.0, BLAZOR, BLAZORMODES, PatrickGod, AdminLTE, ASP.NET, MVC, ASP.NETCOREMVC, EFCORE, Files, FileUpload, ASPMVCFILEUPLOAD

Id: Hcvt9Rv3xJg

Length: 77min 48sec (4668 seconds)

Published: Tue Mar 05 2024