Create an upload route in an Express API

Kevin Cunningham: [0:00] We're going to install a middleware called express-fileupload that's going to help us with our upload by parsing our files properly and attaching some information and methods to our file that will help us deal with that.

[0:13] The first thing we'll do is import our middleware to a const fileUpload = require("express- fileupload"). Next, we'll have our application use that middleware. Once the app's been declared in our chain here with app.use(fileUpload()), which will intercept any binary upload and attach extra information and functions.

[0:34] Next, we'll add a route to be able to upload our files. It's going to be a post route and it's going to be at the path of "/upload-image". We'll then add the request and response function that's going to receive the request and response and deal with them.

[0:51] Let's start building our function. Let's introduce a try...catch, and let's fill out the unhappy path first. If there is an error, let's log that error to the console, and then let's send that back to the client. Return the response with a status code of 500 because there's an error, and sending the error as well.

[1:10] Now for our happy path. We're going to fill out our try. The first thing we want to check is whether or not there is a file. In a multipart form like we're going to use, the binary files will be attached to the files property of the request. First of all, we check whether that's present.

[1:27] Even if that object is present, we want to make sure that it's not empty. To test for that, we're going to get the keys from the object. I'm going to get the length of that array, and I'm going to make sure that that doesn't equal zero.

[1:41] If either of those two things are true, we're going to throw a new error, which is going to be an object, which is going to have a message, and the message is going to say, "No images uploaded."

[1:50] Now that we know that our files object is not empty, let's get the file that we want. It's an image, so that's let image = rec.files.imageFile. That corresponds to the ID that our file would have in the form or the key that we identify it with.

[2:08] Once we've got that image, we're going to use the mv -- or the move function -- that our middleware has attached to that file. That accepts the path that we want to move it to, so we're going to move it to .public and add its name and a callback function.

[2:24] The callback function accepts the error, so if there is an error, we're going to throw it. Otherwise, we'll respond just with an object with a message which just says, "File uploaded."

[2:36] Now to test that worked. Use your API tester of choice. Mine is Insomnia on the Mac. I'm going to post to localhost:3001/ and to the route /upload-image. The first thing to check is our unhappy route. If we don't send an image object, we are getting back the "No files were uploaded" message that we wrote out there.

[2:58] Next, we'll set our body type to be a Multipart Form, which will have a key-value pairing going on. I'm going to set my name to imageFile like I'm expecting in my code. I'm going to attach a file. I'm going to choose the file from my desktop, which is just going to be a screenshot and select that file and send the POST request.

[3:25] Now you can see the file was uploaded. I'm checking my file system. It's uploaded there, too.