How to Upload Files in Angular | Angular File Uploader

hello everyone in this video i'm gonna tell you how you can implement a file upload functionality in your angular app for this purpose i'll be using a library an npm package actually called angular file uploader this package is going to do all the heavy lifting for us so to get started you need to create a new angular app or if you are already having one in which you want to implement the feature you can go ahead with that as well so without wasting any more time let's get started [Music] so i have already created my new angular app you can do it too by using the command ng new and name of your app in my case it's my app this will give you all the files that you are seeing here on the right side this will be your angular app i have cleaned up some of the default code that you get with the new angular app so as you can see in my app.html i have cleaned up that as well and here so to get the angular file uploader package i'll be going to my browser and searching for angular file uploader here's the package make sure you get the spelling right it's uploader to install it you need to run this command in your terminal i'll just copy it from here and go to my app and i'll paste it here enter this will install the package for you it will take some time now my package has been installed you can verify it by going to your package.json here it is i'm using the latest 7.0.1 version it's the latest version available at the time of recording of this video and i'm using angular version 10 although it works with all the angular versions from 2 till 10 now let's see what are the other things i have to do to get ahead with this i'll go to my browser on angular file uploader page it is having one dependency there's bootstrap dependency you just copy it from here and you have to paste it in src index.html here i'm pasting it save after this let's see what else we have to do to go ahead so now we have to import this module in our app.module.ts or whichever module where you want to use the package so let me just quickly copy it and paste it in my app.module.ts here and we have to also include it in our imports so here i'm importing it it's done save the file now to get started with the minimal configuration i need to copy and paste this in my app.component.html done that you are seeing that there's an error here that's because we haven't created this variable yet and here's the configuration afu configuration that's angular file uploader configuration this we have to paste it in our app.component.ts done that save it now you can see the error is also gone so the things needed for the minimal configuration is done so now i'll be starting the app npm start this will take quite some time so now it's compiled and i need to add a valid url where my files will get uploaded i'll just choose this sample url this is the url i'm gonna be using save it it's recompiled now i'll be opening it where it is hosted that's localhost 4200 we can see our app is running i'll be selecting a file let's say this one this is the file name this is the size of the file these are some constrained which is given by you by default and this is the site size limit which is also default you can customize it later so now our file is selected just click on upload button you can see a progress bar appeared here it was quick because the file is very small and it is successfully uploaded you can reset it select another file and upload yeah it's working till now whatever we have used from this library we have just seen tip of the iceberg there are many more things that we can do with it for example here this is the example with all the available configurations in the afuconfig object these many things you can configure yourself you can customize the way you want it for example here multiple you can control like how many files you want to upload whether you want to upload a single file or you want to upload multiple files in formats allowed you can specify the formats that you want to be uploaded in maxsize you can also limit the size of the file that you want to upload here it is given one and the size is in mb so if it's one that's 1 mb you can also modify the apis that you want to use the method that you want to use in the api headers params and response type there are right now three available themes that you can use here you can configure the themes to see the themes you can go in the demo section here you can see all the three themes this is the default theme which you have already seen here's one more theme that's drag and drop you can directly drag the file here and upload and then attach pin theme in this one you can just click on this select the file and it is uploaded let's see what else you can do with it you can hide the progress bar you can hide the reset button select button file name index now what's that your files are uploaded in form data format and they have a default name as the word file if you want to add indexing in them like file 0 file 1 file 2 if you are uploading multiple files then you can do that here and if you don't want it you want the name of the file as file itself then you can make it as false in replace text you can replace certain number of text like select file button it is this thing you can replace this text you can replace this text reset button text upload button text as you can see reset button upload button drag and drop box it is a text that is appearing here attach pen it is this text attached supporting document after upload message success that is the upload message that appears when your file is successfully uploaded it is this thing you have uploaded your file upload it this text you can replace it as well and also you can modify the error text suppose if there is an error your file does not upload then what message you want to print you can edit that as well size limit it is this thing you can replace that as well whatever i have explained all the details are available here as well with the description and their default values you can reset the module programmatically as well you have to use this property and also you can get the response which you are getting from the api you can get it from here in this output function and there there's an easy way to reset the module if you are resetting the module multiple times you can follow this documentation also in the styling section if you don't like the default style and if you want your own style to be there then you can use these classes and you can give all the css properties that you want to give and you can change the style as well

Channel: Initials Tech

Views: 27,178

Keywords: angular-file-upload, angular, file upload, image upload, file, npm, npm package, drag and drop, angular 10, angular 2, module, angular 6, angular 8, angular 9, upload, uploader, image, progress bar, localization

Id: EpJRGmEDOJ0

Length: 9min 32sec (572 seconds)

Published: Sat Sep 26 2020