Download Text and PDF Files in Your .NET 8 Blazor Web App to your computer easily using package.

hey everyone welcome back to net code help  Channel I am Frederick as you know and I'm   happy to have you here today in this video we  are going to look at how to use package created   by net code Hub to download file or custom test  and net web application this package you can use   it in all the random modes talking about the  auto the interactive server interactive web   assembly you can use this packaging here now  let's say when you have a file that you want   to download from your web app onto your computer  at first uh actually need to just have some write   some code in order to perform that task but  as I speak I have made that simple for you I   have this package installed or this package  um uploaded to net.org now this package what   you do here is install this package and you try  to configure it in a simple way just two lines   and you can download file or you can download  custom test onto your computer from your web   application let's jump right to visual studio  and I'll show you the trick so can see I have   visual stud 20122 open I'm going to create a new  project as I earlier on now this package you can   use it in all the rendom mode except the static  because that if we use that mode the page becomes   not interactive so you can even not even have  a button to click isn't it yeah but make sure   you have the other mode as well okay so I'm going  to name this project as so this is demo download   so demo Blazer web app file download that is a  file what that's the name of the project maybe   you have push the GitHub check the video playlist  the playlist the description and you're going to   find the link in there you can also get the  source code of this okay so you can see from   the interactive ROM mode server is okay we  can also use a um what we are done we also   go in with the the auto not the auto auto is  very simple we go in the web assembly then you   know how to also work with the web assembly then  the auto you try your hands on it and I believe   you're going to do it trust you yeah so let's  have this created and here I have it to get it created so the project is now created now what do  what do we need to do next when you go to n.org   now that is a packet that I just published  Rec just now 3 this minutes ago you see so   maybe you'll be the first person to download  or what do you think download everything yeah   yeah z z because I just did it now and you  can now try your hand on it so this is the   package let C up. packages. extensions and  that's the C version 1.0 that's the first   upload and you know what you need to do here  is we after installing this package this is   the package name after installing this as you  can see from here you have to add this script   reference to your app. razer then that is it  start using the component you see the package   is very simple just one line two lines and you  done now here you are providing values for this   so you provide the value in here the value and  the value that is all that you need to do and   your download button will be ready H fantastic  let's have a look so I'm going to copy this one then let's go to our projects  we going to install this so go   to solution Explorer right click on  dependencies let's go to man new get packages so in here click on the browse tab  since you're going to search for a new package   so click on type in net code hub. packages.  extensions and that is it one so you can see   the extension um just click on it to download  and install this to your project so like this   as you can see accept it and that is all you're  good to go so now that is done what is the next   thing to do you can close this so this is the  first step we are going for at least three   steps then we are done with our download we go  to our component go to our app. raer and now   in here we're going to add the reference here so  let's make a copy here and I this we going to say   that underscore content because you referring in  Razer class so underscore oh it's not working what   you think you see okay so content SL net code  Hub dot oh H must come first dot packages dot extensions slash download. JS so this is a JS file  that you need to actually add the the application   here okay that's what we should do so once you  done adding this you just go back to solution   you go back to your components pages and now  your homepage so in your homepage what can you   do to use this it's quite simple let's move  this one and we going to add you first need   to include the name space so at using and that  is a net code Hub do packages so do packages   do extensions and aside from that you canot  have access to this download component you   see that's all I need to do now watch here  in here there are some parameter that need   to provide file name now aside from that you  need to provide file URL and three properties   so three parameters now you need not to provide  file URL and our test you must provide one why   am I saying that now test here it is if you want  to write a custom test and now create it into a   file or convert into a file and now download  you pass in your test here now when you have   an actual file and maybe your for that want to  download it you pass in the file name here and   that is all I think easy isn't it ah let's  see so we're going to provide this now let's   say this is code and here let's have string we  said this is file name and now with this file name maybe let's have like  this we have string file URL we have string test okay so this that  we have maybe let's make this as nullable okay so now we have this right so it  tell you that we are going to bind it so we copy   this file name we're going to bind it here now  I'm going to copy the file URL you're going to   also bind it here let's see bind it here you're  going to also copy the test and I'll do same to   the test very simple one now once you have this  let's run this application and see what we have now oh that's right so you can see we have our  download button here have you seen it good so if   I click on this let's see what happen if I click  on this let's see nothing is happening do you   know the reason why can you tell me the reason why  that's is happening see yes I know and I believe   you know because this a static mode and it is not  interactive this works as a button at the same   time component with parameters so before this  button could work we need to make make it what   interactive so since the interface not interface  since it is interactive um server we're going to   make it as render mode then we say interactive  what yeah choose a server now let's do it again oh that's right so it is live now now if  I click on this let's it tells you please Supply   value to the download parameters yes you can see  that that when we check this we have declared   variables but there are no values assigned to  and this component must check if they are null   then it should tell you that maybe the next  update I'm going to use something like a nice   model to display the response to you instead of  using the JS alert okay that could be an update   one don't worry but for now that is working okay  so we are going to supply values to this all right   now let's create a test here let's apply values  to both of these so let's say the default value   for this we are saying here the file name is  file name that is the name that g to this file   the URL you're given to file URL want I want to  show you something okay now the test here it is   new test and maybe in here I want us to put this  in the next line so you can use string Builder to   build to build your string or you can use this  and we can use environment environment do new   line then we can say we are testing yes and sure  we are testing the package okay so we're going to   have a new line so new Test new line the next line  going to have this all right so now we have this   take note that all these parameters here should  not have values example you should Tagle between   file URL and I'm test because test here is going  to take the test that you're going to create and   I convert it into an a test document this file  you are also going to take it go to to your file   directory and I'll grab the file into PDF and  I'll say return so you cannot provide too F at   the same time so it must be one now if you forget  and undo this let's see the respond that you're   going to have I'm going to run this again and  now let's wait a while and I'll see the output of this I'm going to click on it are you ready  click and let's see so I click on this and it   tells you that test or far Ur cannot be used at  the same time please apply value to only one yes   I think it makes sense isn't it so you can never  download it although you have supplied values to   these parameters but you can never download to  theom cam cannot do that you see so let's apply   value to this we go back again and we don't we  can just remove this because you're not having   any file here known as this so let's remove  this maintain all this test now you have file   name and the test the name that we are going  to give here it is custom file name or let's   say this is net code custom file name okay  so we have this now let's rerun it again and see so it is ready now now let's click on it and  see so I click here and now let's see wow we have   the file now have you seen we have the file name  now if I quickly run it through my folder you   can see that there is a file right maybe you're  asking yourself let's open it and see whether you   have what we type in yes you're going to do that  don't worry I'm going to open it and now check   it out do you see oh now that is it new line so  see have in a new line have you seen so it took   the test that we created and I converted this  into a test document and downloaded this okay   that's fine now the next thing I'm going to do  here is I'm going to grab a file so I'm going to   grab maybe this file course outline grab this  file and let's go to the code inside there ww   folder let's assume you have uploaded some file  in here client file etc etc right so I'll paste   this here that's fine now this I want you download  take is a PDF so I want to download this so what   I need to do here is to provide the URL of this  file since you're working in the blizzard server   you can just grab something like this we go  to the home and in here see what you're doing   we going to just paste this to the file name URL  past it here okay that's the file URL and now it ispdf so the name of this we're going to  copy this because that's the name of the   file so we going to replace it to the  file name like this and that is all so   with this test we don't even need it now  let's see if this going to work for us so   we going to provide file URL and I will  say this is file URL let's remove this one okay so now we have this let's go all right so the app is loaded now let's click  on download and check it out before that let me   make sure I have the folder opening okay so that  is the folder that you can see from here it is   from the download and our document because that is  all PDF files are going to sit and wait for you so   I'm going to click on this download and as you can  see download blocked and blocked by Okay so Contin   since it is coming from the local that's why it  has blocked it you know this is from The Local   Host HTTP so it is not secured so always allow  click on done and now from here let's check it   out so you can see we have the popup there's  a popup from here and if I click on you can   see the size of the file 564 546 click on start  downloading and you you see the file has completed   the loading and now check it out you can see we  have the file in here isn't it now it is the same   file so 547 kilobyte so the file this is working  it supports text custom St upload you no download   and also PDF download as well okay quickly let's  go through the web assembly and let let's also see   how to work with that all right so fast forward I  have created created the same web app. net8 pret   and I chose interactive web assembly I install  the package as we've done already now when you   create the package when you create the pro you're  going to have two there is the client and that is   a server in here okay so what you have there a  client the file supposed to be on the server so   this side you see we have this course outline.pdf  and we have the home so I just move the component   from this component folder to the client and  that is what you can see from here so I insert a   package and we have the same package in here from  packages next code have package. extension I hope   you can see that good now when you go to the app.  Razer I just copied and pasted this net code app.   packages extension. JS and that's the father you  and I we know when you come to the homepage you   using the component so file name file name file  URL file URL so we have it in here and that's what   we have specify so there is a course outline that  is a file name and we have it set right let's save   this and let's run this and check it out so let's  click on it and check it out so this two you can   see now it has been downloaded and that is a file  name. PDF so if I open the folder it is the same   so you can see that we have the file name here  right and that is a file that we downloaded now   from the client or the interactive web assembly  yeah so this package is working both in the server   session and also for the interactive we assembly  to it does work I believe you love it yes so go   ahead and now um use this package thank you so  much for watching this video I'm going to end here   maybe the next time is going to be fire as well  so till then take care and I'll catch you later

Channel: Netcode-Hub

Views: 728

Keywords: employee, management, system, building, database, models, web assembly, .net 8, blazor, web, api, .NET 8, Blazor WebAssembly, API, Database Models, Develop, Design, jwt, authentication, role-base, custom auth, Blazor, WebAssembly, user, login, logout, relationships, implementation, controller, complete, combine, roles, cookie, .net blazor, lazy loading, CSS isolation, css, isolation, lazy, loading, optimize, eazor class library, rcl, nugget package, create package, install package, download, nuggert package

Id: 0VgMazGGG6Y

Length: 17min 59sec (1079 seconds)

Published: Thu Feb 01 2024