Right now I'm using react-fine-uploader to send chunked files to the server. I was wondering if I could get the filename and uuid I uploaded as I needed them on another part of the component. I believe they are at the uploader object I created but I'm not sure how to get them.
I tried checking the uploader object but it seems to not be shown there.
const uploader = new FineUploaderTraditional({
options: {
chunking: {
enabled: true
},
deleteFile: {
enabled: true,
endpoint: `http://app.client.local/upload_delete`
},
request: {
endpoint: `http://app.client.local/upload_chunk`
},
retry: {
enableAuto: false
}
}
})
const isFileGone = status => {
return [
'canceled',
'deleted',
].indexOf(status) >= 0
}
class SVFineUploaderComponent extends Component {
constructor() {
super()
this.state = {
submittedFiles: []
}
}
componentDidMount() {
uploader.on('statusChange', (id, oldStatus, newStatus) => {
if (newStatus === 'submitted') {
const submittedFiles = this.state.submittedFiles
submittedFiles.push(id)
this.setState({ submittedFiles })
}
else if (isFileGone(newStatus)) {
const submittedFiles = this.state.submittedFiles
const indexToRemove = submittedFiles.indexOf(id)
submittedFiles.splice(indexToRemove, 1)
this.setState({ submittedFiles })
}
})
}
renderFileInput = () => {
return (
<Container style={{border: "3px dotted"}}>
<FileInput uploader={ uploader }>
<Dropzone uploader={ uploader }>
<span class="icon ion-upload">Attach or Drop Files Here</span>
</Dropzone>
</FileInput>
</Container>
);
}
renderFile = () => {
console.log(uploader)
return (
<Container style={{border: "3px dotted"}}>
{
this.state.submittedFiles.map(id => (
<React.Fragment>
<Filename key={ id } id={ id } uploader={ uploader } />
<DeleteButton key={ id } id={ id } uploader={ uploader } />
</React.Fragment>
))
}
</Container>
);
}
render() {
if (this.state.submittedFiles.length === 0)
return this.renderFileInput();
return this.renderFile();
}
}
export default SVFineUploaderComponent;
Apparently, you can use the methods given here by putting suffixing .methods
to uploader
before the method itself.
Examples
{console.log(uploader.methods.getName(id))}
{console.log(uploader.methods.getFile(id))}
{console.log(uploader.methods.getUuid(id))}