react-grid-uploader v1.0.2

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

customStyle Object

Response data structure

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

License

MIT