1

This article shows how to upload a file to Amazon S3 or minio using a form. I want to use the pre-signed POST URL policy method, since it appears to be the most secure.

However, I wish to upload a file programmatically to minio or S3 using a browser. In other words, I want to use javascript, not a form.

I'm a node user and familiar with superagent, which is very simple to use using the .field() and .attach() operation to set the form fields and to upload the file.

This works in node:

  let cdnAgent = superagent;
  let req = cdnAgent.post(r.data.pictureSet.uploadLink);
  _.each(uploadForm, function(value, key) {
    req.field(key, value);
  });
  // upload file via the created signed policy
  return req
  .set('Content-Type', 'application/octet-stream')
  .attach('file', 'test/data/test.jpg');
}).then(r => {

However, this does not work in a browser, .attach() is not supported, and when I worked around that, I ran into CORS issues since my javascript domain is a separate domain from my minio or S3 domain.

To answer this question I'd like to see a complete example using XMLHttpRequest, Axios, superagent, or Fetch, that works across domains.

I note there are some similar questions to this and some answers, but they all appear to be very outdated and technology has moved on. So I don't think this is a duplicate question.

Paul S
  • 892
  • 10
  • 25
  • 1
    Buckets support [custom CORS responses](http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html), so you should be able to work around that part of the issue. – Michael - sqlbot Mar 18 '17 at 13:17
  • CORS is on by default on minio, which is what I was testing against. But thanks for the Amazon CORS link, I'll probably need that at some point. – Paul S Mar 18 '17 at 17:47
  • Sorry about that, I had S3 on the brain and completely glossed over the multiple mentions of minio. – Michael - sqlbot Mar 18 '17 at 18:58
  • BTW Superagent does work, however it just provides a very confusing CORS message if you get anything wrong. Thread here with working code at the bottom. https://github.com/visionmedia/superagent/issues/1193 – Paul S Mar 18 '17 at 22:05

1 Answers1

2

https://github.com/harshavardhana/minio-js-browser-upload/ you can simply clone this repo and then run 

node presign-post-server.js

Visit browser at http://localhost:8080. Click on the upload file and just upload the selected file will be uploaded through presigned post policy style. [1]

Currently the example just points to https://play.minio.io:9000 and to uploads bucket. [2]

[1] https://github.com/harshavardhana/minio-js-browser-upload/blob/master/index-post.html

[2] https://github.com/harshavardhana/minio-js-browser-upload/blob/master/presign-post-server.js

Harshavardhana
  • 1,400
  • 8
  • 17
  • working example, love it!. Now just package it in a docker image :-). But seriously thanks, this is a canonical XMLHttpRequest example. SuperAgent answer in comments in OP. Now someone just needs to post the Axios answer and the next noob will be better off... – Paul S Mar 18 '17 at 22:07