Multer not running when file is uploaded in Node.js with Express using FormData

Question

Multer not running when file is uploaded in Node.js with Express using FormData

I have been working on uploading a video file to a local folder using form, multer, express, and nodejs.

It seems that the video file successfully gets uploaded to the local folder each time I use the form. However, there is an issue with the code inside upload as it only executes occasionally, roughly once in every 5 attempts. For instance, the console.log('33'); within the app.post does not always appear. Surprisingly, the console.log('1') (located before upload) works consistently.

Below you can find the code for server.js:

var Express = require('express');
var multer = require('multer');
var mkdirp = require('mkdirp');
var app = Express();

var cors = require('cors');    
app.use(cors());
    
var Storage = ...
...

var upload = ...

app.post("/api", function(req, res) {
    console.log('1');

    upload(req, res, function(err) {
    console.log('33');
    if (err) {
             return res.end("Something went wrong!");
         }

    return res.status(200).end("File uploaded successfully!.");
  });

 });
...
...

Additionally, here is the snippet for app.js:

import React, { Component } from "react";
...
...

export default App;

Despite trying multiple suggestions from various sources, I am still unable to resolve this issue as I am relatively new to react/node js development.

node.js reactjs forms express multer

Answer 1

Answer №1

Consider using async and await for improved performance.

server.js

const express = require('express');
const multer = require('multer');
const mkdirp = require('mkdirp');
const app = express();

const cors = require('cors');    
app.use(cors());
    
const storage = multer.diskStorage({
    destination: function(req, file, cb) {
        const dir = './client/public/video/';
        mkdirp(dir, function(err) {
            if (err) {
                console.error(err);
            }
            cb(null, dir);
        });
        console.log("Upload: saved to " + dir + file.originalname);
    },
    filename: function(req, file, callback) {
        callback(null, file.fieldname + "_" + Date.now() + "_" + file.originalname);
    }
});

const upload = multer({
    storage: storage
}).single("file");


app.post("/api", function(req, res) {
    console.log('1');

    upload(req, res, function(err) {
        console.log('33');
        if (err) {
            return res.end("Something went wrong!");
        }

        return res.status(200).end("File uploaded successfully!");
    });

});

app.get("/", function(req, res) {
    console.log('1');

    return res.status(200).json({});
});

const server = app.listen(9900, function () {
    console.log('app listening at 9900');
});

App.js

import React, { Component } from "react";
import axios from "axios";

class App extends Component {
    state = {
        file: null
    };

    handleOnChange = e => this.setState({ [e.target.name]: e.target.value });

    handleOnUploadFile = e => this.setState({ file: e.target.files[0] });

    handleOnSubmit = async e => {
        e.preventDefault();
        const formData = new FormData();

        formData.append("file", this.state.file);
        
        await axios.post("http://localhost:9900/api", formData, {
            headers: {
                'accept': 'video/mp4',
                'Accept-Language': `en-US,en;q=0.8`,
                'Content-Type': `multipart/form-data; boundary=${formData._boundary}`,
            }  
        })
        .then(res => console.log(res.data))
        .catch(err => console.error(err));
    };

    render() {
        return (
            <>
                <h1>{"<b>hello</b>".bold()}</h1>
                <form>
                    <input type="file" encType="multipart/form-data"
                        name="file"
                        accept="video/mp4"
                        onChange={this.handleOnUploadFile}/>
                    
                    <button type="submit" className="btn btn-danger" onClick={this.handleOnSubmit}>
                        Submit
                    </button>
                </form>
            </>
        );
    }
}

export default App;

Answer 2

Consider using async and await for improved performance.

server.js

const express = require('express');
const multer = require('multer');
const mkdirp = require('mkdirp');
const app = express();

const cors = require('cors');    
app.use(cors());
    
const storage = multer.diskStorage({
    destination: function(req, file, cb) {
        const dir = './client/public/video/';
        mkdirp(dir, function(err) {
            if (err) {
                console.error(err);
            }
            cb(null, dir);
        });
        console.log("Upload: saved to " + dir + file.originalname);
    },
    filename: function(req, file, callback) {
        callback(null, file.fieldname + "_" + Date.now() + "_" + file.originalname);
    }
});

const upload = multer({
    storage: storage
}).single("file");


app.post("/api", function(req, res) {
    console.log('1');

    upload(req, res, function(err) {
        console.log('33');
        if (err) {
            return res.end("Something went wrong!");
        }

        return res.status(200).end("File uploaded successfully!");
    });

});

app.get("/", function(req, res) {
    console.log('1');

    return res.status(200).json({});
});

const server = app.listen(9900, function () {
    console.log('app listening at 9900');
});

App.js

import React, { Component } from "react";
import axios from "axios";

class App extends Component {
    state = {
        file: null
    };

    handleOnChange = e => this.setState({ [e.target.name]: e.target.value });

    handleOnUploadFile = e => this.setState({ file: e.target.files[0] });

    handleOnSubmit = async e => {
        e.preventDefault();
        const formData = new FormData();

        formData.append("file", this.state.file);
        
        await axios.post("http://localhost:9900/api", formData, {
            headers: {
                'accept': 'video/mp4',
                'Accept-Language': `en-US,en;q=0.8`,
                'Content-Type': `multipart/form-data; boundary=${formData._boundary}`,
            }  
        })
        .then(res => console.log(res.data))
        .catch(err => console.error(err));
    };

