react-gallery-uploader

Simple react-component for gallery uploading

Installation

yarn add react-gallery-uploader

Example

import React, { useState } from 'react'
import GalleryUploader from 'react-gallery-uploader'
import uuid from 'uuid'

const toBase64 = file => new Promise((resolve, reject) => {
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = () => resolve(reader.result);
  reader.onerror = error => reject(error);
});

const defaultImages = [
  {id:'first',url:'https://octodex.github.com/images/boxertocat_octodex.jpg'},
  {id:'second',url:'https://octodex.github.com/images/catstello.png'},
  {id:'third',url:'https://octodex.github.com/images/yaktocat.png'},
]

const UploadBlock = () => {
    const [images,setImages] = useState(defaultImages);
    const handleUploading = async (data) => {
    const newData = images.slice();
    for (let i in data){
      const base64Url = await toBase64(data[i]);
      newData.push({
        id: uuid(),
        url: base64Url
      })
    }
    setImages(newData);
  }

    const handleReordering = (data) => {
        setImages(data);
    }

    const handleItemClicking = (item) => {
        alert('Image click!');
  }
  
  return(
        <GalleryUploader
            images={images}
            onUpload={handleUploading}
            onReorder={handleReordering}
            onItemClick={handleItemClicking}
        />
    )
}

export default UploadBlock

Props

Prop	Description
images	Array of images
onUpload	Event on images uploading
onReorder	Event on images reordering
onItemClick	Event on image clicking

Roadmap

• add isSingle prop
• add noDrag prop
• implement icons
• add props for dropzone text
• add opportunity of custom dropzone
• add opportunity of custom styling
• use react-sortable-hoc
• implement image removing