react-grid-uploader

The grid uploader for Amazon S3 in ReactJS. Please see features in below:

1. Upload multiple files at same times by drag-n-drop (using react-dropzone)
2. Upload directly to S3 with signed url (using react-s3-uploader
3. Rotate/Delete.
4. View gallery in lightbox with react-image-lightbox

Installation

npm i --save react-grid-uploader
or
yarn add react-grid-uploader

Please file an issue if you have any trouble!

Usage

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import GridUploader from 'react-grid-uploader';

class App extends Component {

  onGetData = () => {
    console.log(this.gridContainer.getData());
    alert('check console to see the data structure');
  }

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to Grid Uploader</h2>
          <button onClick={this.onGetData}>Get Data</button>
        </div>
        <div>
          <GridUploader ref={(ref) => { this.gridContainer = ref; }}
            signingUrl="http://localhost:8000/s3/sign" />
        </div>
      </div>
    );
  }
}

export default App;

Props

Name | Type |Info ------ | ----- | ---- signingUrl | String | Your backend service that uses to generate signed url from AWS_ACCESS_KEY_ID & AWS_SECRET_ACCESS_KEY. See at for example service https://github.com/odysseyscience/react-s3-uploader onUploadFinish | Function | the callback function when upload completely. onUploadError | Function | the callback function when upload failed. onUploadProgress | Function | the callback function when upload in progress. onItemSelect | Function | the callback function when select an image item. onItemDelete | Function | the callback function when delete an image item. customStyle | Function | the custom style for grid uploader.

customStyle Object

Property Name | Type | Info ------ | ----- | ---- containerStyle | Object | style for grid container. Default is width: '100%', backgroundColor: '#333333', minHeight: '600px' nameStyle | Object | style of image name. descriptionStyle | Object | style of image description. imageBorderColor | String | border color of image in normal state. imageBorderActiveColor | String | border color of image in active state. iconContainerStyle | Object | style of icon container iconStyle | Object | style of icon progressColor | String | color of cirle progress. Default is #fbba00

Response data structure

To get grid data, we call getData() and receive array of image data. Each item has the structure as below:

Property Name | Type | Info ------ | ----- | ---- s3Data | Object | The uploaded response from AWS S3. description | String | Description of image. rotate | Integer | Rotage degree of image. Others | | Properties from react-dropzone.

License

MIT