Drop File is a simple react component that allows you select files from your computer.
With Drop File you can select multiple files from your computer or simply drag and drop them, and you also get an instant preview of the files selected from your computer.
run npm i dropfiles
The awesome thing about this library is that developers who uses cloudinary for files upload can also upload their files to cloudinary stress-free.
List of media files supported at the moment are :
- jpg
- jpeg
- png
- mp3
- mp4
- media urls
- audio/video
-
npm i dropfiles
create
.env file, add yourCLOUDINARY_UPLOAD_PRESET = your cloudinary presetandCLOUDINARY_UPLOAD_URL= your cloudinary upload url. -
webpack configuration
rules: [{
test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/,
loader: 'url-loader'
}],
node: {
fs: "empty"
}
}
To upload your files to cloudinary all you have to do is import the uploadToCloudinary function and have a state name files which should be an array, and call the uploadToCloudinary function and pass in the files as an argument. The uploadToCloudinary function returns a promise, the promise contains an array of urls for the files uploaded to cloudinary.
If you are attaching any token to your request in your application please make sure you clear them before calling the uploadToCloudinary function, else you get an error from Cloudinary
import React, Component from 'react'
import DropFile, { uploadToCloudinary } from 'dropfiles'
/**
* @description Example Component
*
* @className DropFile
* @extends {Component}
*/
class Example extends Component{
/**
* @description Creates an instance of DropFile.
*
* @method constructor
*
* @param {Object} props
*
* @memberof DropFile
*/
constructor(props){
super(props);
this.state = {
files: [],
showFilePreviewer: false,
}
}
uploadToCloudinary = async (event) => {
event.preventDefault()
this.setState({ fileUploading: true })
const { files } = this.state;
Reflect.deleteProperty(axios.defaults.headers.common, 'x-access-token');
const uploadedFiles = await uploadToCloudinary(files); // contains the urls of the uploaded files
this.setState({ fileUploading: false, files: [], uploadedFiles })
}
/**
*
*
* @returns {Jsx} Jsx
* @memberof DropFile
*/
render(){
return (
<div>
<button type="button" className="btn btn-primary"
data-toggle="modal" data-target="#exampleModalCenter"
>
Launch demo modal
</button>
<div className="modal fade"
id="exampleModalCenter" tabIndex="-1" role="dialog"
aria-labelledby="exampleModalCenterTitle" aria-hidden="true"
>
<div className="modal-dialog modal-dialog-centered" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="exampleModalLongTitle">
Upload Files
</h5>
<button type="button" className="close" data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div className="modal-body">
<form>
<DropFile that={this}/>
<button className = {
this.state.fileUploading ? 'fa fa-spinner' : ''
}
disabled = {this.state.fileUploading}
onClick= {this.uploadToCloudinary}
>
Upload
</button>
</form>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary"
data-dismiss="modal"
>
Close
</button>
<button type="button" className="btn btn-primary"
>
Save changes
</button>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default Example;
The Example Component is your own component, all you need to do is instantiate the Drop File Component and pass in the props that which is the this of the your own component and you're good to go. i.e <DropFile that={this} />
-
Who can contribute ?
Anyone -
How do I contribute?
Check the CONTRIBUTING.md file to see how to contribute. Thank you
Seun Agbeye SEUNAGBEYE
This is licensed for your use, modification and distribution under the MIT LICENSE
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent