CODEWITHSUNDEEP
node.jsreactjslinuxexpressmulter
pydev
pydev

Reputation: 1

Unable to upload files to Node.js, Express backend using Multer

My application is running fine in my local windows environment; I am using multer to upload 2 image files from my React front-end to my Node.js & express back-end.

I set up my back-end on a personal linux server, so that my team could use it too, and I am using SSH tunneling to communicate with my back-end, however, my images are failing to upload. Multer does not give any errors, but the file uploading appears to stop working after the first image.

Front-end code:

<form action='/upload' method="post" encType="multipart/form-data" style={styles} onSubmit={handleSubmit}> 

const handleSubmit = (event) => {
event.preventDefault();
const data = new FormData(event.target);
console.log("Posting data...");
setLoading(true);
axios.post('http://localhost:5000/upload', data)

Back-end code:

// Set multerStorage options
const multerStorage = multer.diskStorage({
    destination: (req, file, cb) => {
        const dist = path.join(__dirname, "public", "images", "scannedCards/");
        cb(null, dist);
    },

    filename: (req, file, cb) => {
        console.log("File original name: ", file.originalname);
        console.log(req.headers);
        let filename = file.originalname.split('.')[0]
        filename = filename + ".png";
        console.log("File name: ", filename);
        cb(null, `${filename}`);
    }
});

const upload = multer({storage: multerStorage});


// Post request to /upload to handle detection of cards
router.post('/', upload.array('scan', 2), async (req, res) => {.....}

The console.log("File name: ", filename) runs for the first file, but never shows up for the second one.

What could possibly be the reason for this? Could this have anything to do with CORS? Is it because I am SSH Tunneling? The rest of the application is working fine. It is just the uploading file part that is messing up!

Upvotes: 0

Views: 521

Answers (1)

Brookswift
Brookswift

Reputation: 112

So, when you upload in the web form with the console open, do you see a CORS error? Do you see a network error?

I'd suggest starting with checking to see that the front end is submitting the data you expect in the network tab for both files. It could just be that there's an error in your front end on the second run.

Also, if you're able to see the first file on your sever, it's probably not a CORS issue.

I'd also suggest debugging your node server and stepping through your handling of the requests to see exactly where the break is happening. You can use chrome to debug your node server using the same chrome dev tools that you use to debug front end javascript: https://nodejs.org/en/docs/guides/debugging-getting-started/

Upvotes: 1

Related Questions