README
react-managed-upload
A simple managed upload component based on filepond & react-filepond. The main change being the link between the server files and the UI. In addition, this library requires manual configuration of upload, download, and remove functions rather than trying to create a "one size fits all" generic server call. Because of this, you can use any HTTP library of your choice. We recommend axios!
Install
npm install --save react-managed-upload
Usage
See the /example directory for a full example with function parameters
import React, { Component } from "react";
import ReactManagedUpload from "react-managed-upload";
export default class App extends Component {
state = {
files: [],
readOnly: false,
allowMultiple: true
};
render() {
const { files, readOnly, allowMultiple } = this.state;
return (
<div>
<ReactManagedUpload
files={files}
readOnly={readOnly}
allowMultiple={allowMultiple}
upload={(localFile, onSuccess, onFailure) => {}}
download={(localFile) => {}}
remove={(localFile, getFiles) => {}}
/>
</div>
);
}
}
Props
files: PropTypes.arrayOf(
PropTypes.shape({
status: PropTypes.string,
serverInfo: PropTypes.object,
fileInfo: PropTypes.shape({
name: PropTypes.string,
size: PropTypes.number,
}),
localID: PropTypes.string,
})
),
allowMultiple: PropTypes.bool.isRequired,
readOnly: PropTypes.bool.isRequired,
upload: PropTypes.func,
download: PropTypes.func,
remove: PropTypes.func,
Prop function signatures
Upload
The upload prop function runs when the component receives a new file either, and runs once for each file. It provides the following parameters:
- localFile Object (file, status, serverInfo, fileInfo, and localID properties)
- onSuccess callback (expecting the localFile and response data as parameters)
- onFailure callback (expecitng the localFile as a parameter)
IMPORTANT: The upload function expects a return object with a stop property as an arrow function to abort the upload http request. Take a look at the example code on how to do this with an Axios cancel token.
In axios, aborting the upload hits the catch of the api call. Rather than throwing an error, we check for this before we call the onFailure callback.
upload={(localFile, onSuccess, onFailure) => {
api
.uploadFile(localfile.file)
.then((res) => {
onSuccess(localFile, res.data);
})
.catch((err) => {
if(err.message !== 'aborted upload') {
onFailure(localFile);
}
});
return {
stop: () => {
cancel('aborted upload');
}
}
}}
Download
The upload prop function runs when a user clicks on a file to download. It provides the following parameter:
- localFile Object (status, serverInfo, fileInfo, and localID properties)
You can access the serverInfo property to provide necessary server information for the request
download={(localFile) => {
api.get(`/files/${localFile.serverInfo.ID}`);
window.open(`http://localhost/files/${localFile.serverInfo.ID}`);
}}
Remove
The upload prop function runs when a user clicks on a file to download. It provides the following parameter:
- localFile Object (status, serverInfo, fileInfo, and localID properties)
- getFiles callback function. This can be used to get the current state of files after deleting the file from the server
You can access the serverInfo property on the localFile object to provide necessary server information for the request.
remove={(localFile, getFiles) => {
api
.delete(`/files/${localFile.serverInfo.ID}`)
.then(() => {
// get my state files
getFiles();
});
}}
License
MIT © cjellerHypur