In this video, you're going to learn everything that you need to know about uploading files in your React applications. We're going to do this in a very simple way. We're not going to be using any third party library, and we're going to be following all of the best practices and design patterns in React.
Now, before we get to that, there's two things that I want to quickly mention. The first one is that if you enjoy the way that I teach in my videos, and you're also serious about learning React, you should totally check out my course, Project React, which goes way more in depth than anything that I can teach in any of my YouTube videos. It will take you and teach you everything that you have to know to become a great React developer, and it's going to walk you every step of the way.
If you're interested, I highly recommend it. It's called Project React, and it's going to be linked in the description. And the second thing is that I also have a newsletter that's all about React.
It's called Import React. I love the name. It's really cool.
It's really clever. And it's all about React. You get tips, tricks, and really cool articles delivered to your inbox completely for free every single week.
If you're interested in that, it's also going to be linked in the description. Now we can begin the video. Alright, so let's begin.
So let's start implementing file uploading in a React application. So what we have here is a very simple application that we're going to be working with, we just have this one app component, right, it currently does nothing. And we're going to have to implement file uploading functionality inside of this component.
Now, what I always like to do first, and generally, this is just a best practice in React, is anytime they're doing some sort of new functionality, you want to put it in a new component. So that's what we're going to do, we're going to come here and we're going to go inside of SRC, we're going to create a new folder to keep ourselves organized. And we're going to do components like this.
Inside of components, we're going to create a component that we're going to call the file uploader. So we're going to do file uploader, like this dot TSX. In here, we're going to put all of the functionality that is related to uploading files inside of our application.
So first, we're going to do export default function, file uploader. And I believe I have a typo uploader. There we go.
And in here, we're going to return some JSX. For now, we're just going to leave this empty, right, because we're going to start building this in just a moment. Then once we have this, we can now go back here to the app component.
And we can get rid of this causal solutions over here. And we can directly import and use our file uploader component from the components folder like this. And let me just get it right what happened there we go.
Now we have a file uploader, it's currently empty, but at least we have it in a separate component, which we can now use in here in this app component, or any other component that we want to now implement and have file uploading functionality. Now the first thing that I want to do inside of here is just create and put a diff in here instead of just an empty fragment like this. And because we just want to put here our input, and we're going to do here type and that is going to be file like this.
And we're just going to put this input over here, just so that we actually have something that we can actually show. If we open up the application over here, we have a simple input, we can click it, we can select the file, but obviously selecting a file does nothing because we haven't really configured any other logic besides just the default behavior to actually show the file as part of the input, right. So that's the next step for us.
So the first thing that we actually want to do is we actually want to show some details about the file here. And we want to do that because essentially what we're trying to do is we're trying to get access to this file inside of our component here as state, we want to take the file that we receive here from the input, put it in state in our component, so that then we can use it for one to actually show the details of the file in the actual UI. So in here, and for two, we can then use that state use that file that is in the state to actually upload it in a function that we're going to send it to some back end, right.
So that's the first step is to create state to hold the file that we get from this input. So for that, we're just going to come here and we're going to make a state variable. So we're going to do const.
And we're going to do here file set file. And we're going to use use state import this from react. And here, we're just going to put no for now.
Now because we are working in TypeScript, we are going to add some types over here to the state. But if you're not working in TypeScript, it's totally fine, just ignore this part, it doesn't really affect the actual core of the video. But I'm going to come here and I'm going to pass you the type as file or no.
So this state variable is either going to be a file, and this is the default TypeScript file, class file type, whatever, which contains all the details of an actual file. Or it can actually be null in the case where we don't have a file, which is also going to be the initial state of this state variable. And then the next step for us to do is to take the file from the input and actually put it in a state.
And to do that, we're going to have to access the on change event handler of this input. So I'm going to come here and actually create a new function, we're going to call this one function, handle file change. And this is going to take an event over here.
So we're going to do event, I'm just going to put it as E. And this is going to be a change event, which we're going to import directly from react. And here, we're going to pass HTML input element to signify that this is the change event of our actual HTML input element.
And directly this file, we cannot actually pass it here on change. And we can pass handle file change. And there we go, we have no errors, because the event that we have here is the actual event that matches that is getting passed from this on change event handler.
Now inside of the function, what we want to do is this is going to contain this event over here is actually going to contain the file that we actually selected in this input. So we're going to want to check for that file. And if it is there, we're going to want to get it and set it in the state.
So we're going to do if E dot target dot files, this is going to be all of the files that are currently in the input, we're going to do set file, and we're going to pass your E dot target dot files. And we're going to pass the first file, we're only going to keep it things keep things simple over here and just have a single file input. So we're going to hard code manually to get to the first file in this E dot target dot files and put that put that directly in the state.
So now with this, what we've done is essentially whenever this input on change gets called, which is going to get called when we actually select the file on the input in our browser, this is going to call this function, we're going to check here if E dot target dot files is there. And if it is, we're going to access the first file and set it in a state. And then after that, we can now use this file because now it's part of a state of this component.
And we can actually display the details inside of our component inside of our JSX. So what I'm going to do is I'm just going to take care of some markup just to make things a little bit simpler to not risk copying something and making a mistake. I'm just going to paste your some markup to basically say that if we have a file over here, we're going to render this diff where it's going to have some styles, margin, bottom text SM.
And it's going to have here the file name, which is going to be file dot name, these are all properties that are available on the file object. And we're also going to do file size and then to fixed to get the actual kilobytes of the file. And also the file type, is it an image, is it a document, whatever type the file is, is going to be shown in here in our actual component.
And I also want to just come here and add maybe a space y class, we're going to do class name, and we're going to do space and then y. And then let's make it maybe four, just to have some space between the actual input and the file to kind of keep things a little bit more, I guess, visually pleasing. So now if we go back here, actually, let's make it two, because I just saw it for like a quick second, let's make it two.
If I come here, I will now select the file that is going to trigger the on change event handler of the input. And when it does, that file is going to go in the state and then we're going to have a file in the state, which means that our JSX parts that has the file details is going to get shown. And as you can see here, that's the name of the file, that's the size of the file in kilobytes.
And that's the type of the file, it is an image and is specifically a JPEG image. So this is great. This works exactly as we expect.
Now before we continue, I just want to take a quick moment to really think about what it is that we're actually doing in this video. Because what we're doing here is we're following an approach that is called learning by doing, right, you're not just watching a boring lecture video that's all about theory, you're actually watching me do it and implement file uploading in React, which is learning by doing, which is great, because that's exactly what brilliant, the sponsor of today's video is also doing. So brilliant is a place where you learn by doing you have 1000s of interactive lessons in various topics such as math, data analysis, AI, and of course, more importantly, for us programming, brilliant has a learning platform that is designed to be uniquely effective.
Their first principles approach helps you build understanding from the ground up. Each lesson that you have on there is filled with hands on problem solving that actually lets you play with concepts, which is a method that has been proven to be six times more effective than watching traditional lecture videos. Plus, all of the content on brilliant is crafted by an award winning team of researchers, teachers and professionals from places such as MIT, Caltech, Microsoft, Google, and more.
And brilliant helps you build your critical thinking skills through problem solving instead of memorizing. So while you're building real knowledge on specific topics, you're also learning how to become a better thinker. And they have so many great courses on there, it's really hard to choose.
But if I had to recommend one and pick one, I would pick thinking in code, which kind of follows what we're doing in this video and teaches you solid foundations for computer science that are going to directly help you as a react developer. To try everything that brilliant has to offer for free for a full 30 days, visit brilliant. org slash causes solutions, scan the QR code on the screen, or simply click the first thing in the description.
You're also going to get 20% off an annual premium subscription. Thank you once again to brilliant for sponsoring this video. And now let's continue learning about file uploading in react.
Great. So now that we have this done, we can actually move on to the next part of this, which is actually handling the uploading of the file. And for that, I'm going to come here at the top and I'm going to define a new type.
So we're going to do type upload status. And that is going to be either we're going to start it at idle, which is going to mean that it's nothing happening, it's ready for it to do something to upload, or it's going to be uploading, or it's going to be success, which means that the upload has been executed successfully, and there was no error. Otherwise, if there is an error, it's going to be error like this.
And this is going to be our upload status. Now generally, you want to do this in actually have one state that represents all the possible ways that your state can be in, instead of having separate states like howThis is a video by Darius Cosden, from the company called Cosden Solutions, from the is going to be equal to use state and we're going to pass it here upload status as the type and we're going to start it at idle because that is going to be our initial state. Then we're going to come here in the actual JSX and below the file over here, what we're going to do is we're actually going to render a button that we're going to be able to click that is going to trigger the file upload.
So we're just going to make a check here first that we have a file, because we only want to actually allow a file to be uploaded if we have a file in the state. So that's our first check. So we're going to do file.
And then we're going to do end, end. And then we're also going to check that the status is not equal to uploading, right? Because we don't want to render this button, if we're already in the process of uploading something.
So if those if both of those conditions are true, then we're going to come here and we're going to render, let me just see how I actually did it, we're going to render here a simple button, where is it, we're going to render a simple button over here, that is going to be button. And here, we're just going to put upload like this, right? Right now, there's no function attached to it, we're going to do that as the next step.
But for now, we just have a button. So let's see how this looks like in our actual application. So I'm going to come here and actually choose another file to upload.
And you're going to see that as soon as we have a file, we still have the same details. But now we have this upload button, which currently does nothing. But we're now going to be able to use it to actually upload the file, this button is only visible if there is a file.
And if the upload status is not currently uploading, which is why we're seeing it currently on the screen. So that's great. Again, this works exactly as we saw.
Now let's come here and actually create a function that is going to handle our uploading. So we're going to come here and make a new function. And we're going to call this one function handle file upload.
This is pretty simple, pretty self explanatory. In here, the first thing that we're going to want to do is again, we're going to want to make a check if we have a file, if we don't have a file, we want to return early and just not execute the rest of the function. So we're going to do if we don't have a file, then we're just going to return early and again, not execute the rest of the function, then what we're going to want to do is update our status over here to set it to uploading, because now we're going to be starting the actual uploading process.
So we're going to do set status, and we're going to put your uploading over here to signify that we're now starting the actual uploading status. And the benefit of us having just one state variable called status over here, instead of having many is that we just have to make one state update over here. And it's going to update our entire component to set it to uploading.
And we're never going to have the risk of any possible states or managing multiple states and risk them not being always in sync, then what we're going to do is we're actually going to take this file, and we're going to convert it to form data, because that is what we're going to be using to actually send it to a back end. So we're going to do const form data equals new form data, we're going to instantiate a new form data class. And here we're going to do form data dot append.
And we're going to do here file, and I'm going to pass your our file like this to our form data. So now we have this form data object, we can send this as a POST request. And this is going to contain our file, which is going to get uploaded to our back end.
And then we're going to come here and we're going to change this function actually to be an asynchronous function because we are going to a sync, there we go, I always miss up when I write a sync, because we are going to be sending a request to a back end, which is asynchronous in nature. And then we're going to do try, and we're going to put here this, then we're going to do our catch block like this. And we're going to catch an error if there's an error.
So first, what we're going to do is we're going to await a fetch request. Now we are going to be using axios for this, just because the way that they handle file uploads, especially when it comes to upload progress is simpler. And generally, it's something that I would recommend they use in a project anyway.
So axios just makes a lot of sense here. So we're going to do axios. And we're going to import axios from axios dot POST.
And we're going to send here to a URL, let me just cat and copy the URL here to make sure that I don't make a mistake. This is essentially a free and open source kind of back end that you want that would actually simulate uploading something there. And we'll actually return to us a response that we can actually expect.
And we can use that to show in our actual UI, we don't have a real back end for this video. Because again, it doesn't really make sense to set all of that up, this one is pretty sufficient. And this one will act as a real back end because it really is it just simulates all of this, but it really is a big real back end.
And then as the second argument, we're going to pass form data, that's going to be our data that we pass to request. And then here, we also have to pass the content type. So let me just copy this correctly.
So again, I don't risk making any mistakes, we're going to have to pass the content type as a multi part form data, right to be able to send the actual form data to actual requests. And I believe I have a mistake, it's not like this, we have to pass it as the headers, like this headers is going to be an object. And here we're going to have the content type inside of the object.
There we go. So now we're passing form data to our post request. And we're passing actual form data in the actual request.
So everything should work as we expect. Then after that, after we awaited this request, if everything went correctly, we're going to now set the status to success. So we're going to do set status to success.
So we're going to do here success. Otherwise, if we have an error, we're going to set the status and we're going to put your error like this, we're not going to do anything with a specific error, we're not going to do anything with a specific status code or anything like that, we're just going to track the simple status is successful, is it not. And then based on that, we're going to show something in the UI.
And then I'm just going to come here in our JSX. And I'm going to copy some other markup to just handle and show something in either case, if we have success, or if we don't. So let me just make a little bit of space here to kind of orient ourselves a little bit.
So the only thing that I added is this two sections over here. So if status is equal to success, we render a paragraph with some styles, I believe we should not have any margin top here because we have the space y, right. So if we have an actual status of success, we just rendered this paragraph that says file uploaded successfully with a green color.
Same thing if we have an error, we just said upload failed, please try again, really simple, nothing really fancy here. So let's now go to the application and actually check out and see how this works. So I'm going to come here, select the file, and we're going to put any file.
And now when I press upload, it is going to take a little bit of time. And then we're going to actually see an upload our file to an actual database, right, it's not going to get actually saved. But we're going to get a return a response from the actual server that we're uploading to, which is either going to be success or error.
And we're going to be able to see that displayed here on the screen. So let's press upload, it's going to take a little bit of time. And then after it's been uploaded, well, it did not work.
So let's see the console. Do we have an error? No, we don't, I believe I know what my mistake is.
And yes, we have nothing attached to our button, I forgot about that. So on click, the button is going to handle file upload. And now we should be good to go.
Let's go back here. Let's refresh again, let's select our file again. And hopefully this time I'm going to press upload, the button disappears, and we have file upload successfully.
There we go. It works exactly as we expect. And also, I hope that you saw when I press upload, and the upload is happening for a split second, while the upload is happening, the button actually disappears, because that's exactly what we said, we said that this button should only be visible if the status is not currently uploading.
And if we have a file, while we have a file, and right now the status is not uploading, well, let me see what happened. Let me just go back to the status over here, we have a file, now the status is not uploading. Now it is.
And now it's not it's successful. So the button shows again. And then we also have this success message indicating to us that everything went exactly as we expect.
So there we go. This works. Now, this is great.
But we actually have one more step that we want to do. And we actually want to implement upload progress indicators. Because right now, the only thing that we're seeing is when an upload is successful, we're not actually seeing the progress as it being uploaded, it would be really nice as a user to have a percentage shown on the screen that indicates to us how much of the upload has actually happened, and how much of the upload is left to be uploaded.
So that's what we're now going to start implementing. So for this, we're going to want to create another state variable. So we're going to come here and do const.
And this one is going to be upload progress like this, this is going to be used to track the actual progress of our upload, then we're going to do set upload progress like this. And this is going to be equal to use state and we're going to put it here, we're not going to give it a type because it is going to get inferred, we're going to use zero as a type, this is going to be a number and we're going to increment this number and update it as we're actually handling the file upload and the file progress upload. Now the reason why we used Axios and I mentioned this a little bit earlier in the video is the fact that Axios makes it really, really simple to actually attach a listener and event handler on the upload progress and actually call even react state updates as the upload is happening.
And all of that happens in here in this object over here, this config over here, what we can do is besides headers, we can actually pass on upload progress. And you can see here, this is a function. And this one will give us here a progress event, which is going to be let's do here, progress event.
And that progress event is actually going to contain our actual values of how much of the upload has happened and how much of it is left to go. So in here, what we're going to do is we're going to do const progress, we're going to have to calculate the progress. And this one is going to be progress event dot total.
And this is going to be an optional because we may not have a total. So we have to put a question mark over here. And then if we have a progress event dot total, we're going to do something.
Otherwise, we're going to return zero like this, because if we don't have anything, we're just going to return zero as the actual upload progress. And then in this case, where we actually have progress event dot total,What we're going to do is we're going to do math dot round. And here we're going to pass progress, event dot loaded, which is going to be the actual part of the event, how much has been successfully uploaded, we're going to do that times 100.
And we are going to divide this by progress event dot the total, right. So we're taking I have here a mistake, it's run like this, we're taking here essentially the amount of the progress that has been uploaded so far times 100. And we're going to divide this by the total amount that is to be uploaded, this is going to give us an actual percentage that we're going to have here in this progress variable.
And then once we have this progress variable, the beautiful thing about using Axios for this is we can directly call set upload progress, and we can pass your progress directly and it is going to get called and update our state every single time. So essentially, what's happening here is this is a function that comes directly from Axios, and it gives us access to the progress event, which has the amount of upload that has been finished and the amount of upload that is left to go. And then based on this function, we can actually call state updates inside of a react state component.
And it's going to automatically update as we're getting updates from Axios in the file upload. So as we're uploading the file, it is going to get and set the upload state in the state of our component here. And we're going to be able to use this and show it in the JSX to show it to the user of how the upload is currently doing, which is great.
Now, we're also going to want to come here where we're setting the status to success, we also want to just make sure that if we have success status, we also have an upload progress of 100. It just makes sense to have it that way, in case this function doesn't really hit that 100 directly, which sometimes it might not. So we're going to do set upload status and here upload progress, sorry, we're going to put this as 100.
Right. And then in the case of an error, we're going to do the same thing. But we're going to do set upload progress.
And we're going to put here zero, we're doing this because in the case of the error, this is not going to reset the upload progress to zero, we have to manually do it here inside of our function. And then we also have to come back here at the top of the function and also added here because whenever we're going to trigger a file upload a new file upload, we want to make sure that whatever progress was there before, if there was another file that was uploaded before, we also want to make sure that we reset the upload progress when we're uploading something fresh. So we're going to do set upload progress.
And we're also going to put this here to zero to reset the upload progress. And then the last step for us to do is to come in here to our JSX. And what I'm going to do is once again, if you don't mind, I'm going to take care of some markup, which is just going to render a progress bar type of thing, a progress indicator.
So this is the markup over here. So if status is equal to uploading, then we have this div over here, it has some styles, and then we're passing here the width of the div as the upload progress in a percentage. And that's it.
And then we're displaying here the actual percentage uploaded. That's really it. It's just some JSX that just uses the upload progress and displays it on the screen.
So let's now go and look at how this actually looks and behaves. So we're here, we're going to select a file again, I'm going to select the same logo. And now we're going to upload this and we're going to see we have a progress bar and it showed uploaded.
And once the upload was done, we have file uploaded successfully and everything works, I can press upload again, and it's going to trigger another upload. Once again, I press it again, it triggers an upload. And we're always seeing from zero to 100.
Let me now open up my console over here. And let me just go here to my network tab and actually throttle everything so that hopefully we can see it a little bit slower. If I now press upload, you see that as we're getting uploads, it's actually happening.
And now as the upload is getting finished, we now have success. And there we go, we have the button. Once again, for good measure, we're going to press upload, we see the progress every time that it's incrementing our state update is happening, we're seeing it on the screen.
And when it's done, everything is uploading and the states are updating exactly as we expect. This works. And in terms of functionality, well, this is pretty much complete.
That's all that you really need to handle file uploading in a React application, you create a new component, you have a state for your file, you have a state for your status, you have a state for your progress, if you care about that, if you want to use that and show it to the user, then you have a function that will just set the state of the file and you attach it to the actual input on its own change event handler, then you have a function to actually handle the file upload, I would recommend they use Axios, but you could use anything that you want. And then you actually pass the file and then you hook into the actual events of the upload to get the actual upload progress and you put that in the state. And then of course, you handle your statics and your upload progress at every step of the way.
And then you just use all of your state variables, all the information that you already have in this component to just display them to the user. It's pretty simple, it's straightforward, but it's very efficient, and it works. So if you want to play around with this, which I highly recommend, you're going to be able to find the GitHub repository in the description, as is the case for pretty much all of my tutorial videos on the channel, play around with this, extend this if you want.
For example, here, we're only handling one file at a time, but you could easily extend this to handle multiple files, you would just have to make some slight changes to the way that you handle your uploads to basically go and loop through every single file and make a separate fetch request for every single file. We're not going to do it in this video, it's a little bit outside the scope, I wanted to keep things simple, but you could easily do it and you have the code now in the GitHub repository to be able to do it. So go ahead, I highly recommend it.
If you enjoyed this video, and you want to see more videos just like this one, make sure to leave this video a big thumbs up. You can also click here to subscribe, or you can click here to watch a different video of mine that YouTube seems to think that you're really going to enjoy. And with that being said, my name has been Darius Kozun, this is Kozun solutions.
Thank you so much for watching, and I'll see you in the next video. Ciao.
