React Image Upload Made Easy

welcome to this video where I want to have a look at how we can upload files to our back-end to some restful api weather react app or in a react app so let's dive right into that I'm in a brand-new project which I created with create react app didn't change anything in there and I'm in the app.js file which is the main component we're viewing here once we start the development server now in there I'll first of all get rid of all the content and I'll start simple I want to add an input a file input which the user can use to pick a file so I'll actually add an input of type file here just like that should be a self-closing of course now if I save this what we can see is this well file input here unsurprisingly in which I can pick a file now I want to see which file was picked so in order to do this I'll add the on change listener which will fire whenever the user changes and you changes the file picks a new file so add a method here which I'll simply name file selected Handler where I will get the event and where for now I simply want to lock that event so with that I'll assign it here with this file selected Handler and please note I'm using that syntax where I set up this method as basically a property that holds the arrow function this will ensure that this keyword inside that method always keeps the context of this component and doesn't refer to anything else as it often does if you attach event listeners so now with that let's go back to the app and let's actually choose a file now and you see I get this event which gets executed where I also got the target wrapped in there now I'm interested in that target so I will execute event target and lock that to the console so let's try this again and now we see we get that fall input now the cool thing is on there since it is a file input will have a files array where the first element will be the file we added and if we had a multi file input field here we could access all the files here as elements of that array so now I'm logging that first foul if I do it like this then this is the file the user picked with the name the size and so on this is the file I want to upload obviously I could upload whatever default changes or I simply add a button below there a button where I say upload and where I then will add a click listener so here I'll add on click and execute my let's say this file upload handler now I need to add this so we'll add my file upload handler method here don't need an argument and in here the goal is to upload the file the for that I need to store it so I will initialize my state here although with this properties syntax where I have to select a file which initially is just now let's say here where we select the file I will no longer log it but instead called this set state and set my selected file equal to event target files and that first fall we selected now it's stored in my state and now we can use it here in the upload handler but for uploading we need to send an HTTP request and I want to use a library for that I will use Axios to send that request so I quit my development server and I will install with NPM install - - save or actually here I will use yarn because that was initialized with yarn so yarn add Axios or NPM install - - safe access would be equivalent thereafter I'll start development server again and now I can import Axios from Axios here and use that package in the file upload handler I can then call Axius post and post my request to a certain URL now for the URL I will use an endpoint I created with the help of a firebase cloud function I did this in an earlier video you can find on this channel link is in the video description and probably up here and in this video you will learn how you can setup your own API endpoint with the help of firebase cloud functions and there I created an API endpoint that accepts incoming foreign data so a mixture of Fields and files and stores the file this might hold in firebase cloud storage to see this in action I'll go to the firebase console where I edit this and I'll first of all clean up my file storage so that it's empty so that we can really see if that worked and then the function has this endpoint now you can't use that because the project will not be available anymore when you're watching this but you can create this as I show in the other video or of course you use any other backhand you might have so with that I'll go back to my app and add this URL and now I want to construct some form data which I send so name this FD new form data that's a default JavaScript object and there will append let's say my image field you can name this whatever you want I will get my selected file from the state and give it the name the file has by accessing this state selected file and there the name property you could see this earlier in the console lock that the file has this name property and with that this is the data I want to send with the post request so we'll set this as data which should be sent and thereafter this gives us a promise where I want you output any response I get here we can also add a catch block to catch errors but let's first of all see if this succeeds like this so now I save that and I go back to my app and it will now choose a file where we don't upload it yet we just selected it but if I now press upload we should after a short duration see our response and that's looking good 200 and if we have a look at the data we get it worked which indeed is the response this firebase function gives back if everything works so that's pretty cool and this is already how you can upload files from your react there just like that very simple we can enhance this with Axios we can also report the progress of the file upload by passing a third argument to configure this request and they you can add a on upload progress handler there it will then execute this function where we get the progress event which we can use for example to update GUI and output a percentage of the upload state here I will simply log it to the console and there we can say upload progress and then simply add the progress event and there will have a loaded property which is the amount in kilobytes or in bytes that has already uploaded divided by progress event total which will be the total amount it has to upload that's just what this event exposes to you this event is coming from the xmlhttprequest object behind the scenes now we can wrap this in parentheses and multiply it with 100 like this and maybe then round the overall result so math.round whoops times 100 should be inside the parentheses though so that we round the overall value to the next integer and then we could add percent after that now let's see this in action let's save this and let's again pick a file here and click click upload and now you see we got the different progress events in between and then it takes a little bit longer to get back response and we get the response and with that we enhance this upload and of course you could use the data you get back on the progress event to update your progress bar or whatever you have on your page know one last thing I want to do in this video I want to make sure that we also learn how we can hide this input and trigger it through some button in case you don't want to show that input you can then simply set some inline styles here and set this play to non like this and then maybe add another button where you say pick file where I will then simply add onclicklistener and now I want to essentially trigger this input when this button is clicked for this I use a concept and react named refs a ref is simply a way for me to get access to another reference in my Dom in my template here in the JSX code I should say I use it by adding the ref key here and ref then takes a function where we find some property of our class - a reference of this input so here maybe I could name this file input and set this file input equal to file input so react will give me a reference to this file or to this input excuse me to this element and I can then store this in a property of this class and now in on click I can simply execute this file input click this should be wrapped into a method though so let me quickly do that let's create an arrow function which will then execute this now if dad if I save that and go back you see the input element is hidden but if I click pick file it still opens and it still works as before but now through that button and by hiding that input element which might be something you want you don't need to do that it's just an option and I hope this video was helpful and with that file uploads are a bit easier in a bit clearer when it comes to implementing them in a react app

Channel: Academind

Views: 325,948

Keywords: react, react.js, image, image upload, file upload, react tutorial, reactjs tutorial, react.js tutorial, react course, reactjs course, react.js course

Id: XeiOnkEI7XI

Length: 10min 30sec (630 seconds)

Published: Thu Feb 15 2018