Hi folks,
I’m trying to use uppy on my software to upload hundred of files using transloadit plugin.
When I selected up to 14 files it works very well, but if I selected more files, like 20, it appears a bunch of errors:
“Access to XMLHttpRequest at ‘…://api2-mudhol.transloadit.com/resumable/files/**’ from origin ‘…://localhost:3000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”
“Access to fetch at ‘…://api2-mudhol.transloadit.com/assemblies/**’ from origin ‘…://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.”
“[Uppy] [23:10:20] Failed to upload IMG_9357.JPG This looks like a network error, the endpoint might be blocked by an internet provider or a firewall.
Source error: [TypeError: Failed to fetch]”
“GET …://api2-mudhol.transloadit.com/assemblies/**net::ERR_FAILED 429”
This is my code in React:
const uppy = new Uppy({
restrictions: {
allowedFileTypes: [‘image/’, 'video/’, ‘audio/*’, ‘.docx’, ‘.pdf’, ‘.doc’],
maxNumberOfFiles: 100,
minNumberOfFiles: 1,
},
autoProceed: false,
proudlyDisplayPoweredByUppy: false,
});
uppy.use(Transloadit, {
getAssemblyOptions (file) {
return ({
params: {
auth: { key: ‘’ },
template_id: '’,
},
fields: {
folder_name: albumId,
file_uuid: uuid(),
file_name: file.name,
},
});
},
limit: 1,
});
…
<DashboardModal
open={props.open}
onRequestClose={onCloseModal}
doneButtonHandler={onCloseModal}
uppy={uppy}
plugins={[
‘GoogleDrive’,
‘Dropbox’,
‘Instagram’,
‘Facebook’,
‘OneDrive’,
‘Webcam’,
‘ScreenCapture’,
]}
locale={{
strings: {
dropHereOr: ‘Drop here or %{browse}’,
browse: 'browse ',
},
}}
/>
I’m not understanding why sometimes I got these errors, and other times not.