0.1.1 • Published 5 years ago

react-file-zone-manager v0.1.1

Weekly downloads
2
License
MIT
Repository
github
Last release
5 years ago

react-file-zone-manager

npm Build Status

Simple React component to manage files using drag'n'drop

Source code at https://github.com/stackchain/react-file-zone-manager.

Installation

Install it from npm and include it in your React build process (using Webpack, Browserify, etc).

npm install --save react-file-zone-manager

or:

yarn add react-file-zone-manager

Usage

You can:

import 'react-app-polyfill/ie11'
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import styled, { ThemeProvider } from 'styled-components'
import FileZoneManager from 'react-file-zone-manager'

const Container = styled.div`
  .centered {
    position: relative;
    top: 100px;
    margin: auto;
    height: 400px;
    width: 400px;
  }
`
const theme = {
 FileManager: {
   dropArea: {
     backgroundColor: "#efefef", // theme.palette.background.paper (mui)
     border: "2px dashed #5f5f5f"
   },
   item: {
     icon: {
       color: "#1a1a1a",
       size: {
         width: "50",
         height: "50"
       },
     },
     font: "500 11px arial,serif"
   }
 }
}
const willUpload = ({evt, file}) => {
  return new Promise((resolve, reject) => {
   setTimeout(() => {
      alert('Thanks for droping')
      resolve({evt, file})
   }, Math.random() * 3000 + 1000)
 })
}

 const willDelete = (name: string) => {
 return new Promise((resolve, reject) => {
   setTimeout(() => {
      alert('Wops deleted!')
      resolve(name)
   }, Math.random() * 3000 + 1000)
 })
}

const files = ["File 1.pdf", "File 2.pdf"]

const App: React.FC = () => {
  return (
    <ThemeProvider theme={theme}>
      <Container>
        <FileZoneManager loadedFiles={files} className={'centered'} theme={theme} willDelete={willDelete} willUpload={willUpload} />
      </Container>
    </ThemeProvider>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

IMPORTANT: Under the hood, this lib makes use of hooks, therefore, using it requires React >= 16.8.

License

MIT