react-gallery-uploader v0.1.0

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

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