PrimeNG Fileupload in Angular using the Firebase Storage

hi all in this video I'm going to implement angular Prime file upload component using the Firebase so for that I already created this project using the command NG new Prime NG angular file upload then we will implement the prime NG and also we will install the prime icons so for that you have to open the terminal using the control backtick and add the command npm install Prime NG Prime icons then save that is done go to angular Json file and under the style section you have to import this uh Prime NG CSS and the prime icon CSS needs to be imported in the style. CSS file then next step is we are going to use a Firebase for that we have to install the package at angular fire so for that npm install at angular slf fire save so the fire installation is done in order to connect our application to the Firebase we have to add some config in our project for that I'm going to create some en environment variables so if your project doesn't have an environment variables you can create using NG G for Generate and type environments then under SRC it will create a folder environments and in angular.js it is getting updated okay and in the development. TS file you can add a variable Firebase and in order to get the configuration you can go to the Firebase go to the console section I have already created a project there and under under the project you can add this web app okay I have added a web app under the config section you will get the Firebase config so you can copy that and add it in the uh development environment okay so I'm adding Firebase config then pasting that object so after adding that go to app module. TS file and you have to uh add two modules so one is angular fire module and one is angular fire storage module because when we upload a file that will go to the fire storage module okay so I'm going to import angular fire module angular fire storage module after that is done you have to initialize the app using the Firebase configuration which we have added in the environment. development. TS file okay so under the import section I'm adding the angular fire module. initialize app with the environment configuration you can add the environment from the development okay that is done so our Firebase connection is done the next thing is we have to use the priming file upload component so in order to use that you can copy this one and again in the app. module. TS file you have to import file upload module and also you have to import the browser animation module so that needs to be added in the import array after that you can go to the tutorial and we will first going to implement the basic option you can copy this one so first we are going to implement the basic mode so I'm removing all the content from app. component. HTML now and added this and the max F says uh it should be in the square bracket and also I'm saying and you can also change it uh whenever based on your you know project requirement and here I'm going to uh create a function in the component.ts file which is on upload go to component.ts file and there you can write a function on upload and you can add a event so I'm going to add the file upload event interface okay in order to use the Firebase um events what we have to inject is angular file storage needs to be injected in the Constructor here okay so for that I'm adding a Constructor here with the angular fire storage needs to be imported so adding the import from the fire storage then you will be able to use this fire storage inside the upload component and we can upload any file to the Firebase okay so we'll see so before that if you want to see when a file is getting uploaded in the upload section what we are getting okay so I'm adding console. log and dollar event I'm running the application using the command NG Ser the application is running on Local Host 2 4,200 so go to the browser and open the open 4,200 then the button is there clicking on the inspect element console section I'm going to choose an image so you can see I have choose the image youtube. PNG and once I click on this upload button it is getting uploaded now we didn't write any code for uploading but the upload function is calling only when we upload the file once after the choose we have to click the button again to upload so then here you can see the files which is an array so we have a we didn't choose a multi select now we are proceeding with the single select so there is only one file right so first we will go ahead with the single select upload in so for that I'm just adding const file equal to Dollar event dot files of zero because there will be only one file and if file exist the file object is there then you have to add a path first so my path I'm going to create a folder okay so I'm telling files so if this folder doesn't exist it will create automatically and we will give a file name so file dotame so this file object have a name so if you see here it has a name of the object and it also have the last modified so if you want to you know give a unique name you can add some time stamp there okay now I'm giving the same name which we are uploading then const upload path equal to so uploaded file sorry I'm going to change it to uploaded file equal to and this is a async operation because I'm going to call an API here the Firebase API so you have to change this function to async then I'm going to wait this file to be uploaded so this dot fire storage dot app plot then you can pass the path and also you can pass the file and from that after uh after the file has been uploaded I'm just going to console the uploaded file we'll see whether there is any information useful for us I'm removing the other console here so I'm clicking and the same file is getting selected and once I click the upload again see it is returning something and it has a ref and also it has some you know the name of the files which we have uploaded the full path okay under the file section and also you know some functions the Prototype you can see if you want to get the download URL you will be able to get it so all the information will be available in that uploaded if you want to see any information you can take it from the uploaded file itself in order to see the uploaded file you can go to the project and under the bill section there is a storage you can see the files folder is created and you can see youtube.png that file is getting uploaded if you if we change uh something like Auto equal to true it whenever the file chooses it is getting uploaded so if you want to make that go to the app. component. HTML and just make Auto as true and on choose you can see I'm adding open see once I choose choose this one it is getting automatically uploaded so here when you refresh the screen that file is also got uploaded so next moving to the template section so if you want to see for example if you are uploading multiple files and whatever the file we choose we have to show some information here so in that case we can create some NG template so this NG template you can see uh for showing this upload threee file section and this template is for for showing some know how many files we have uploaded or which are the files we have uploaded and also we can show some additional content if you required okay so what I'm going to do is I'm going to add some section under that one so for that I'm removing the mode basic and also I'm not making it as an auto true for now under the P upload file section you can add the NG template okay so adding NG template and and you will be able to access all file using a let file and the P template I am giving as file I'm only using the middle section the templates if you want you can change it okay and also I'm telling the dev adding file dotame whichever I'm uploading file do name and file do size so if it is a multiple file I have to mention multiple equal to true so go to the app. component.ts file and you can see I'm only uploading one file in order to use multiple file upload you have to use you know you have to use you have to uh call uh three apis uh for each file upload right so I what I'm going to do right now is I am I creating a promises for that so const promises I'm adding it as an any and initializing it was an array then I'm just moving this one and dollar event do files dot for each file then to the promises I'm going to push the fire storage this dot fire storage dot upload I'm just changing the path to multiple slash then file dot name then comma you can pass a file okay then I'm going to use the fourth join from the rxjs so const observable observable equal to the for join then you have to add an array then you have to pass the promises then observable do subscribe in the next you will get a value and we can console the value it is returning console. log of value and also once it is complete all the section is complete you can console do log of all done so go to the application so I'm going to upload three files then I'm uploading so it is saying all done go to the file upload and the multiple folder is created and in a single short all the file is getting uploaded so that is done

Channel: Learn from Scratch

Views: 1,342

Keywords: angular, primeng, file upload primeng, primeng component fileupload, firebase file upload angular, angular primeng fileupload example, angular primeng multiple fileupload using firebase storage, learn from scratch, @haseena.khader, primeng tutorial, angular primeng tutorial, angular primeng components advanced

Id: SWI85FEt9aA

Length: 12min 52sec (772 seconds)

Published: Sun Oct 08 2023