import SimpleFileInput from 'simple-file-input';

class YourReactComponentWhichIncludesAnUploader {
  state = {
    imageSrc: ''
  }

  handleChange = (newImageSrc) {
    this.setState({
      imageSrc: newImageSrc
    });
  }

  render() {
    return <div>
      <img
        src={this.state.imageSrc}
      />
      <SimpleFileInput
        type='image'
        signingRoute='/sign'
        onBlobLoad={(err, dataURI) => this.handleChange(dataURI)}
        onS3Load={(err, fileName) => this.handleChange(fileName)}
      />
    </div>;
  }
}

// attach environmental vars from ".env" file to process.env
require('dotenv').config();

import awsSdk from 'aws-sdk';
import simpleFileInput from 'simple-file-input/server';

// Configure AWS SDK (Using simple-file-input will depend on you having provided these three configuration properties)
awsSdk.config.update({
  accessKeyId: process.env.AWS_CLIENT_ID,
  secretAccessKey: process.env.AWS_SECRET,
  region: process.env.AWS_REGION
});

// initialize simple-file-input's S3 instance by passing in your current aws-sdk instance
simpleFileInput.initS3(awsSdk);

// set the name of the bucket to be used by S3
simpleFileInput.setBucket(process.env.AWS_BUCKET);

// importing Express and middlewate
import Express from 'express';
import bodyParser from 'body-parser';

// importing server-side helper promise for sending s3 signature to front end
import {signUploadToS3} from 'simple-file-input/server';

// create express instance, set request body parsing middleware
const app = Express();
app.use(bodyParser.json())); // parses JSON objects sent in request bodies

// receive the post request to '/sign' that will come from our client-side component here and respond with s3 signature
app.post('/sign', (req, res, next) =>
  signUploadToS3(req.body) // helper function handles creation of S3 signature for you
    .then(data => res.json(data))
    .catch(err => next(err))
);

static propTypes = {
  // styling
  containerClass: PropTypes.string    // sets className of the root <div/> element
  containerStyle: PropTypes.object,   // styling object passed to the root <div/> element
  className: PropTypes.string,        // sets className of the <label/> element
  style: PropTypes.object,            // styling object passed to the <label/> element
  inputClass: PropTypes.string,       // sets className of the <input/> element
  inputStyle: PropTypes.object,       // styling object passed to the <input/> element
  messageClass: PropTypes.string,     // sets className of the <span/> element containing the success/error message
  messageStyle: PropTypes.object,     // styling object passed to the <span/> element containing the success/error message

  // loading state classes
  pristineClass: PropTypes.string,    // sets className added to the root <label/> element prior to any uploads (defaults to "fa fa-upload")
  loadingClass: PropTypes.string,     // sets className added to the root <label/> element while in loading state (defaults to "fa fa-spinner fa-spin")
  successClass: PropTypes.string,     // sets className added to the root <label/> element upon loading success (defaults to "fa fa-thumbs-o-up")
  failureClass: PropTypes.string,     // sets className added to the root <label/> element upon loading failure (defaults to "fa fa-thumbs-down")

  // initial loading state
  initialLoadState: PropTypes.string.oneOf(['pristing', 'loading', 'success', 'failure']), // sets the initial state of the loading element (only determines which of the classes will be added at the beginning, "pristine" by default)

  // helps smooth aesthetic
  minLoadTime: PropTypes.number,    // sets the minimum amount of time the loading status will be displayed (in milliseconds), used to prevent flashing between status icons/classes for really quick uploads, 125 by default

  // max file size (in bytes)
  maxSize: PropTypes.number,          // sets the maximum file upload size (in bytes), default is 100000000 (100 MB)

  // triggered when blob is loaded if this prop is provided
  onBlobLoad: PropTypes.func,         // callback executed as soon as blob becomes available to front end, callback has the signature: function (error, dataURI) {...}

  // triggered when s3 upload is done, if this prop is provided
  onS3Load: PropTypes.func,           // callback executed as soon as file is uploaded to S3, callback has the signature: function (error, s3FileUrl) {...}
  // S3 signature getting route
  signingRoute: PropTypes.string,     // (Required if OnS3Load function is Supplied) determines the back end route that will get hit in order to get an S3 signature for uploading to S3 from front end
  // overrides uploaded file's name
  fileName: PropTypes.string,         // by default the uploaded file's name will be used as the name stored in S3, this can be overridden with this property, nonword characters will be removed from the a provided string to avoid URL issues (note that the generated unique-ifying string will still be appended unless you overwrite the 'fileAppend' property below with an empty string)
  // overrides default string appended to file name
  fileAppend: PropTypes.string,       // by default a string combining a timestamp and a shortid and will be appended to the file's name to ensure uniqueness, this can be overridden with a different string or empty string via this prop, nonword characters will be removed from the a provided string to avoid URL issues
  // specifies S3 folder path inside of bucket
  remoteFolder: PropTypes.string,     // optional prop used to specify a file path inside of your S3 bucket, e.g. '/folder1/folder2' will save your upload to '<S3 host route>/folder1/folder2/<file name>', the forward slash at the beginning of this string is not required

  // specifies acceptable file extensions
  accept: PropTypes.array,            // sets the file extensions which the file uploader will accept, e.g. ['pdf', 'jpeg']
  type: PropTypes.oneOf(['image', 'video', 'document', 'spreadsheet']), // abstraction for the 'accept' property, lets user specify a set of extensions via specifying the type of file, e.g. 'image', 'video'.  The map of file types to corresponding extensions is listed here:
  // const acceptableExtensionsMap = {
  //  image: ['png', 'jpeg', 'gif', 'jpg', 'svg'],
  //  video: ['mp4', 'webm'],
  //  document: ['pdf', 'doc', 'docx', 'pages'],
  //  spreadsheet: ['xls', 'xlsx', 'numbers', 'csv']
  // }

  // any other props provided will be applied to root <label/> component
}

