Draggable-browse NPM

React Draggable Browse

React Draggable Browse Library

React draggable browse, let user browse any file, with browse or draggable and work on all platform, and you can use it with your custom style and you have a lot of functionality to use it and easy to use.

Key Features

work on all platforms.
show list of picked files.
removable picked file
custom style.
use for all type files

Requirements

This package supports both vue.js and nuxt.js, you are required to use one of these versions:

react.js 18.x

Installation

To use the package you must first add the it to your dependencies in your project.

$ npm i draggable-browse

How to use

for use this package in any screen you should import the package and css file like this :

import { DragDropFile } from 'draggable-browse';
import './../node_modules/draggable-browse/dist/draggable-browse.cjs.development.css'

<DragDropFile
        hasBrowseButton={true}
        multiple={true}
        acceptDublicate={false}
        
        style={{
          color: 'red',
          minWidth: '14rem',
          width: '10rem',
          height: '14rem',
        }}
        accept="*"
        onFileSelected={listFile => {
          console.log('files', listFile);
        }}
        buttonText="browse file"
      />

Then you have to register the package in your project as well as import a necessary css file that comes with the package.