React-image-sortable-uploader NPM

react-image-sortable-uploader

A package to upload and manage the order of pictures

Install

npm install --save react-image-sortable-uploader

Demo

Farmers Market Finder Demo

Usage

import React, { Component } from 'react';
import { SortableUploader } from 'react-image-sortable-uploader'
import 'react-image-sortable-uploader/dist/index.css'
import axios from "axios";

const PROP_ID = '4c705a9e-dd1a-463d-868f-6f3fcab32f6b'
const TOKEN = '13f0bc75-49a0-46e8-b6ed-2bac6b0d41e6'
const STATIC_URL = 'http://example.com'


class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      images: [],
      inProgress: false
    };
  }

  componentDidMount() {
    // Set the authorization token if neccesary , if not remove
    axios.defaults.headers.common['UserToken'] = TOKEN;
    
    // Get the pictures of an entity inorder to load inside gallery
    this._getPhotos();
  }

  _getPhotos = () => {
    const url = STATIC_URL+'/api/HotelPhotos/GalleryList?propId='+PROP_ID;

    this.setState({inProgress: true});
    axios.get(url)
      .then( response => {
        if (response.data && response.data.length){
          // Map the result to change it to prefered format
          response.data.map( (item) => {
            item.url = STATIC_URL+item.url;
          })
        }
        this.setState({images: response.data , inProgress: false} );
      })
      .catch( error =>  {
        this.setState({inProgress: false});
      });
  }

  _handleSort = (sortedData) => {
    const url = STATIC_URL+'/api/HotelPhotos/PhotoSort';

    if (sortedData && sortedData.length){
      let newData = [];
      // Map the sorted data to match with your API endpoint
      sortedData.map( (item , index) => {
          newData.push({
            ImageId: item.id,
            NewOrder: index
          });
      })

      // create form data or in your case generate a raw json acceptable by your API endpoint
      let formData = new FormData();
      formData.append('propId',PROP_ID);
      formData.append('Images', JSON.stringify(newData));

      this.setState({inProgress : true});
      
      // Call the API in order to save the new sorting
      axios.post(url , formData)
        .then( response => {
          this.setState({inProgress: false} );
        })
        .catch( error =>  {
          this.setState({inProgress: false});
        });
    }
  }

  render() {
    let { images , inProgress } = this.state;
    return (
      <div>
        <div style={{padding: 50}}>
          <SortableUploader
            Identifier={PROP_ID}
            header='Photo Gallery'
            title='Upload at least 1 photo'
            subTitle="You`ll also be able to upload more after registration"
            urlUpload='http://example.com/api/HotelPhotos/UploadPhoto'
            urlDelete='http://example.com/api/HotelPhotos/DeletePhoto'
            editMode={false}
            onEdit={(editData) => console.log(editData)}
            onSort={(sortedData) => this._handleSort(sortedData)}
            theme='blue'
            images={images}
            loading={inProgress}
          />
        </div>
      </div>
    );
  }

}

export default App;

Props

Prop	Type	Accepted values	Description
identifier	String/Int	555	Identifier to send with the upload request in order to upload multiple images for an specific entity (such as product_id)
header	String	Any string	string to display as the header of the component
title	String	Any string	string to display as the header of the component
subTitle	String	Any string	string to display as the header of the component
urlUpload	String URL	example: 'https://test.com/gallery/upload'	Url endpoint to upload image in server
urlDelete	String URL	example: 'https://test.com/gallery/remove'	Url endpoint to delete image in server
editMode	Boolean	true/false	enable edit button on each picture
onEdit	Function	(editData) => console.log(editData)	function to lunch on edit button clicked (can be customized as you like)
onSort	Function	(sortedData) => console.log(sortedData)	function to lunch on sort finished ( array of images with their new index in order to update it on the server or manipulate as you prefer)
theme	String	'blue/red'	change the the color theme of the uploader in order to suits your design
images	Array	Array of images objects	Array of images objects to set in gallery on load
loading	Boolean	true/false	State of gallery loading, It is used to show gallery are doing something like sorting etc.

Accepted images format

let images = [
  { id: '5555' , url: 'http://www.example.com/images/5555.jpg' },
  { id: '6666' , url: 'http://www.example.com/images/6666.jpg' },
]

Upload image

Sends a post Request to given "urlUpload" with "identifier" and image file as a formData , excpect to recieve Html status code 200 on success and othe such as 401 on failed.
There is also a prefabricated format for recieving messeges from the response from the API.

Request (formData) = {
    "image": (binary)
    "propId": '555' // The identifier prop
}

FailedResponse = {
   "ReportModel": {
       "Messages": [
           "Please try again",
           "images format is not supported."
       ]
   },
   "PhotoId": null
}

SuccessResponse = {
   "ReportModel": {
       "Messages": []
   },
   "PhotoId": '5555' // ID of the uploaded image, essential for deleting the image
}

Delete image

Sends a post Request to given "urlDelete" with "identifier" if available, excpect to recieve Html status code 200 on success and othe such as 401 on failed.

Request (formData) = {
    "ImageId": '666' // The id of the image
    "propId": '555' // The identifier prop
}