@amodv/react-file-uploader

File uploader with drag and drop functionality using HTML 5 and ReactJs

Usage no npm install needed!

<script type="module">
  import amodvReactFileUploader from 'https://cdn.skypack.dev/@amodv/react-file-uploader';
</script>

README

@amodv/react-file-uploader

File uploader with drag and drop functionality using HTML 5 and ReactJs

NPM JavaScript Style Guide

Install

npm install --save @amodv/react-file-uploader

Usage

import React, { Component } from "react";

import FileUploader from "@amodv/react-file-uploader";
import "@amodv/react-file-uploader/dist/index.css";

class ExampleComponent extends Component {
  render() {
    // pass all requied props
    return <FileUploader {...props} />;
  }
}

Props

props description required default value
information add the information text within the box(droppable area) true
fileType allowed files to be uploaded true image/*
multiple allow multiple files to be uploaded true true
buttonLabel set your button label true Select many files
IconComponent A react component which will be rendered within the droppable area. Example- any could image within span tag false
enablePreview if enabled preview will be shown false
enableProgress if enabled it will show the progress bar. Note: Currently not supported false
removeIconClass you can pass your own class name for close icon. Ex. font-awesome true
existingFiles Array type which will be passed as a prop, if enablePreview is set to true then preview will be rendered from existingFiles array. true
onUploadFinish A function which will update the parent component by passing Array. true
onFileDelete A function which updates parent which file is deleted from the preview true

License

MIT © Amod Vardhan