Name: Upload Files with Express
Uploaded: 2017-10-05T07:12:56-05:00
Description: In this lesson we create a new Express web server app for handling file uploads and persisting them to the filesystem. We will walk through using the express-fileupload middleware module from npm to process file uploads, and then use the Express static middleware to serve the uploaded file as a static asset.

In this lesson we create a new Express web server app for handling file uploads and persisting them to the filesystem. We will walk through using the express-fileupload middleware module from npm to process file uploads, and then use the Express static middleware to serve the uploaded file as a static asset.

Upload Files with Express

The first thing we need to do is set up our prerequisites for express. This includes requiring the path and express modules, and then assigning the app variable an instance of express. Next, we'll set up our root URL.

Let's specify a get request for the root of our path. Our get request accepts a function as a callback containing request and response variables. Let's send back a response containing an HTML form. This form will post to a /upload route. We'll send it encoded as a multi-part form data, and submit it as a post.

Within this form, we will specify a file input field, which we'll use to handle our file upload. Let's name it foo so we can easily reference it later. Add a couple line breaks, and also a submit button to upload our file.

Let's then make our express app listen on port 8080 and output something to the console to let us know that our app has successfully started. Let's initialize our NPM config, and then install express with NPM.

Then start our web server. If we check a web browser, we will see our HTML form, but if we specify a file to upload and submit, we will see that nothing happens. This is because our form is posting to /upload, and we haven't defined that route yet. Let's go ahead and do that.

To handle file uploads, we are going to use the express-file-upload module. We'll assign this to a variable called file upload. To use this module, we will need to register it as express middleware, and call it as a function.

We'll also define the /uploads directory to use the express static middleware function to serve static assets. We'll make this path look at the uploads directory for our static assets. Now, let's finally define our /upload route.

This also accepts a function as a callback with request and response variables. The express-file-upload middleware makes our upload accessible by a files property on the request object. Let's add a check so that if the files property doesn't exist on the request object, we will return a 400 bad response status with the message that no files were uploaded.

Since we named our file input field foo, that name will be available on the request files property. Let's destructure this value to assign to the foo variable. Next, we will define an uploadto variable that specifies where on the file system we should upload this file.

Let's upload it to the uploads folder under the same file name using backticks to interpolate the variable. Next, we will call the move function on the foo object. This property was made available to us by the express-file-upload middleware.

It accepts a function as a callback containing a single error variable. If the error variable exists, let's return a 500 internal server error code, and also send the error message back with the response object. If not, let's return a response with a link to our newly uploaded file.

We will again use backticks to interpolate our variable inside a string, reference our desired upload result from the uploadto variable. Remember to install express-file-upload with NPM, and also create the folder for our uploads to persist in.

Then we can start our web server again. When we resubmit our file upload, we will now see a successful upload response, and can click through to see our cat friend Herman was uploaded to the file system.

Upload Files with Express

Share this video with your friends