Angular Image Upload Made Easy

welcome to this video great to have you here in this video we'll have a look at how we can upload files from our angular app to a server as a server I will in this video use a firebase cloud function which I wrote in an earlier video on this channel but any back-end that accepts form data or binary file uploads will do so let's dive into this and see how we can actually get a file from an input through angular to a server obviously we need an angular app to upload files and I'm in a brand-new project created with the CLI nothing has been added to this project it's completely empty I just cleaned up the app component HTML file and only added a heading same file upload now I get a couple of goals here one goal is to add a file input element that allows us to well attach files of course I then also want to upload these files that's one of the primary goals of this video I also don't want to show how we can add a button that indirectly triggers the file input element in case you don't want to directly have that in your app but one step after the other let's start simple by adding an input of type file this is a default input element shipping with HTML which allows us to well get file inputs one important note if you're using this in angular form this can't be registered as a form control where the attached file would automatically sync to your form object you always have to fetch this differently and you do fetch it by adding a change listener this will trigger whenever the file selected by the user will change which is typically the point where you are interested in the fall so here I will execute a on file selected listener and forward my event object now I need to add that listener and DTS foul so on file selected and I know that I get some event object here again on file selector that's just a method getting executed here now in this on file selected method I want to do something with that first of all I'll simply lock the event to the console so that we can see what's inside of it let's save everything and go back and open the developer console here on the right and now if we choose a file here I have prepared one here and I click open we get this event object where we get all kinds of information a very interesting piece of information is in the target there we get this target element this is this file input and as a file input it has this special file key which is an array of all the files which were selected in case you have a multi select tool here I have only one element so the first element actually is the file I just chose and this is the file we can now upload now what you can do is you can add some logic to immediately upload the file whenever this event occurs or maybe you want to wait until the user presses some button so maybe you have upload button and this could of course be also a submit button and some form of type button where you then have a click listener or in a forum DNG submit listener on the overall form where you then trigger on upload now this would be an alternative setup we have this extra on upload function and in order to use the file here we simply have to store the file you know may be selected file property which initially is null and which we then here set to this selected file is equal to event target and then remember we had that files property where we then had a couple of Falls let's pick the first one and that is the file object itself now we're storing this in selected file and we can upload it here in on upload that leaves us with one question how do we upload a file we do it through the angular HTTP client for that we need to go to the app module and enable that client by importing the HTTP client module from at angular common HTTP that's the path to that module we simply added two imports then and with that we can inject the HTTP service into any service or component where we want to use it now you could create a extra service for that I'll simply inject it into my component here so I'll add a constructor and add my HTTP property which will be of type HTTP client this client now needs to be imported so let me add an import here at the top of this component HTTP client from and then it's also add angular common HTTP with that we use that client in this component to upload the file so in on upload I can then reach out to this injected property and there I want to send a post request now the URL I want to send it to actually is the URL of this firebase cloud function I created in this this I guess here this video so this is a video where I created this function it's a cloud function which simply accepts incoming post requests with a foreign data payload where we can then extract the file from so I will send a post request and then I need the URL which I copy from my firebase console and of course you can use any other back-end function that accepts foreign data so this is the URL I want to send my request to now I need to configure this request a little bit I need to add my body and as I said this body should be of type foreign data so I will construct it here I'll name it FD new forum data which is a default JavaScript object we can construct and then I will simply append some fields here for example my image file which will have a value of this selected file and where I use this selected file and now I need to file name now if you're not sure which property this is we can get Auto completion support at least in visuals to do code by explicitly casting this year we know this will be of type file which is a default JavaScript object and therefore here we will also store a file eventually so let's add this type annotation here too and now we get auto completion here and we know there will be a name property so this is now my whole form data we could also add additional fields if we needed that I'm not going to send this or add this as a body now you don't need to set the content type that should be set automatically and we can now instead simply subscribe to the response so there we will get a response which for now I will simply log to the console so let's try it out I'd say let's simply first of all pick a file this one here maybe now it's stored and now let's hit up and I get back it worked which is actually the message my firebase cloud function sends back if it works I can confirm this by visiting the storage in my firebase storage and there I got two files because of that our image transformation function I also set up in an earlier video but there I can confirm this is the current date and time so this was uploaded right now so this is already how easy it is to upload a file this is all it takes in its basic form but maybe you want to do more than just upload the file like this and before we dive into that just a side note of course you could have also just sent the binary itself so just selected file if your API endpoint accepts that binary so if it doesn't require form data but directly wants to binary just a side note but as I said maybe you want to do more so let's add an object where we configure this request now let's say you want to track the progress of your file upload then you can add report progress and set it to true as a config and also that's important you need to set observe which normally would be the extract a response to events this means you will get all the individual events during the file upload so now will actually not get the response here but all events and now if I save does and I go back to our application and I choose the same file again and I upload you see we got different events here these are the different upload events and eventually we get also the response there we got the different event types and you see the loaded and the total amount so how much has been uploaded and how much is the total amount of to be uploaded we can use that information by first of all importing HDP event type here to map these type numbers to actual names we can easier understand and then here we can check if event type is equal to http event type thing we just imported upload progress if that's the case then I want to output upload progress and set this equal to event and now keep in mind here we got loaded in total so if we want to express this as a percentage its event loaded divided by event total maybe times 100 and round that so math.round event loaded by event total times 100 and then here we could output percent after this just like that and if we got a different type so else if event type is equal to http event type response well in this case well we got the response right so we want to output death so here I can then console.log event and that should be my response let's save that and let's try it out if I go back and I choose the same file again and I hit upload you see we got the upload progress round wasn't the best idea had always rounded it up to 100% so let me quickly fix this by first multiplying with 100 here and then let's try it again so put the multiplication inside the parentheses and hit upload again and now you get different upload progresses and finally at the end after the responses back we get our HTTP response here where we could read the body for example and that is how easy we can upload a file now let's say we want to enhance this a little bit and for some reason we don't want to have that file input here but I want to have some other button in our template so let's say here we have a button which is also of type button where we have maybe pick file as a caption and when we click this then we actually want to trigger this input which is hidden well that's simply hired to hide it by setting the style display to non it will be part of the Dom but it's not visible well we can give this a local reference let me quickly distribute all the attributes and properties over multiple lines to make this easier to read we can get this a get this a local reference like file input and then here on the click event on the button we could simply trigger file input click like that and that simply proxies to click to that hidden input so if dead if I save this I got two buttons if I click pick file the file picker opens even though it's hidden and I can still upload the file just as before but now with the hidden file picker and that's actually all I wanted to show you about file uploads with angular with the HTTP client you learned how you can track the progress of the upload how you can attach a file and fetch a fault to begin with and that's really all let's do it I hope this helps you in your future projects not be very happy to also welcome you back in future of videos

Channel: Academind

Views: 342,635

Keywords: angular, angular.js, angular 5, image upload, file upload, tutorial, httpclient, angular tutorial, angularjs tutorial, angular.js tutorial, angular course, angularjs course, angular.js course

Id: YkvqLNcJz3Y

Length: 12min 42sec (762 seconds)

Published: Mon Feb 12 2018