import awsSdk from 'aws-sdk';
import {initS3} from 'simple-file-input/server';

awsSdk.config.update({
  accessKeyId: <YOUR_AWS_CLIENT_ID>,
  secretAccessKey: <YOUR_AWS_SECRET>,
  region: <YOUR_AWS_REGION>
});

initS3(awsSdk, <YOUR_AWS_SDK_S3_INSTANCE_OPTIONS_OBJECT); // after running this, 'simple-file-input/server' will have an initialized sdk S3 instance to use in other helper functions

new awsSdk.S3(<YOUR_AWS-SDK_S3_INSTANCE_OPTIONS_OBJECT>)

import {setBucket} from 'simple-file-input/server';

setBucket(<YOUR_AWS_BUCKET>); // after running this, 'simple-file-input/server' methods will use this bucket by default (can be overridden per method use with options object)

import awsSdk from 'aws-sdk';
import simpleFileInput from 'simple-file-input/server';

awsSdk.config.update({
  accessKeyId: <YOUR_AWS_CLIENT_ID>,
  secretAccessKey: <YOUR_AWS_SECRET>,
  region: <YOUR_AWS_REGION>
});

simpleFileInput.initS3(awsSdk);

// gives access to s3 instance created by 'initS3' and being used by library
const rawS3 = simpleFileInput.s3;

import awsSdk from 'aws-sdk';
import simpleFileInput from 'simple-file-input/server';

awsSdk.config.update({
  accessKeyId: <YOUR_AWS_CLIENT_ID>,
  secretAccessKey: <YOUR_AWS_SECRET>,
  region: <YOUR_AWS_REGION>
});

simpleFileInput.initS3(awsSdk);
simpleFileInput.setBucket(<YOUR_AWS_BUCKET>);

// gives access to configuration object being used by library with properties set by 'initS3' and 'setBucket'
const config = simpleFileInput.config;

{
  s3Bucket: <string>, // the s3 bucket set by 'setBucket' method, used as default bucket for helper functions
  hostUrl: <string>   // the base url which will be returned along with the 's3Bucket' string and file name to the front end to achieve the full s3 file path for bucket uploads
}

{
  name: <string>, // the name of file to be uploaded
  type: <string>  // mime type string, e.g. 'application/pdf', 'image/png'
}

{
  signed_request: <string>, // the url which the upload request can be made to from the front end
  url:            <string>  // the url which the uploaded file will be located at
}

// importing Express and middlewate
import Express from 'express';
import bodyParser from 'body-parser';

// importing server-side helper promise for sending s3 signature to front end
import {signUploadToS3} from 'simple-file-input/server';

// create express instance, set request body parsing middleware
const app = Express();
app.use(bodyParser.json())); // parses JSON objects sent in request bodies

// receive the post request to '/sign' that will come from our client-side component here and respond with s3 signature
app.post('/sign', (req, res, next) =>
  signUploadToS3(req.body) // helper function handles creation of S3 signature for you
    .then(data => res.json(data))
    .catch(err => next(err))
);

{
  name:      <string>,  // override name passed in by request, note that the file extension will not be added onto a name you provide here
  expires:   <number>,  // set the number of seconds before the signed url expires (defaults to 60)
  bucket:    <string>,  // set the bucket to upload to, overrides the s3 bucket set with the 'setBucket' method (you could also just use this option on every method instead of using 'setBucket' at set-up)
  isPrivate: <boolean>, // if set to true will make file reads by other AWS users require s3 authentication by setting ACL to 'authenticated-read', default is false which sets ACL to 'public-read', meaning all requests to the file's URL can view/download the uploaded file
  acl:       <string>,  // specify the ACL(Access Control List) for your upload (affects permissions of other AWS users, i.e. other apps with different AWS creds trying to access your bucket), see docs on ACLs here:
  http://docs.aws.amazon.com/AmazonS3/latest/dev/acl-overview.html#canned-acl
  ...otherOptions       // additional properties will be passed into the params for the 'getSignedUrl' method, these params correspond to 'putObject' as this is the operation we are signing for, params are documented here:
  http://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#putObject-property
}