FileHoist
FileHoist is a simple React component for uploading files to a remote server using XMLHttpRequest. When the upload() function is called on the FileHoist component, a XMLHttpRequest will be made to upload the file to the address specified at uploadUrl.
Install
npm install --save filehoist
Usage
The following example is written in ES6 syntax, but ES5 should be very similar. Simply import filehoist into your component and render it. To open the file dialog, call the showDialog() function on the FileHoist component. To upload the chosen file, call the upload() function on the FileHoist component. The onUploadProgress callback will be called with the current progress and onUploadComplete callback will be called when the upload is complete.
import FileHoist from 'filehoist';
...
render() {
return (
...
<FileHoist ref='fileHoist'
uploadUrl='/api/file/upload'
onFileSelection={this.onFileSelection}
onUploadProgress={this.onUploadProgress}
onUploadComplete={this.onUploadComplete} />
...
<button onClick={this.onUploadBtnClick}>Upload File</button>
...
);
}
/**
* Handle file selection
*/
onFileSelection() {
// call FileHoist upload function
this.refs.fileHoist.upload();
}
/**
* Handle upload progress
* @param {number} loaded - amount uploaded out of total
* @param {number} total - total amount that will be uploaded
*/
onUploadProgress(loaded, total) {
// handle a progress event
}
/**
* Handle upload complete
*/
onUploadComplete() {
// handle upload complete event
}
/**
* Handle upload button click
*/
onUploadBtnClick() {
// call FileHoist showDialog function
this.refs.filehoist.showDialog();
}
Development
Install node modules and webpack globally
npm install
npm install -g webpack
Run webpack to build
webpack
Notes
Currently does not support multiple file selection.
Roadmap
Ability to send an authentication token- Mulitple File selection
- Ability to automatically render an input field