2.4 Uploading Files

In the previous lesson, we focused on post requests. And you learned how to send data both in JSON format and URL encoded format. And you also learned that the same ideas and concepts that apply to a post request apply to a put and a delete request. Well, in this lesson, we are going to focus on uploading a file. And the process applies to post and put requests. So I guess it could work with a delete request, but why would you upload something [LAUGH] with a delete request? So what we're going to do, then, is take the code from the form version of the previous lesson. And we're going to use that as a basis, because that's going to give us most of what we need. Cuz there are some similarities between uploading a file and then passing in URL encoded data. Because instead of using this URLSearchParams, we need to create FormData. Because what we end up with is called a multi-part request. It has a part that's just normal form data, and it also has a part that is an attachment, a file. So the server needs to understand that there are multiple parts to this request, and that is why we have this FormData. Now, the FormData works a lot like the URLSearchParams object, in that it has an append method. And we can append each field and its value to the FormData. However, in our case, we want to just submit the entire form. So we can eliminate the loop completely, and just pass in our form object to the constructor. So this is going to create a form data that we will then send with our request. And since it's no longer really a guitar, let's just call it data, and we will pass that data there. Let's get rid of the headers, because we don't really need that, and it just adds extra cruft there, let's also get rid of these comments. So if we were going to make this request, it would work, except that the endpoint is api/guitars/upload, and let's look at the form. So it's what we worked with in the previous lesson, but I removed some of the fields so that everything would fit on the screen without having to scroll. So let's refresh, let's type in just some stuff. It really doesn't matter because I want to focus on uploading a file. And we will pick one of these pictures, and we're not really searching, we are uploading the file. But you can see that the guitar was updated. And if we look at the uploads folder, which I created inside of the public folder, we can see that there is now a file. And if we add an extension to this, .png, and open it up, we will see that it is the guitar that we just uploaded. So that worked and that's great, but the real fun comes with the fact that we can actually track the upload progress. This is actually a feature of XML HTTP requests. And it's something that the fetch API does not have. So that's one of the reasons why I prefer XML HTTP requests, and why I prefer Axios. So what we're going to do, then, is add in that configuration object that we just had. Except that it's going to be a little bit different in that we will have an event handler. It's called onUploadProgress, and it's simply a function that is going to accept a progress event object. And it has two properties, well, it has more, but the two main properties are loaded, which is the amount that has been loaded, and then there's also the total. So all we need to do, then, to get the percentage of what has been uploaded is divide the loaded by the total. But of course, that's going to give us a decimal percentage. So it would be like 0.01, 0.02, 0.03, so on and so forth. So in order to make this whole numbers, we would need to multiply loaded by 100. Or actually, we could do the whole thing by 100, but this going to be fine. And that would give us our percentage in whole numbers, but let's also round, just so that we have nice, round numbers. And there we go, but we need to display this. Well, I do have a div element with an id of output. So let's use that, let's retrieve that from the document, so we will simply get that element. And then inside of this onUploadProgress event handler, we will say output.innerHTML =, and then the result of our little calculation, and that will give us our upload progress. We are passing this config object as the third argument, so if we had any headers, we would come in here and add the headers and all that stuff, but we're just focusing on the upload progress. Now, I'm going to get rid of this alert inside of the then callback, because that will interfere with what's actually drawn in the document. I want to be able to click on the upload button, which actually says Search, [LAUGH] and then see the progress there. But that also means that we need a larger file. Because if we just upload one of these small little pictures, it's gonna go by very quickly. So I have a file that is just a little under 100 meg. It's in my downloads and really what it is, is I combined some of these files into a single zip, so that we can see the progress up here. It's going to appear before our first form field. And so whenever I click on the button here, we can see the progress, we're done. And if we look inside of the uploads folder, we have two files. And we can see that this one is, well, it's less than what I thought, it's closer to about 72 meg, but that was big enough to see the progress. And that's a very nice feature that we have available to us. So once again, we used a post request, but we could apply this same thing to a put request. The key thing to remember is to use the FormData object to build your form data. And if you want to track the progress of your upload, use the onUploadProgress event handler.