    render() {
        return (
            <>
                <h1>{"<b>hello</b>".bold()}</h1>
                <form>
                    <input type="file" encType="multipart/form-data"
                        name="file"
                        accept="video/mp4"
                        onChange={this.handleOnUploadFile}/>
                    
                    <button type="submit" className="btn btn-danger" onClick={this.handleOnSubmit}>
                        Submit
                    </button>
                </form>
            </>
        );
    }
}

export default App;

Answer 3

Answer №2

Consider using a promise to enhance your upload function:

var Express = require('express');
var multer = require('multer');
var mkdirp = require('mkdirp');
var app = Express();

var cors = require('cors');    
app.use(cors());
    
var Storage = multer.diskStorage({
        destination: function(req, file, cb) {
        var dir = './client/public/video/';
        mkdirp(dir, function(err) {
        if(err) {
            console.error(err);
        }
        cb(null, dir);
    });
    console.log("Upload: saved to " + dir + file.originalname);
    },
        filename: function(req, file, callback) {
        callback(null, file.fieldname + "_" + Date.now() + "_" + file.originalname);
    }
});

var upload = multer({
    storage: Storage
  }).single("file");


app.post("/api", function(req, res) {
    console.log('1');
    
    upload(req, res).then((file, err) => {
    console.log('33');
    if (err) {
             return res.end("Something went wrong!");
         }

    return res.status(200).end("File uploaded successfully!.");
    })



 });

var server = app.listen(9000, function () {
  console.log('app listening at 9000');
});

Another approach could involve encapsulating the upload process within a promise:

var Storage = multer.diskStorage({
return new Promise((resolve, reject) => {
    destination: function(req, file, cb) {
            var dir = './client/public/video/';
            mkdirp(dir, function(err) {
            if(err) {
               reject(err)
            }
            cb(null, dir);
        });
        console.log("Upload: saved to " + dir + file.originalname);
        },
            filename: function(req, file, callback) {
            resolve(callback(null, file.fieldname + "_" + Date.now() + "_" + file.originalname);)
        }
    })
    });

Answer 4

Consider using a promise to enhance your upload function:

var Express = require('express');
var multer = require('multer');
var mkdirp = require('mkdirp');
var app = Express();

var cors = require('cors');    
app.use(cors());
    
var Storage = multer.diskStorage({
        destination: function(req, file, cb) {
        var dir = './client/public/video/';
        mkdirp(dir, function(err) {
        if(err) {
            console.error(err);
        }
        cb(null, dir);
    });
    console.log("Upload: saved to " + dir + file.originalname);
    },
        filename: function(req, file, callback) {
        callback(null, file.fieldname + "_" + Date.now() + "_" + file.originalname);
    }
});

var upload = multer({
    storage: Storage
  }).single("file");


app.post("/api", function(req, res) {
    console.log('1');
    
    upload(req, res).then((file, err) => {
    console.log('33');
    if (err) {
             return res.end("Something went wrong!");
         }

    return res.status(200).end("File uploaded successfully!.");
    })



 });

var server = app.listen(9000, function () {
  console.log('app listening at 9000');
});

Another approach could involve encapsulating the upload process within a promise:

var Storage = multer.diskStorage({
return new Promise((resolve, reject) => {
    destination: function(req, file, cb) {
            var dir = './client/public/video/';
            mkdirp(dir, function(err) {
            if(err) {
               reject(err)
            }
            cb(null, dir);
        });
        console.log("Upload: saved to " + dir + file.originalname);
        },
            filename: function(req, file, callback) {
            resolve(callback(null, file.fieldname + "_" + Date.now() + "_" + file.originalname);)
        }
    })
    });

Multer not running when file is uploaded in Node.js with Express using FormData

Answer №1

Answer №2

Similar questions

Looking for the best JSON database library?

Implementing MouseEvents in Typescript React without having to pass them down to child elements

Understanding NPM Fundamentals and Installing Packages Locally

What is the best method for incorporating Redux data into a navigator function? Alternatively, is there an alternative approach for building a dynamic navigation stack using incoming data?

The password generated refuses to be saved

Dealing with CORs Issue: Authentication with Google Oauth in React and Express using PassportJs validation

How can I generate a list of JavaScript files to be included in a template for both production and development environments using Grunt?

What is the best method for updating a nested array within another nested array in an object using MongoDB?

npm local installation encounters initial failure

What is the best way to automatically assign a class attribute to all form widgets in Django?

Executing scripts during the build process in Next.js

While trying to set up a development server in Firebase, I mistakenly deleted my build folder

Include an Open OnClick event in the React/JSX script

Having trouble accessing WPA3 encrypted Wi-Fi networks with the node-wifi npm package

Encountering 503 errors with Heroku while making asynchronous API calls in my React application

None of the NPM commands are working due to an error stating: "TypeError: Class extends value undefined is not a constructor

Tips for sidestepping act() when making modifications to sub components

Having difficulty transitioning a function with a promise from JavaScript to TypeScript

Struggling to render images within a child component in a React application when passed as a prop from the parent component

What is the best way to group an array based on a dynamic key?