React component for handling S3 file upload

Uploader.jsx

var React = require('react');
var Dropzone = require('react-dropzone');
var axios = require('axios');

exports = module.exports = React.createClass({
  _onDrop: function (files) {
    var file = files[0];

    axios.get(ENDPOINT_TO_GET_SIGNED_URL, {
      filename: file.name,
      filetype: file.type
    })
    .then(function (result) {
      var signedUrl = result.data.signedUrl;
      
      var options = {
        headers: {
          'Content-Type': file.type
        }
      };

      return axios.put(signedUrl, file, options);
    })
    .then(function (result) {
      console.log(result);
    })
    .catch(function (err) {
      console.log(err);
    });
  },
  render: function () {
    return (
      <Dropzone onDrop={ this._onDrop } size={ 150 }>
        <div>
          Drop some files here!
        </div>
      </Dropzone>
    );
  }
});

what should ENDPOINT_TO_GET_SIGNED_URL be?

@raptox did you figure out the ENDPOINT_TO_GET_SIGNED_URL??

@raptox and @anika35 ENDPOINT_TO_GET_SIGNED_URL is the URL you are sending the file for processing... mostly likely a PHP or Node server.

The ENDPOINT_TO_GET_SIGNED_URL is the endpoint (in your server) where you return the signed URL that will be used in the call at line #22.

Checkout this article by the author, it uses this gist.