How to Upload File with new Blazor SSR in .Net 8 with Enhanced Form | Abhay Prince

hey guys I back with another video and in this video I am going to show you how can we Implement file upload functionality with the new blazer SSR in net 8 with enhanced forms so in earlier versions of Blazer the Blazer server and Blazer web assembly those were interactive so we had Direct access to the browser's file using ibrowser file so we could simply upload that using the file upload or file input uh components we can directly choose a file and then we had access to the code using web assembly or Blazer server we could directly interact with that file using I browser file we could access that save that and we could do all kind of stuff with that but with this new blazer SSR it is statically server side rendered right so it does not have interactivity that means how this works we simply uh this component gets executed on the server it generates the HTML output and it sends that HTML output to the client to the browser now there is no interactivity so if we choose file we uh we select a file to upload there is no interactivity nothing can be done on the client so the only way we could pass that is to submit a form and in blazer with neted we have that enhanced forms which actually makes uh fatch request it does not completely post the page it simply uses a fatch request JavaScript fatch request internally so using that we could simply post that file to the server and on the server also the same component gets executed and then we had we have access to that file and we can simply save that file on the server okay so this is not this straight forward the way I told you so there is one catch so I'm going to show you how to implement this functionality so I'm going to create this new blazer web app okay let's say file upload Blazer SSR all right so I'm creating this and interactive render mode none because we are using just uh SSR no interactivity at all okay neted authentication type none we are not implementing any authentication in this all right let's create it so it's here all right in components we have Pages we have error home weather so in home page page only we will uh let's say implement this functionality okay all right so let's first add a code block here all right and now I'm going to create a model here ideally it should be in a separate file separate uh yeah separate file for model but for me because I'm going to use it just for the demo on this page with simple model so I'm going to have it here only so what I'm going to do I'm going to say private uh class let's say file upload model or let's call just file model okay and here I'm going to have three properties uh not three so let's have some name and then for file using this Blazer SSR we don't need I browser file we need to use I home file which we have been using with MVC so I form file and we could name it whatever we want let's call it file only all right so this is our file model which we are going to use now in here what I'm going to do do I say Dave plus let's say container inside this I'll say da class call SM for and I will move it to the center of the screen so on this container I can try display flex and on this SM I can use MX all right so it will be horizontally centered okay in here I am going to use edit form right because we want to use file upload for that we need form so I use edit form now for edit form we need one model so let's have that model here so here I'll say public file model and let's call it model only get and set all right with the default value of this new of course what it is saying let's make it also private all right now for this edit form we can Define this model with this model which we have here like this all right now we want to use enhance form so I'll add it enhance then it's always a good practice is to use form name so with form name let's say file form it could be anything all right now on this model because we this code this is going to be execute this component is going to be executed for both for get and post that means when we first open this page with the get request then it will be and when we be submitting the form then also the same thing is going to be executed for that we need to tell it that by default you should use this new but when we are posting it we will say Supply parameter from form and which form this form name file form so whenever there is a post request try not to set this using this but try getting the value from this form which is this form all right and then I'm going to have one method here private async task let's say save file model async something like this all right and now here we can access this model models file and we can upload that so here I say Word file equals to model. 5 let's do this right now okay and inside this model I'll say da class mb3 then I'm going to say label class form label with let's say name and then I'm going to use input text with bind value model. name and class form control then I'm going to have one more for file okay so here I'll say model. file and this should be input file all right everything looks fine now on this edit form I'm going to say on submit and let's call this all right everything looks fine now let's try to run it and we'll see it so here instead of hello world let's say file upload with BL SSR and let's try to run it we'll see if this works out of the box or we need to implement something all right so it's coming it came oh I didn't add button right so let's add Dave Class B three and inside this I'm going to have input type submit plus let's say BTN and BN same BN success and here I'll say value let's just submit let's run it all right so it is here now if I add something here that's my name and I choose a file let's use this file only and if I submit breakpoint got hit that means it came here now if we check our model in our model we have name up but file is null why so we have input file we have bind value but this file is null right so this does not work out of the box we need to implement something additional right so for this first thing if you have ever worked with file upload within a form we need to add en NC type to the form right which is multiart SL form data this is required this is a pure HTML it has nothing to do with blazer okay for file uploads from a form we need ENC type multiart form data okay let's see if it works now it says submit now we check we have name but file is still null that means just adding ASD type it is not going to work okay now if for the forms to work forms work with the name attribute so if we check for this file input type file we need explicit name attribute if you check for the this first name text box input text we have input Blazer generated this one for us name equals model. name class this nothing else and if we check for file we have input class and input type file there is no name but the HTML forms work with name attributes if any element any input control uh when we say input so these are input type text file uh input type number all the input Fields checkbox radio buttons select drop-down and text area all these are input Fields so for all these to submit data to the form to the server we need name attribute so for input text it generated automatically but for input file it did not generate so that means this thing does not have to do anything with this input file so this bind value with this model do file this does not work with input file right so for this we need explicit name we can change this bind value to name attribute okay and this should be direct string this is one case and this model do file this should be same as this so this is basically name of our model which is this if I could have changed it something U I don't know maybe test file model if this name was like this then it should have be automatically with this underscore test oh my God you might not be seeing this right can see it now I hope you can see it now and for this uh this Source this source code I'm going to You Can Get It Free from the description I'm going to add a link to this all right so this should have been like this so this name it should be the name of the model which we are using right I showed you so in our case I'm using this model to just model now if I save it let's try to run it again now let's see if it works this time we have this first thing let's see what HTML it has generated now if we see input name model. file this is similar to the this text box has right name model do name so these two are kind of similar now let's add something so and then choose file I'm choosing this file then submit now we came here now we check our model and boom we have name and we have file okay and from this file we can access everything we have headers we have name type file name everything and now we have access to this file we can save it the way we could have saved it right so you want to do something like this we can if you want to save it let's say in triple W root so we can simply PJ I web host environment web host EnV let's call it this and then here we could say simply file path equals path. combine we have web host EnV from this we can access web root path which is this www root and from there we could add anything so let's say inside this it is going to create uploads folder and then file. file name now this file name we should not trust this file name we should always generate our our name we should always clean up this file name right this is not safe but for this demo purpose I'm just showing you this all right so first we should verify that this uploads folder exist so for that we could say folder path equals we'll do this path. combine web host web root path and then uploads after that we can simply say directory dot create directory this folder path so it is going to create this directory if it does not exist if it exist then it is not going to do anything right then we'll have file path then this folder path is already already there so in this path. combine we can simply remove these two things and we can have this folder path then file do file name now we have this file now we can simply say track C and then we could say file stream equals new file stream and like this this this now this file if you check this is direct Ione file so we cannot direct copy this directly so we need to get the stream from this right for this what we could do we could we'll say using word let's say file stream or we could say uploaded file stream and here we have this file do open read stream this method which is going to give us a stream which we can save so this upload file stream is the stream we can copy to this file stream now we are copying this to file stream now this file stream has the actual file with this name let's verify it so for this what we can do we can have a private string right now I'm using image you you could do this with any file the only will thing will be you will not be able to display that file because we have image display functionality using that IMG tag so here I'll say uh uploaded image URL all right now we can use this so here after this we can simply say uploaded image URL equals SL upload SL file. file name which we are using here all right then on this upload loed image URL we can have this somewhere maybe I don't know maybe here I'll say if not string do is n or whitespace this uploaded image URL then here we could say IMG SRC equals this upload image URL and here I'm going to do IMG flu which is a bootst step class to make it uh compatible or maybe sized with the screen all right now if we add a break point here and if we run this now it should work as we are expecting it to work okay it came let's choose a file submit it came here we have file we have folder path we have file path then we have stream read stream this is uploaded image URL is this one and let's continue and now we see we just uploaded this image and we can see this here all right so this is how we can Implement file upload functionality with this new blazer SSR all right so I'll summarize it for you because this is statically server s side render there is no interactivity so we cannot have input file uh that on on change which we can have with interactive versions of Blazer so Blazer web assembly Blazer server we can use this on change and we can access this file directly here but with this Blazer SSR this is tactically server side Ender there is no interactivity so this is not going to work so first thing we need to have this form and on this form we are using this enhanced form so first thing we need to add this ENC type multiart form data after that for this input file for all other controls this bind value works but for input file this bind value does not work so what we need to do instead of bind value we need to use name which is a HTML attribute okay in order to work with forms we need this name attribute so for our other input text input checkbox input radio input text area all the input select all those Blazer automatically generates this name attribute on the basis of this bind value but for input file Blazer does not generate this name attribute so for this we need to explicitly generate this so this is going to be name and then this model do file and this model is actually a model name we are using and then file this is actually a property which we are using right so if we have instead of this model let's say if it was something like upload model so it should have been instead of model do file it should have been upload model. file and then this model should have been upload model and this model right and if the let's say this its name was not file in file model let's say I form file uh anything maybe custom image file anything it could be anything so for this we needed to you change this so This input file name upload model. custom image file all right so these are not hardcoded values these are the the this is the model name this is the actual file property which we need and then type of this should be iform file in this case for Blazer SSR all right and then when we sub submitting it we can directly access that upload model do whatever file it is and from that file we can simply upload it to the server all right let me move back to this model. file all right all right so do let me know the comment if you have already worked with file upload with this enhanced forms with blazer SSR and you knew how this is going to to work all right so please like this video share this video subscribe my channel if you learn something new [Music] and I will be back soon with some other video till then bye-bye happy coding

Channel: Abhay Prince

Views: 948

Keywords:

Id: GhcIdKAC72U

Length: 23min 18sec (1398 seconds)

Published: Sat Mar 16 2024