How to download after uploading a file using express and multer?

Question

I have uploaded the file in my backend filesystem using multer

My server is node and client is react.

I'm having trouble downloading and displaying the saved file on the client react

Whenever I do res.download(file) it just throws an error as connection refused on client side.

My code is as follows:

UserToUploadMapping.js

const mongoose = require("mongoose");

const UserToUploadMapping = new mongoose.Schema({
  userId: {
      type:String,
      required:true
  },
  file: {
    type: Object,
    required: true,
  },
  date: {
    type: Date,
    default: Date.now,
  },
});

module.exports = mongoose.model("UserToUploadMapping", UserToUploadMapping);

uploadVideo.js

const router = require("express").Router();
const multer = require('multer');
const UserToUploadMapping = require('../models/UserToUploadMapping')

let nameFile = ''
const storage = multer.diskStorage({
    destination:'./Videos',
    filename:(req,file,cb) => {
        console.log(file)
        nameFile = file.originalname + " "+ Date.now()
        cb(null, nameFile)
    }
})

const upload = multer({storage:storage})

router.post('/upload', upload.single('video'), async (req,res,next) => {
    console.log("object")
    const saveMapping = new UserToUploadMapping({
        userId:'123',
        file:req.file,
    })

    await saveMapping.save()

    res.send("Video uploaded")
})

router.get('/download', async(req,res,next) => {
    const x = await UserToUploadMapping.find()
    // res.send(x)
    res.download(x[0].path)
})

module.exports = router;

CLIENT

const fetchVideo = async () => {
  
    const resp = await axios.get(
      "http://localhost:5000/api/user/video/download"
    );
    console.log(resp)
  };

  return (
    <>
      <NavContainer />
      <div className={classes.Post}>
        <Input
          type="file"
          onChange={(e) => uploadVideos(e.target.files)}
          accept="video/mp4"
        />
        {/* <Button onClick={(e) => submitHandler(e)}>Upload</Button> */}
        <video></video>
      </div>
    </>
  );

Error

Answer 1

There is a few problems within the uploadVideo.js file :

• to get the path from the data, you need to use x[0].file.path

(based on how you save the file in the database)

const saveMapping = new UserToUploadMapping({
        userId:'123',
        file:req.file,
    })

• to avoid problems about where the file uploadVideo.js is and where we run the application, you should use an absolute path when saving files in the system.
• (small problem) your filename function will give filenames like this video.mp4 1622180824748. I think this is better "video-1622181268053.mp4" (we have the correct file extension)

You can refer to this code

const router = require("express").Router();
const multer = require('multer');
const UserToUploadMapping = require('../models/UserToUploadMapping')
const path = require('path');
const uploadFolder = path.join(__dirname, "Videos"); // use a variable to hold the value of upload folder

const storage = multer.diskStorage({
    destination: uploadFolder, // use it when upload
    filename: (req, file, cb) => {
        // nameFile = file.originalname + " "+ Date.now() // --> give "video.mp4 1622180824748"
        let [filename, extension] = file.originalname.split('.');
        let nameFile = filename + "-" + Date.now() + "." + extension; // --> give "video-1622181268053.mp4"
        cb(null, nameFile)
    }
})

const upload = multer({ storage: storage })

router.post('/upload', upload.single('video'), async (req, res, next) => {
    const saveMapping = new UserToUploadMapping({
        userId: '123',
        file: req.file,
    })

    await saveMapping.save()

    res.send("Video uploaded")
})

router.get('/download', async (req, res, next) => {
    const video = await UserToUploadMapping.find({});
    res.download(video[0].file.path); // video[0].file.path is the absolute path to the file
})

module.exports = router;

Answer 2

Your code indicates you are handling large files (videos). I would strongly recommend looking at separation of concerns, handling this as part of your other business logic is not recommended based on my experience. This can e.g. complicate firewall rules and DDOS protection when that is needed in the future.

As a minimum, move upload and download into its own server, e.g. 'files.yourappnamehere.com' so that you can handle the specifics separately from your business logic api.

If you run in the public cloud, I would strongly recommend looking at reusing blob upload/download functionality, letting your clients upload directly to blob storage and also handling downloads directly from blob storage, e.g. in Azure, AWS or GCP.

This will save you a lot of the implementation details of handling (very) large files, and also give "free" extensibility options such as events on file upload completion.

Answer 3

You are running 2 apps Frontend and Backend with difference ports (3000, 5000) so browsers block cross domain requests. On Express you must enable CORS to allow request from FrontEnd Url (http://localhost:3000).