I have a React app that I'm trying to configure to enable users to upload images via a post form. The form has other fields in it.
The back end is here: https://github.com/JohnTarvis/a2backend The front end is here: https://github.com/JohnTarvis/a2frontend
The site is hosted here: https://anonsanonymous.netlify.app/
I'm attempting to incorporate code from this thread:Simple file upload to S3 using aws-sdk and Node/Express
specifically this:
const express = require('express'); //"^4.13.4"
const aws = require('aws-sdk'); //"^2.2.41"
const bodyParser = require('body-parser');
const multer = require('multer'); // "^1.3.0"
const multerS3 = require('multer-s3'); //"^2.7.0"
aws.config.update({
secretAccessKey: 'YOUR_ACCESS_SECRET_KEY',
accessKeyId: 'YOUR_ACCESS_KEY_ID',
region: 'us-east-1'
});
const app = express();
const s3 = new aws.S3();
app.use(bodyParser.json());
const upload = multer({
storage: multerS3({
s3: s3,
acl: 'public-read',
bucket: 'YOUR_BUCKET_NAME',
key: function (req, file, cb) {
console.log(file);
cb(null, file.originalname); //use Date.now() for unique file keys
}
})
});
//open http://localhost:3000/ in browser to see upload form
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
//used by upload form
app.post('/upload', upload.array('upl',1), (req, res, next) => {
res.send("Uploaded!");
});
app.listen(3000, () => {
console.log('Example app listening on port 3000!');
});
And I have something like this in my back end using router.js instead of app.js
router.post("/",upload.array('upload',1), async function (req, res, next) {
try {
const validator = jsonschema.validate(req.body, postNewSchema);
if (!validator.valid) {
const errs = validator.errors.map(e => e.stack);
throw new BadRequestError(errs);
}
const newPost = await Post.create(req.body);
return res.status(201).json({ newPost });
} catch (err) {
return next(err);
}
});
This is in my upload form on the front end:
<div className="form-group">
<label>Upload File</label>
<input
type="file"
name="upload"
value={formData.image}
onChange={(e) => setSelectedFile(e.target.files[0])}
/>
</div>
The post appears but the image does not upload. I'm thinking it could be a problem communicating the file between my front end and back end. The basic app that I copied from here uploads to my S3 but not the main one I'm working on. Is it my upload form or my express back end that is having the problem? I only posted part of my code cause it's several dozen files but if you need to see more, I'll add it.
