Multipart File upload in MERN Stack - node.js

Question

I am trying to Implement File upload feature using multipart to speed up upload for big file size.
I am unable to figure out why this is not working.
I am providing environment variables via console for now.
When I click send button, nothing happens. Both my servers are running fine (I am quite sure of them)
Issue:
1> when I do
axios.post(`http://localhost:4000`, data)
it throws an error. How shall I post my file (data) to backend?
Please point out the mistakes or things to be done.
Thanks in Advance!
Following is my FileUpload.js
import React, { Component } from 'react';
import axios from 'axios';
class FileUpload extends Component {
constructor (props) {
super(props);
this.submitFile = this.submitFile.bind(this);
this.fileInput = React.createRef();
}
submitFile = (event) => {
event.preventDefault();
var data = {
file: this.fileInput.current.files[0],
name: this.fileInput.current.files[0].name
};
axios.post(`http://localhost:4000`, data)
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
}
render() {
return (
<form onSubmit={this.submitFile}>
<input type='file' ref={this.fileInput} />
<button type='submit'>Send</button>
</form>
);
}
}
export default FileUpload;
My backend Node upload.js looks like following:
const multer = require('multer');
const multerS3 = require('multer-s3');
const AWS = require('aws-sdk');
var cred = require('../aws/config')
const AWS_SECRET_ACCESS = cred.access();
const AWS_ACCESS_KEY = cred.awskey();
// configure the keys for accessing AWS
AWS.config.update({
accessKeyId: process.env.AWS_SECRET_ACCESS,
secretAccessKey: process.env.AWS_ACCESS_KEY,
region: ''
});
// create S3 instance
const s3 = new AWS.S3();
const upload = multer({
storage: multerS3({
s3:s3,
bucket: '',
metadata: function (req, file, cb) {
cb(null, {fileName: 'uploadit'});
},
key: function (req, file, cb) {
cb(null, Date.now().toString())
}
})
})
module.exports = upload;

Answer 1

I always upload my photos on cloudinary.
You can save them locally too but on the long term I don't think this is a solution.
Backend
import express from 'express';
import webpackMiddleware from 'webpack-dev-middleware';
import webpack from 'webpack';
import webpackConfig from './webpack.config.js';
const app = express();
app.use(webpackMiddleware(webpack(webpackConfig)));
const port = process.env.PORT || 5000;
const cloudinary = require('cloudinary');
cloudinary.config({
cloud_name: 'your cloud name',
api_key: 'your api key',
api_secret: 'your api secret'
});
app.use(multipartMiddleware);
app.post('/images', multipartMiddleware, (req, res) => {
// file upload
let formData = Object.values(req.files);
let photoName = Object.keys(req.files);
cloudinary.uploader.upload(
formData[0].path,
function () { res.json('Uploaded!')},
{
public_id: photoName[0],
crop: 'scale',
width: 1200,
height: 400,
quality: 100,
tags: ['usedCars', 'usedCars']
}
)
});
app.listen(port, () => {
console.log('Your app on port:', port);
});
Frontend
// input type file
<input type="file"
accept="image/*"
onChange={evt => this.updateFileValue(evt)}
id="carPhoto"/>
// updating state
updateFileValue(evt) {
this.setState({
carPhoto: evt.target.files[0]
});
}
// post request
Apis.addCarsList(this.state).then((res) => {
const fd = new FormData();
const photoName = "a name for your photo, I usually get the mongoId as a photo name";
fd.append(res.data, this.state.carPhoto, photoName);
axios.post('/images', fd).then((res) => {
// do w/e
});
})

Answer 2

Apparently you're doing almost everything correct, except for one small detail that caught my attention.
your fileName is defined from files.name, which is undefined (try to console.log that to verify). What you need to do is give it a unique name, like for example a timestamp.
app.post('/upload', (request, response) => {
const form = new multiparty.Form();
form.parse(request, async (error, fields, files) => {
if (error) throw new Error(error);
try {
const path = files.file[0].path;
const buffer = fs.readFileSync(path);
const type = fileType(buffer);
const fileName = Date.now().toString();
const data = await uploadFile(buffer, fileName, type);
return response.status(200).send(data);
}
catch (error) {
return response.status(400).send(error);
}
});
});
Also make sure you're proxying your requests: https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development
Some additional debugging tricks, if you haven't tried that yet:
Try to create a simple get route in your server just to make sure that client and server are talking to each other.
Try to create first a get request to list your buckets to make sure that the communication with S3 works as expected: https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#listBuckets-property
I hope this helps!
Cheers!