react-gallery-uploader

Simple react-component for gallery uploading

Usage no npm install needed!

<script type="module">
  import reactGalleryUploader from 'https://cdn.skypack.dev/react-gallery-uploader';
</script>

README

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