Question

InvalidArgument: null / Uploading picture to digital ocean space from webpage gives me an error

Posted January 27, 2021 464 views
Node.jsDigitalOceanReactDigitalOcean Spaces

I’m trying to upload a picture to my Digital Ocean space. I made my own nodeJS server.

const {
  S3_ACCESS_KEY_ID,
  S3_SECRET_ACCESS_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,
      });
    },
    acl: 'public-read',
    contentType: function (req, file, cb) {
      cb(null, file.mimetype);
    },

    key: function (req, file, cb) {
      //generate unique file names for the server
      console.log(file);
      const uuid = uuidv4();
      const key = `${req.s3_key_prefix}${uuid}`;
      console.log(key);
      req.saved_files.push({
        originalname: file.originalname,
        mimetype: file.mimetype,
        encoding: file.encoding,
        key,
      });
      cb(null, key);
    },
  }),
});

const upload_auth = (req, res, next) => {
  //path to where the file will be uploaded
  try {
    req.s3_key_prefix = req.headers['x-path'].replace(/^\/+/g, '');
  } catch (e) {
    return next(Boom.badImplementation('x-path header incorrect'));
  }
  //all uploaded filesget pushed into this array
  //array is returned back to client once all uploads are completed
  req.saved_files = [];

  next();
};

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

module.exports = router;

On the client-side, after the user presses the submit button, I do a post request with Axios.

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': '/upload-folder/',
    },
    withCredentials: true,
  }
);

Sadly I run in the following error:

RangeError [ERR_HTTP_INVALID_STATUS_CODE]: Invalid status code: 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) {
  code: 'InvalidArgument',
  region: null,
  time: 2021-01-27T14:49:26.441Z,
  requestId: 'tx00000000000000816654e-0060117d77-279bd-ams3c',
  extendedRequestId: undefined,
  cfId: undefined,
  statusCode: 400,
  retryable: false,
  retryDelay: 87.53896917819553,
  storageErrors: []
}

Does anyone know what is going wrong?

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

×
Submit an Answer
1 answer

Hi there @svenvoskamp,

Have you tried following the steps from this step by step tutorial on how to upload files to Object Storage with Node.js:

https://www.digitalocean.com/community/tutorials/how-to-upload-a-file-to-object-storage-with-node-js

Regards,
Bobby

by Tania Rascia
Create a Node.js app to upload a file to your DigitalOcean Space