Ph0enixKM/Capture

The library gives you the ability to drag and drop files and get their contents on client-side!

File Capture

This package solves a file drag and drop problem on client side with ease!

Installation

$ npm i file-capture

All you have to do is to include capture.js script in your project

<script src="node_modules/file-capture/capture.js"></script>

Usage

Just initialize file capture object

let capture = new FileCapture()

And create a DOM element for file drop

<div class="file-capture"></div>

Now you can drag and drop files you want to be uploaded! In order to get file data which has been uploaded you can use getFiles method which returns a base64 of every uploaded file in one array

let data = capture.getFiles()

If you want Capture to research for newly created file-capture elements, you can use this method:

capture.update()

Configuration

Customization can be provided in a configuration object. Here is an example:

let capture = new FileCapture({
  types: ['image', 'audio', 'video', 'text', 'zip', 'application'],
  // These types are just an example... you can use any media type you want
  size: 5
  // Size is being given in megabytes (MB)
})

You can also create your own error behavior by editing error method of FileCapture instance.

capture.error = value => {
  console.error(`File ${value} is incorrect`)
  // value parameter can be equaled to either 'size' or 'type' depending on which one is incorrect
}

That's all for now... more features are coming soon...