react-upload-gallery
    TypeScript icon, indicating that this package has built-in type declarations

    0.4.0 • Public • Published

    React Upload Gallery

    npm license Build Status Open Issues

    A simple library that lets you create an image gallery, change the order of images, select the highlighted image, and customize it as you like.

    Installation

    npm install react-upload-gallery

    or:

    yarn add react-upload-gallery

    Demo

    CodeSandbox

    Usage

    import RUG from 'react-upload-gallery'
    
    // Add style manually
    import 'react-upload-gallery/dist/style.css' // or scss
    
    <RUG
      action="/api/upload" // upload route
      source={response => response.source} // response image source
    />

    ScreenShot

    Overview

    React Upload Gallery Prepares your images for the gallery on a React-based application. You can change the user interface by using the features available on all topics. Like re-creating video cards or writing browser APi requests privately. You can carry these features wherever you want thanks to ready-made components. <DragArea /> and <DropArea /> components header, footer and childnode can use the features you can use.

    With these you can determine the limit, size, maximum and minimum width and length of the images and prevent them from loading. You can display the appropriate message with two parameters, (key, rules), using onWarning to warn the blocked images.

    It can be used to inquire, display in modal, or display a message before it is deleted using features like onConfirmDelete, onDeleted, onClick, onSuccess.

    A library that will make things easier within the React framework for galleries used for an article, product or advertisement system in general. You can set rules, track errors, make a special request, and customize all features.

    Quick Referance

    Props

    Props Type Default Description
    action String empty Route to upload.
    className String empty Classes to add to the parent component.
    ssrSupport Bolean false With `true 'you can hide components on the service side.
    inOrder Bolean false With true adding can be done sequentially.
    autoUpload Bolean true Automatic upload after files are selected.
    send Object {} In addition to the base64 or blob URL data sent with the name data, different values can be sent.
    headers Object {} The data sent here is added to the Request Headers.
    style Object {} Added to the parent component as a style property
    accept Array ['jpg', 'jpeg', 'png', 'gif'] It will block files sent outside the types of the requested types
    initialState Array [] Existing data is added to the state of type `[{source: 'image url', name: '...'}].
    type String card There are two different display options available in the package. These are card and list
    sorting Bolean OR Object true You can turn off sorting or customize it using false. Sorting
    header Bolean OR Function true You can close or add a custom holder. function({ images, accept, uploadFiles, openDialogue })
    footer Bolean Or Function false function({ images, accept, uploadFiles, openDialogue })
    rules Object null size, limit, width, height features can be limited. Rules
    customRequest Function null You can customize the http request in your own way. CustomRequest
    source Function null Enter the url of the photo from the returned answer. (response) => response.url
    alias Function null Can include the data of the image to be loaded in the object and change its name. (response) => ({ id: response.imageID, slug: response.slug })
    onSuccess Function empty Return for uploaded image. function(image)
    onWarning Function empty Returns elements that do not conform to rules created in accept or rules. Rules
    onDeleted Function empty Returns the information of the deleted image. function(image)
    onChange Function empty Works when application starts and any state changes.
    onSortEnd Function empty It works when the position of pictures changes. function(images, { oldIndex, newIndex })
    onError Function empty Returns status, response if http request fails. function({ status, response, image })
    onClick Function empty Keeps clicks on the display card. onClick
    onConfirmDelete Function empty Attempting to delete the image will ask you one last time. onConfirmDelete

    Sorting

    Options for this feature can be found at this address. Sorting Props

    <RUG sorting={false} />
    // OR
    <RUG sorting={{ lockAxis: 'x' }} />

    Rules

    Images that do not comply with the specified rules will be eliminated during loading. Eliminated images will be returned in File format with the rules used in the type parameter.

    <RUG
      rules={{
        limit: 10,
        size: 20,
        width: {
          min: 1280,
          max: 1920,
        },
        height: {
          min: 720,
          max: 1080
        }
      }}
    
      accept={['jpg', 'jpeg']}
    
      onWarning={(type, rules) => {
        switch(type) {
          case 'accept':
            console.log(`Only ${rules.accept.join(', ')}`)
    
          case 'limit':
            console.log('limit <= ', rules.limit)
    
          case 'size':
            console.log('max size <= ', rules.size)
    
          case 'minWidth': case 'minHeight':
            console.log('Dimensions > ', `${rules.width.min}x${rules.height.min}`)
    
          case 'maxWidth': case 'maxHeight':
            console.log('Dimensions < ', `${rules.width.max}x${rules.height.max}`)
    
          default:
        }
      }}
    />

    CustomRequest

    With this feature, you can make the request more easily and how the values should be sent. The request in the package sends the data object received with blob as Content-Type: Application / json. In some cases, APIs may request data as a file or as a blob. In the case of a font that must be returned, the first parameter must be fixed as uid. onError is fully optional. Axios Example

    <RUG
      customRequest={({
        uid,
        file,
        data, // blob
        send,
        action,
        headers,
        onProgress,
        onSuccess,
        onError
      }) => {
        const response = { url: '...' }
    
        onProgress(uid, response)
        onSuccess(uid, response)
        onError(uid, {
          action,
          status,
          response
        })
    
        return {
          abort() {
            // for cancels the request
          }
        }
      }
    
      source={response => response.url}
    />

    onChange

    With this feature, any changes work when a new image is added, deleted, or changed in order. The package will run once when it first starts.

    <RUG
      onChange={(images) => {
        this.setState({ images }) // save current component
      }}
    />

    onClick

    You can use it to hold clicks on the image. For example, you can save the sent parameter in state and use select, remove, abort, refresh functions.

    <RUG
      onClick={(image) => this.setState({ image })}
    />

    onConfirmDelete

    A nice solution to check the image one last time before it is deleted. Returns true 'by default. This confirms the deletion. You can return Promise` data in the function.

    <RUG
      onConfirmDelete={(currentImage, images) => {
        return window.confirm('Are you sure you want to delete?')
      }}
    />

    OR Promise alternative.

    <RUG
      onConfirmDelete={(currentImage, images) => {
        return new Promise(resolve => {
          // For example, you can affect the loading screen here
          this.setState({ loading: true })
            
          setTimeout(() => resolve(true), 1000)
        })
      }}
    />

    Components

    import RUG, { DragArea, DropArea, Card, List } from 'react-upload-gallery'

    DragArea

    Thanks to the DragArea component you can import elements from the callback if you want to create a special image. To use the features [here] (https://github.com/clauderic/react-sortable-hoc#prop-types) you can look.

    <RUG>
      <DragArea {...props}>
      {
        (image) => <div>
          <img src={image.source} alt={image.name} />
        </div>
      }
      </DragArea>
    </RUG>

    DropArea

    You can use the DropArea component in header, footer or children properties. It will load the dropped images. You can check that the installation was attempted from the first parameter.

    <RUG
      header={({ openDialogue }) => (
        <DropArea>
        {
          (isDrag) => <div style={{ background: isDrag ? 'yellow' : '#fff' }}>
            <button onClick={openDialogue}>Open</button>
          </div>
        }
        </DropArea>
      )}
    />

    Card

    Not many customizable features are available for the Card component. But if you want, you can add a few different features within a div tag.

    <RUG>
      <DragArea>
      {
        (image) => (
          <div>
            <Card image={image} />
    
            <button onClick={image.select}>Select Active</button>
          </div>
        )
      }
      </DragArea>
    </RUG>

    List

    <RUG>
      <DragArea>
      {
        (image) => <List image={image} />
      }
      </DragArea>
    </RUG>

    Children

    You can design images in different formats using ReactNode or Function types. If you are using DragArea the images will be returned with callback already. But if you are not using Children for a Function by turning back all the pictures you can get. It is also possible to reach several options with the second parameter.

    <RUG>
    {
      (images) => (
        <div>
        {
          images.map(image => (
              <div>
                <img src={image.source} />
              </div>
            )
          })
        }
        </div>
      )
    }
    </RUG>

    OR

    <RUG>
      <DropArea> // handle drop files on list of images
      {
        (isDrag) => (
          <DragArea>
          {
            (image) => (
              <div>
                <img src={image.source} />
              </div>
            )
          }
          </DragArea>
        )
      }
      </DropArea>
    </RUG>

    Dependencies

    React Upload Gallery needs react-sortable-hoc package.

    Reporting Issues

    If believe you've found an issue, please report it along with any relevant details to reproduce it. The easiest way to do so is to fork the react-sortable-hoc basic setup sandbox on CodeSandbox:

    Asking for help

    Please do not use the issue tracker for personal support requests. Instead, use StackOverflow.

    Contributions

    Yes please! Feature requests / pull requests are welcome.

    Install

    npm i react-upload-gallery

    DownloadsWeekly Downloads

    691

    Version

    0.4.0

    License

    MIT

    Unpacked Size

    93.5 kB

    Total Files

    23

    Last publish

    Collaborators

    • minan