I have trouble setting react-fine-uploader to work properly. I’m using react-fine-uploader low level components, and after I choose images thumbnails won’t show although I’ve done everything that docs say.
Here are versions I’m using
"fine-uploader": "^5.16.2",
"fine-uploader-wrappers": "^1.0.1",
"react-fine-uploader": "^1.1.1",
Here is my uploader setup:
const uploader = new FineUploaderTraditional({
options: {
chunking: {
enabled: isChunkedUpload,
},
request: {
method: 'POST',
endpoint: `${process.env.REACT_APP_API_URL}/api/images`,
customHeaders: { Authorization: `Bearer ${accessToken}` },
filenameParam: 'name',
uuidName: 'id',
totalFileSizeName: 'size',
inputName: 'image',
},
multiple: true,
callbacks: {
onComplete: (id: number, name: string, response: object) => {
console.log(id, name, response);
},
onSubmitted: (id: number, name: string) => {
const newSubmitedFiles = submitedfiles;
newSubmitedFiles.push(id);
setSubmittedFiles(newSubmitedFiles);
},
onError: (id: number, name: string, errorReason: string, xhr: any) => {
console.log(id, errorReason, xhr);
},
},
},
});
And here are components that I’m using:
<Dropzone
className="dropzone"
style={{ backgroundColor: isDragOver ? 'red' : '' }}
uploader={uploader}
multiple
onDropError={(errorCode: string, errorData: string) => console.log(errorCode,
errorData)}
>
<span className="dz-message">
Drop Files Here
</span>
{submitedfiles.length ? submitedfiles.map((id) => (
<div className="dz-preview" key={id}>
<Thumbnail
className="dz-image"
id={id}
fromServer={false}
uploader={uploader}
/>
<CancelButton id={id} uploader={uploader} />
</div>
)) : null}
</Dropzone>