File Upload Validation

Introduction

In our last lesson, we significantly improved our file upload endpoint by implementing diskStorage for controlled filenames and fileFilter to validate file types. Our route can now correctly accept valid image files and reject invalid ones.

However, there's one critical scenario we haven't fully addressed: what happens when a user makes a request without attaching any file? Right now, our error handling is not specific enough to distinguish this case from an invalid file type.

This lesson will focus on adding that final piece of validation. You will learn to explicitly check for the absence of a file in the request and return a precise 400 Bad Request error, making our API more robust and user-friendly.

1. Differentiating Error Scenarios

Let's quickly review our current logic. In the fileFilter, when a file has an invalid type, we do two things:

Set a custom property: req.fileValidationError = 'Invalid file type...'
Tell Multer to reject the file: cb(null, false)

When Multer rejects a file, req.file becomes undefined.

Now, consider the "no file uploaded" scenario. In this case, Multer also sets req.file to undefined, but our fileFilter is never even executed, so req.fileValidationError is never set.

This gives us a clear way to distinguish the two error states:

req.fileValidationError is truthy: An invalid file type was uploaded.
req.fileValidationError is falsy AND req.file is falsy: No file was uploaded at all.

Our goal is to implement this logic in our route handler.

2. The Implementation Pattern

Handling a missing file is a common requirement. The standard pattern is to check for the existence of req.file directly in your route handler, after the Multer middleware has run.

To see this pattern in action, let's consult a practical guide.

Step-by-Step: File Uploads with Multer in Node.js & Express - Medium

The following article, 'Step-by-Step: File Uploads with Multer in Node.js & Express,' demonstrates several error handling techniques. We will focus on the most direct method.

Please read the section titled 'Manual handling' within the article. Pay close attention to the first if statement inside the try block: if (!req.file) { ... } \nThis is the exact check we need to implement. Notice how it returns a 400 status with a clear JSON error message, which is the best practice for this type of client error.

3. Your Turn: Update the Upload Route

Now, let's apply this precise validation logic to your routes/uploadRoutes.js file. You will update the route handler to correctly differentiate between the "invalid type" and "no file" errors.

Action Steps:

Open your routes/uploadRoutes.js file.
Replace the entire router.post(...) block with the updated code below. The changes are entirely within the route handler function.

// routes/uploadRoutes.js

// ... (keep your existing imports and Multer configuration for storage, fileFilter, etc.)

// Updated POST route with refined error handling
router.post('/', upload.single('productImage'), (req, res) => {
  // 1. First, check for the validation error set by our fileFilter.
  // This handles the case of an invalid file type.
  if (req.fileValidationError) {
    return res.status(400).json({ error: req.fileValidationError });
  }

  // 2. If there was no fileFilter error, we then check if a file was uploaded at all.
  // If req.file is undefined here, it means the client sent the request
  // without attaching a file to the 'productImage' field.
  if (!req.file) {
    return res.status(400).json({ error: 'No file was uploaded. Please select a file to upload.' });
  }
  
  // 3. If we get here, it means a file was successfully uploaded and passed all validation.
  res.status(200).json({
    message: 'File uploaded successfully!',
    fileInfo: req.file,
  });
});

module.exports = router;

Test Your Implementation

It's crucial to verify that all three scenarios now work as expected. Restart your server and use Postman to test the POST /api/upload endpoint.

Test Valid File: Upload a .jpg or .png file with the field name productImage.
- Expected: 200 OK status with a success message and file info.
Test Invalid File Type: Upload a .txt or .pdf file.
- Expected: 400 Bad Request status with the JSON error: {"error": "Invalid file type. Only JPEG and PNG are allowed."}.
Test No File Uploaded (New Test):
- In Postman, go to the Body -> form-data tab for your request.
- Ensure the key productImage is present.
- Uncheck the checkbox next to the productImage key. This simulates a form submission where the file input was left empty.
- Send the request.
- Expected: 400 Bad Request status with the new JSON error: {"error": "No file was uploaded. Please select a file to upload."}.

A visual guide showing how to simulate a 'no file' request in Postman by unchecking the form-data field.

Conclusion

Excellent work. You have now implemented a complete and robust validation flow for your file upload endpoint. By handling success, invalid file types, and missing files as distinct cases, your API is more reliable and provides clearer feedback to clients.

Key Takeaways:

The absence of a file in a Multer request is identified by checking if req.file is undefined.
You can differentiate between a rejected file (e.g., wrong type) and a missing file by using a custom property on the req object (like req.fileValidationError) set within the fileFilter.
The order of checks in your route handler is important: check for the more specific error (invalid type) before the more general one (missing file).
Always return a 400 Bad Request status for client-side errors like missing or invalid files.

Next Up:

Our upload endpoint is now fully functional and validated. The final step is to ensure it remains that way by creating an automated test. In the next lesson, you will write an integration test for this endpoint using Jest and Supertest, learning how to use the .attach() method to simulate file uploads in your test code.

Recommended resources