Friday, 28 May 2021

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

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

enter image description here



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

No comments:

Post a Comment