Comments (3)
To complete my previous post, I did find a workaround to make my component works:
I added a componentWillUnmount to nullify the dropzone instance var:
componentWillUnmount() {
console.log('componentWillUnmount dropzone out', dropzone);
dropzone = null;
}
Then I added a test on this dropzone instance var in removedfile handler:
removedfile: (fileObj) => {
if (!dropzone) {
console.log('dzRemovedFile dropzone out', dropzone);
return;
}
console.log('dzRemovedFile', fileObj, dzConfig.params.uploadTimestamp);
if (fileObj.status === 'success') {
$.ajax({
url: '/upload',
...
from react-dropzone-component.
Hey, thanks for reporting! I think that I fixed your issue with the just released 0.6. Let me know if that helps!
from react-dropzone-component.
Hi Felix,
I have the issue with 0.6.0 .
My understanding of your hack is that you check some files are still in process to be uploaded. In my tests, all files are already uploaded.
The issue occurs only when this.dropzone.destroy() is called which will trigger the removedfile handler. I don't see the reason to call the removedfile handler at this stage.
Below the code of my component that uses react-dropzone-component:
import React from 'react';
import _ from 'lodash';
import DropzoneComponent from 'react-dropzone-component';
// https://www.npmjs.com/package/react-dropzone-component
import growl from '../UI/growl';
var dropzone;
var dzComponentConfig = {
allowedFiletypes: [
'.doc', '.jpg', '.mp3', '.pdf', '.txt'
],
showFiletypeIcon: true,
postUrl: '/upload'
};
var dzConfig = {
autoProcessQueue: true,
addRemoveLinks: true,
uploadMultiple: true,
maxFileSize: 10,
maxFiles: 10,
params: {
uploadTimestamp: ''
},
accept: (file, done) => {
var doneMessage = null;
_.find(dropzone.files, (value, key) => {
if (value.name === file.name && _.contains([
'success', 'queued'
], value.status)) {
doneMessage = 'Duplicated file, it won\'t be imported';
growl(doneMessage, {
type: 'danger'
});
return true;
}
});
done(doneMessage);
}
};
var dzEventHandlers = {
// Init callback to retrieve Dropzone instance
init: (DzObject) => {
dropzone = DzObject;
// console.log('dzInit', DzObject);
},
// All of these receive the event as first parameter:
drop: null,
dragstart: null,
dragend: null,
dragenter: null,
dragover: null,
dragleave: null,
// All of these receive the file as first parameter:
addedfile: null,
removedfile: (fileObj) => {
console.log('dzRemovedFile', fileObj, dzConfig.params.uploadTimestamp);
if (fileObj.status === 'success') {
$.ajax({
url: '/upload',
dataType: 'json',
type: 'DELETE',
data: {
fileName: fileObj.name,
uploadTimestamp: dzConfig.params.uploadTimestamp
},
success: (data) => {
// console.log('dzRemovedFile', 'success', data);
},
error: (xhr, status, err) => {
// console.error('dzRemovedFile', status, err.toString());
}
});
}
},
thumbnail: null,
error: null,
processing: null,
uploadprogress: null,
sending: null,
success: null,
complete: null,
canceled: null,
maxfilesreached: null,
maxfilesexceeded: null,
// All of these receive a list of files as first parameter
// and are only called if the uploadMultiple option
// in djsConfig is true:
processingmultiple: null,
sendingmultiple: null,
successmultiple: null,
completemultiple: null,
canceledmultiple: null,
// Special Events
totaluploadprogress: null,
reset: null,
queuecompleted: null
};
export default class InputDropzone extends React.Component {
constructor(props) {
super(props);
this.state = {
className: '',
errorMessage: '',
isValid: false
};
}
componentWillMount() {
dzConfig.params.uploadTimestamp = this.props.inputParams.uploadTimestamp;
dzComponentConfig.postUrl = '/upload?uploadTimestamp=' + this.props.inputParams.uploadTimestamp;
// console.log('componentWillMount', this.props.inputParams.uploadTimestamp, dzComponentConfig);
}
render() {
return (
<div className={'form-group ' + this.state.className}>
<label className='control-label' htmlFor={this.props.name.toLowerCase()}>{this.props.label}</label>
<span className='text-warning pull-right'>{this.state.errorMessage}</span>
<DropzoneComponent
config={dzComponentConfig}
djsConfig={dzConfig}
eventHandlers={dzEventHandlers}
name={this.props.name.toLowerCase()}
{...this.props}
/>
</div>
)
}
};
InputDropzone.propTypes = {
label: React.PropTypes.string,
name: React.PropTypes.string,
placeholder: React.PropTypes.string
};
InputDropzone.defaultProps = {
label: '',
name: '',
placeholder: ''
};
from react-dropzone-component.
Related Issues (20)
- How to restrict image upload size to 5MB
- Allow to upload only pdf files works on desktop but doesn't work on mobile phone's?
- What is the correct latest version? HOT 2
- React 16 migration (lifecycle methods) HOT 3
- Params do not works HOT 2
- How do I append file(s) to formData? HOT 1
- I need to set withCredentials property to true. How can I do that using provided API?
- How can we updated group permissions using PNP HOT 5
- Trigger success indicator (checkmark) appear when using 'no-url' option
- how get upload progress value in djsConfig
- findDOMNode is deprecated in StrictMode.
- Unable to set dynamic acceptedFiles in react-dropzone-component HOT 2
- next/image is not working with react-dropzone-component
- Pass more parameters in useDropzone
- how to set inital files HOT 2
- Upload .pptx file using Dropzone
- 'DropzoneComponent' does not have any construct or call signatures HOT 2
- Inappropriate file formats are attached on the android phone HOT 1
- Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
- Issue with disabling drag and drop functionality
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-dropzone-component.