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.
-
work on all platforms.
-
show list of picked files.
-
removable picked file
-
custom style.
-
use for all type files
This package supports both vue.js and nuxt.js, you are required to use one of these versions:
- react.js 18.x
To use the package you must first add the it to your dependencies in your project.
$ npm i draggable-browsefor 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.