Associating File Uploads with a Form - The Blazor File Upload Mini Course

this is the uploading files with blazer mini course in this video we're going to associate our file upload with form data rather than just uploading the file independently we'll be building off a code from our last video now this video is part of a mini course around uploading files I would encourage you to click on the playlist in the description and use it to go through the course in order now if you don't know me my name is Tim Corey and my goal is to make learning c-sharp easier I have hundreds of videos here on YouTube with more coming out each week I have a podcast answering questions developers have and I provide training courses designed to give you the real world training and experience needed to succeed in today's Marketplace you can find all the resources I have to offer at I am Tim corey.com okay let's go back to our code this is the the working code that we had uh when we left so if we run this right now and again if you're just picking up in the middle that's okay if you just want to learn this part it's totally fine but just know that we're not going to go back and start this code over we already have a bit of a working demo we can choose files we can select the files we can upload those files and those files go to a directory now right now I've deleted that directories storage or something in there but if we were to to upload a file let's just grab my face it goes and creates the Fuller T choring inside that we now have that image that t core is because we're simulating that's who's logged in is Tim Curry so it's not just a headshot we choose so I chose NOAA there uh oh no this is too big we left that in there but if we you know upload other pictures they would go there as well it's just that my picture is the only one that's small enough so let's go ahead and go back to your storage and delete uh that so we can start off fresh and we can start off let's go ahead and change it back to three megabytes because uh one is just not big enough we have some larger images in there okay so what we're going to do in this video is we're going to kind of bring the real World back into play the previous video we talked about hey here's how to upload a file it's just a very simple here's the code but that's not really real world right we when we upload a file there's more than just hey Apple the file we've got to associate with data we've got to put in SQL Server we gotta get back out of SQL server and use it all these kind of things we need to do and so this is kind of the next step in that process which is let's associate it with some other data we're going to simulate that we're um creating a new customer record and that custom record will have some data Associated a first name a last name a file name of the file the upload and probably an ID so let's go ahead and create that in our data folder now I could create a separate class library to put this and we're going to leave this right in the UI how you structure your application may be different that's okay the size your application will determine how you structure things but for our simple demo we can just put a new um a new class right in our data folder and we'll call this customer model and we'll use the file scope namespaces plus I call at the end here so we can make this a little smaller and in here let's create a few properties so an ID and we'll have a string we'll call it username and that's the the logged in user so we'll again hard code this to T Corey again we're not putting authentication into this app we talked about last time but this will be simulating if you were authenticated because you should be authenticated before you start uploading files this would grab that authenticated user's username to associate with whatever they do that way we know oh Tim was the one that uploaded or created this new customer that you can go back and have a trail of who did what but in our cases we don't have authentication it's a whole Noah topic we just hard code it to say t core instead okay so we're gonna have a nullable string called first name a nullable string called last name and how about a nullable string called file name so making nullable strings because I don't know that they will have values initially so I'm going to assume that they can be null at some time now I could say no these are required and I can actually say required the problem is is that when I create this instance of this class I won't know the first and last name I'll be asking for it from the form so I'm going to become nullable and we've got here the first and last name really simple customer information you know just what's the customer's name that's pretty much it the ID will be in a database which we're not going to use in this lesson but in a future lesson we're going to create a SQL table that captures this information and that will be the identifier for that record so it'll be zero or you know not set for this model and then we'll have last of all the file name and again we're going to be uploading this file and associating it with a SQL record which we'll do in a future video but we're not going to put the actual file in the database and we'll talk more about that in that video but I think it's important to note that we'll just be storing the file path so that file name will include the path the relative path we'll talk more about that to the file where it's located okay so that gives us our our customer model now let's go over to our index page and let's make some modifications here because um we we need to capture more information so let's say private customer model which we don't have the using for so control dot here to add the using statement and that adds that right up here add or at using upload files app.data sort of say customer model we'll call it a new customer equals new we are going to instantiate this because we're going to start using this for our form so our form let's come up here to um let's go up here we're going to put an edit form right after upload demo but we're going to move this into it in a minute but let's start with just an edit form I'm going to immediately close this out and the reason why is because it just works better the editor than trying to create it and then start putting things in it just gives weird errors so if I do this first and then I can say model equals new customer which that refers to this right down here it used to be we have to put the at symbol in front of this to indicate kind of like this that it was a C sharp code but we don't have to anymore it's better just to leave it off so that's kind of an upgrade we have now all right so let's create simple forms we're going to create a div inside here we'll create a label 4 equals first name and we'll say first name and then we'll create the input text the ID equals first name that's what associates the label of the input and the class equals form control that makes the text box a little nicer and we're going to say bind value equals new customer DOT first name so as it binds it to the first name property of our model so say hey I want you to bind this field first name to the first name field of the model so when we get done and submit the form then we'll have the new customer object filled with all the information needs or almost all the information let's copy this this is a dangerous action copy copying pasting is a way to introduce bugs into your application so be very careful because if you don't change everything so I'm going to change every reference if you don't change every reference in here then and you miss one it may look right but it won't work right you'll have weird errors so just be very careful okay that's the um word of advice here so I'm gonna paste it one more time and this time it's going to be for let's call this profile picture and we're gonna call this profile picture and let's get rid of this entry right here so you have our label but we need an input file so let's grab our input file from here we're going to cut it out from there and paste it in there so it's now inside the form but we're not done yet first of all I don't want multiple you don't want to have multiple profile pictures just one so take multiple off that will change our code as well so we have to modify this load files we'll get there in just a minute and we need to have a button at the end this is BTN Dash primary and we'll make the margin top and this is three I don't need some spaces spacing between the div and the button and the type equals submit and if you're not familiar with these classes I'm adding these are bootstrap classes bootstrap 5 um it's built into Blazer unless you use the blank template um but it's it's what I'd encourage you to use because bootstraps are really really powerful um CSS system that makes life a lot easier and it makes it so you don't have to write a lot of CSS code it does it a lot for you I actually create a course right now on bootstrap 5 because it is that important I think that it's really valuable to know bootstrap and know how to use it okay great customer that's the the button name um that's all for edit form I think that we've got the error stuff down below that's good so I think we'll leave it there and we're gonna make some changes now down here so first of all let's um let's add one more private member I browser file let me get nullable and call it file so it's going to be a null file um and we're going to let's start with the um I'm going to change this load files so let's let's do this let's um let's cut all this stuff out because we're not going to do that we're just going to say file equals e dot file so when you load files by the way this can be just now a void when you say load files we're just going to take the file not files the file that you passed me and put it into this this private variable that's all we're going to do now we're not quite done yet because all that did is at a reference didn't actually put the entire file there it's just a reference to or a pointer to that file we have to stream the file which we're going to do in a another method let's call this private async task of um I think type string capture file okay and we're going to put our code that that we did before so let's paste it in here but we have some some things to address here so let's go through address this first of all we're not going to clear the errors because we'll do that in another spot and we are going to say if file is null then return an empty string so if there is no file so if if this was never run then return empty string and why an empty string because we're going to put this return value into the new customer model so if we put an empty string this means there's no there's no file okay and so we're acknowledging there's no file there um we're gonna leave we could put null um which we could make this a nullable string but I think empty string will work um so with that we um we don't have to do the the max allowed count because we don't have more than one file which also means we don't have this for each so let's get rid of this for each which means that this currently raise the N goes away two and we can shift tab to bring those back if you don't know when you highlight multiple lines and you say shift tab it moves the indent to the left one indent so tab will move it to the right one indent uh shift tab will move it back so a little Pro tip there okay so now let's check our code to make sure that our code still holds up um I think it does we're we're doing all the same thing we call it file which was strategic because that was the name of what we used in our Loop so it still says file.name and all the rest so now we are we are good for the most part but we do want to um add one more uh capture value I'm going to put it right here string relative path equals path dot combine T query and new file name now why we creating this because it's going to be the relative path to wherever we had it in storage so this needs the um the full path so the the actual path that's the combination of where where we're going to store in storage plus T query plus the new file name so in our example it's story in D Temp Storage is this first value here and then T query and then the file name well we want to have the relative path though because at the end notice where we have a string our task type string we want to return relative path that's the relative path of where that file was stored all right so we're storing that and then in the catch here we should just throw an exception as well so if you have an error with the file meaning it's not the file is blank is that there's a problem with the file itself well then we shouldn't just continue on it as business as usual we should throw an exception not just allow it to occur so that's we're going to do here but now we have this capture file method and that will allow us to capture the relative path of that file and not just toss and disk and forget about it but now we need to create a submit form method let's put this up at the top doesn't really matter where we put it but private async task submit form and we're going to put a try catch here and yes exception ex because we might throw an exception here and we're going to say errors dot add and let's do our string interpolation say error and then ex Dot message so if you know the eagle item on you will notice that if we're going to call that capture file which we are that capture file is going to write to the error list if there's an exception and it's going to throw and continue to throw the exception which means it's going to come up here and right to the error list again so in theory we might have a same error written twice to our log that's okay not the end of the world I wanted to have it in both places so we'll leave it alone but just know that's what might happen Okay string relative path equals await capture file so capture file again is going to the actual work of caption a file this doesn't happen until you submit the form so even though we put it in this I browser file file when we load the file that just held the reference it wasn't until we ran this capture file method that we actually streamed the file and put it on disk and got the path for it and all the rest so now we can say new customer dot file name equals relative path and what this does is it updates our model with that new file name and that's all we're going to do today because we've captured everything we need but let's test it to make sure it works so let's put our our break point here and let's run this hopefully we didn't forget anything or cause any other bugs but let's run this application and now you'll see that our form is a little different we have two Fields plus our form and if we bring over our storage here the one thing I want to point out is if I select Noah's headshot notice it it chose Noah's headshot but nothing happened over here on the right but if I put uh Noah Macy and say create customer then in theory we should have something happen but so far nothing happened and why is that well that's because I forgot to do one thing and that is I forgot to say that there's a submit form here and that I need to actually enable this so on valid submit equals submit form so we'll save that that just updated um let's choose a final game because that's the one thing it kind of lost was the form or the file let's hit create customer and now go our breakpoint so the breakpoint's been hit if we inspect the new customer and look um we will see that there's a file name in the file name that looks good there's first name and last name my username is there and you know ID of zero which is fine so you can continue to run that and that looks good now let's go over to our file and notice we have a folder now called T Corey inside there we have Noah's headshot and it has that same name as we have associated with a model so we've now said hey you can upload you know you can click this whenever you want but it's not until you create the customer click that button there where you actually submit the form that we're going to do the upload and notice I said on valid submit that's something else that's important let's close this out we can get rid of the T query folder here notice that um it's on valid Summit uh right here because you can put validation around your first name your last name or even uh the the file make sure you have a file but it can check to make sure that you have a valid uh valid model set up before you allow it to go through so if you said hey first thing and last name are both required and they have to have a minimum length of one character or ten characters whatever you want to say for a name don't say minimum characters of 10 characters for a name my name is Tim my last name is Corey neither of those is 10 characters now you can say well Timothy is longer that's my given name but um you know Corey's only five characters you know there are names they're even shorter so something to think through but you could validate that you know a name was actually entered um a value was actually there so that would be an invalid submission if they didn't do it they violated that validation in which case you would not upload the file so it only uploads the file if you have properly validated the information now we don't have validation in this edit form we don't have validation on our model we could do that but that's a totally different topic I have covered it before on YouTube um so you can check that out also just so you know all this stuff is covered in the Blazer server course I actually updated it for net six and net seven to include file upload and validation all the rest so this stuff's all covered in that course on I am Tim corey.com but I want to do this mini course here to kind of cover um how to do it in context of other things as well so that's we're going to stop for today but we're not done yet because we've got the model we've got the model fully populated but now we should probably put this in a database so we're going to talk through how to put in a database how to do it safely and securely how to manage the idea that your data is going to move around your web application might move around and what does that mean for your files because your files are in a fixed place right well no we're actually going to show how to move those around as well without having to re-update every single record in your database so we'll see how to do that we'll see how bring those files back out and display them on a form and so on so we're not done yet but we're done for this video thanks for watching and again the source code link is down below the link to the playlist for this entire series down below and as always I am Tim Corey [Music] foreign [Applause] [Music]

Channel: IAmTimCorey

Views: 12,690

Keywords: .net, C#, Visual Studio, code, programming, tutorial, training, how to, tim corey, C# course, C# training, C# tutorial, .net core, vs2022, .net 6

Id: fW-rx2ONPGM

Length: 23min 32sec (1412 seconds)

Published: Fri Jan 20 2023