javascript - how to upload a file to digital ocean space using the AWS-SDK & MulterS3

Question

I'm trying to upload files to my digital ocean space from a webpage. I made my own nodeJS server to upload the file.

this is the index.js in my nodeJS server:

const express = require('express');
const cors = require('cors');
const morgan = require('morgan');
const storage = require('./storage');

const app = express();

//middleware
app.use(express.json());
app.use(
  cors({
    credentials: true,
    origin: true,
  })
);
app.use(morgan('tiny'));
app.disable('x-powered-by');

//routes

app.use('/storage', storage);

//error handler

app.use((err, req, res, next) => {
  if (err) {
    console.log(err.message);
    console.log(err.stack);
    return res.status(err || 500).json(err);
  }
});

const port = process.env.PORT || 8000;
app.listen(port, () => {
  console.log(`listening on port ${port}`);
});

I also made a storage.js where I configurated my bucket and use the AWS-SDK.

const express = require('express');
const Joi = require('joi');
const Boom = require('boom');
const uuidv4 = require('uuid/v4');
var multer = require('multer');
var multerS3 = require('multer-s3');
const AWS = require('aws-sdk');

const {
  S3_ACCES_KEY_ID,
  S3_SECRET_ACCES_KEY,
  S3_ENDPOINT,
  S3_BUCKET,
} = require('./config');

const router = express.Router();

const s3 = new AWS.S3({
  accessKeyId: S3_ACCES_KEY_ID,
  secretAccessKey: S3_SECRET_ACCES_KEY,
  endpoint: S3_ENDPOINT,
  s3ForcePathStyle: true,
  signatureVersion: 'v4',
});

const upload = multer({
  storage: multerS3({
    s3: s3,
    bucket: S3_BUCKET,
    metadata: (req, file, cb) => {
      cb(null, {
        originalname: file.originalname,
      });
    },
    contentType: function (req, file, cb) {
      cb(null, file.mimetype);
    },
    key: function (req, file, cb) {
      const uuid = uuidv4();
      const key = `${req.s3_key_prefix}${uuid}`;
      req.saved_files.push({
        originalname: file.originalname,
        mimetype: file.mimetype,
        encoding: file.encoding,
        key,
      });
      cb(null, key);
    },
  }),
});

const upload_auth = (req, res, next) => {
  try {
    req.s3_key_prefix = req.headers['x-path'].replace(/^/+/g, '');
  } catch (e) {
    return next(Boom.badImplementation('x-path header incorrect'));
  }

  req.saved_files = [];
  next();
};

router.post(
  '/upload',
  upload_auth,
  upload.array('files', 50),
  function (req, res) {
    res.json(req.saved_files);
  }
);

module.exports = router;

In the client, after the user submitted I run the following code to do the POST request. I use Axios for this.

const handleSubmit = async (e) => {
  e.preventDefault();

  const form_data = new FormData();
  form_data.append('files', image);
  const response = await axios.post(
    `http://localhost:8000/storage/upload`,
    form_data,
    {
      headers: {
        'Content-Type': 'multipart/form-data',
        'x-path': '/',
      },
      withCredentials: true,
    }
  );
 }

When I try to upload a file, I get a strange error that is not intelligible or actionable:

null
InvalidArgument: null
    at Request.extractError (/Users/sven/Documents/Devine/2020_2021/BAP/boilerplate/DURF_FINAL/server/node_modules/aws-sdk/lib/services/s3.js:700:35)
    at Request.callListeners (/Users/sven/Documents/Devine/2020_2021/BAP/boilerplate/DURF_FINAL/server/node_modules/aws-sdk/lib/sequential_executor.js:106:20)
    at Request.emit (/Users/sven/Documents/Devine/2020_2021/BAP/boilerplate/DURF_FINAL/server/node_modules/aws-sdk/lib/sequential_executor.js:78:10)
    at Request.emit (/Users/sven/Documents/Devine/2020_2021/BAP/boilerplate/DURF_FINAL/server/node_modules/aws-sdk/lib/request.js:688:14)
    at Request.transition (/Users/sven/Documents/Devine/2020_2021/BAP/boilerplate/DURF_FINAL/server/node_modules/aws-sdk/lib/request.js:22:10)
    at AcceptorStateMachine.runTo (/Users/sven/Documents/Devine/2020_2021/BAP/boilerplate/DURF_FINAL/server/node_modules/aws-sdk/lib/state_machine.js:14:12)
    at /Users/sven/Documents/Devine/2020_2021/BAP/boilerplate/DURF_FINAL/server/node_modules/aws-sdk/lib/state_machine.js:26:10
    at Request.<anonymous> (/Users/sven/Documents/Devine/2020_2021/BAP/boilerplate/DURF_FINAL/server/node_modules/aws-sdk/lib/request.js:38:9)
    at Request.<anonymous> (/Users/sven/Documents/Devine/2020_2021/BAP/boilerplate/DURF_FINAL/server/node_modules/aws-sdk/lib/request.js:690:12)
    at Request.callListeners (/Users/sven/Documents/Devine/2020_2021/BAP/boilerplate/DURF_FINAL/server/node_modules/aws-sdk/lib/sequential_executor.js:116:18)

Does anyone have an idea of what could go wrong? Is something wrong with my digital ocean settings? Or could it be something with the server?

question from:https://stackoverflow.com/questions/65919018/how-to-upload-a-file-to-digital-ocean-space-using-the-aws-sdk-multers3

Answer 1

Waitting for answers