3.4.11: File Uploads

Search…

Introduction
In 3.1.3: POST Requests, we added an express.urlencoded middleware to populate request.body. For file uploads, we will add a similar configuration to Express using the Multer library to accept binary file data in requests.
Multer Setup in Express
Multer names and saves uploaded files to a local folder on the server, and adds file metadata to the Express request object in a file key.
Install multer
1
npm install multer
Copied!
Create File Upload Directory
Create an uploads directory in our repo to store files.
1
mkdir uploads
Copied!
Add uploads to .gitignore
We want Git to save the existence ****of the uploads folder, but ignore the files in it because the files in uploads are not part of application logic. Ignoring the files in uploads also prevents our Git repo from getting unnecessarily large.
.gitignore
1
uploads/*
Copied!
Initialise `multer` in index.js
Specify the uploads destination folder when initialising multer. See Multer docs for details.
index.js
1
import multer from 'multer';
2
​
3
// set the name of the upload directory here
4
const multerUpload = multer({ dest: 'uploads/' });
Copied!
Update Application Logic to Accept File Uploads
Update HTML Form to Accept File Data
1.Add enctype="multipart/form-data" attribute to our opening form tag. This signals that the form contains file data.
2.Add an input tag of type file to accept file data in the form.
upload.ejs
1
<form action="/recipe" method="post" enctype="multipart/form-data">
2
  <label for="label">recipe label:</label><br />
3
  <input type="text" id="label" name="label" /><br />
4
  <label for="photo">recipe photo:</label><br />
5
  <input type="file" name="photo" />
6
  <input type="submit" value="Submit" />
7
</form>
Copied!
Add Multer Middleware to POST Route
Add multerUpload.single middleware to the POST route where we plan to receive the file upload. Provide the file upload form input field's name attribute as a parameter to the middleware.
index.js
1
app.get('/recipe', (request, response) => {
2
  response.render('upload');
3
});
4
​
5
app.post('/recipe', multerUpload.single('photo'), (request, response) => {
6
  console.log(request.file);
7
  response.send('worked');
8
});
Copied!
Use File Metadata in request.file
In production apps we would take the information from request.file and save it to the DB. Notice how the file name is a cryptographic hash, and there is no file extension. This is deliberate to ensure file names are unique. If we wish to name files differently Multer accepts configuration options at initialisation.
request.file
1
{
2
  fieldname: 'photo',
3
  originalname: 'hickey.png',
4
  encoding: '7bit',
5
  mimetype: 'image/png',
6
  destination: 'uploads/',
7
  filename: 'b6c6612935244b080fc2daa81ac1b3b8',
8
  path: 'uploads/b6c6612935244b080fc2daa81ac1b3b8',
9
  size: 422224
10
}
Copied!
Save File Upload Metadata to DB
In this example we save uploaded file's name to our DB so our app can retrieve the file when it needs to. We save the file name to a column called photo in the recipes table.
Create Column to Store File Name
In this example our file name column is photo. Please use a more descriptive name depending on your context.
init_tables.sql
1
CREATE TABLE recipes (
2
  id INTEGER NOT NULL PRIMARY KEY,
3
  label TEXT,
4
  photo TEXT
5
);
Copied!
Store File Name in DB from Route Middleware
When processing the request in our route middleware, store the uploaded file's name in a new row in the DB.
index.js
1
app.post('/recipe', multerUpload.single('photo'), (request, response) => {
2
  console.log('request came in');
3
  console.log(request.file);
4
​
5
  const sqlQuery = 'INSERT INTO recipes (label, photo) VALUES ($1, $2)';
6
  // get the photo column value from request.file
7
  const values = [request.body.label, request.file.filename];
8
​
9
  // Query using pg.Pool instead of pg.Client
10
  pool.query(sqlQuery, values, (error, result) => {
11
    if (error) {
12
      console.log('Error executing query', error.stack);
13
      response.status(503).send(error.message);
14
      return;
15
    }
16
    console.log(result.rows[0].label);
17
    response.send(result.rows);
18
  });
19
});
Copied!
Retrieve Uploaded Files in the App
To retrieve uploaded files, we will reference the uploaded file's location and use it to render the file. In this example because the uploaded file is an image, we will use the file's location to create an img tag in our EJS template. When the rendered HTML page loads client-side, it will make a request for the file via the img tag, and Express will serve the file.
Configure Express to Retrieve Static Files from uploads
Add express.static config to allow Express to serve files from the uploads folder. Express supports multiple express.static configs so we don't need to worry about conflicts with our other static file folders for files such as CSS.
1
app.use(express.static('uploads'));
Copied!
Test File Retrieval
To test this, try accessing the file directly from our server.
Request Template
Note that <UPLOADED_FILENAME> references the Multer-generated filename, not the filename on our local computers.
1
http://localhost:3000/<UPLOADED_FILENAME>
Copied!
Sample Request
The file name in this example is from the request.file example above.
1
http://localhost:3000/b6c6612935244b080fc2daa81ac1b3b8
Copied!
This should cause Express to send the file back. We should see it as a download.
Retrieve File Name using SQL in Express
This GET route's logic in index.js doesn't need to change. Our SQL query now returns the uploaded file's name because we stored it in the photo column in the recipes table.
index.js
1
app.get('/recipe/:id', (request, response) => {
2
  const sqlQuery = 'SELECT * FROM recipes WHERE id=$1;';
3
  const values = [request.params.id];
4
​
5
  // Query using pg.Pool instead of pg.Client
6
  pool.query(sqlQuery, values, (error, result) => {
7
    if (error) {
8
      console.log('Error executing query', error.stack);
9
      response.status(503).send(error.message);
10
      return;
11
    }
12
    console.log(result.rows[0].label);
13
    const data = {
14
      recipe: result.rows[0],
15
    };
16
    response.render('recipe', data);
17
  });
18
});
Copied!
Render File using File Name in EJS
Using the data retrieved from our DB, we render the recipe photo in our EJS template. We use the photo attribute of the recipe record to request the photo file in the uploads folder. photo contains the file name stored in the database.
recipe.ejs
1
<h3>Recipe Photo:</h3>
2
<p>
3
  <img src="/<%= recipe.photo %>" />
4
</p>
Copied!
Looking Ahead
In production applications we would rarely store file uploads on the same machine as our web application server (Express in our case). This is because our app servers have limited storage space, and storing file uploads for many users would quickly exhaust this space. In practice, file uploads are typically stored with a 3rd-party file hosting service such as AWS S3. We will learn this in a later module, and for now it is ok to store uploaded files locally on the app server.