Dropzonejs Error upload attached file

[jesusprietoa]

When adding an attachment in an email, an error occurs when uploading the file (error 401 or 402). It is a random error because it does not always occur.

Steps to reproduce the behavior:

1. I drag or select the file that I want to attach.
2. Drop o acept the file selected
3. The file is attached but shows an error: [object Object]. The browser network shows status 401.
4. The trace does not reach success, it reaches an error

My code:

myDropzone = new window.Dropzone(document.body, { // Make the whole body a dropzone url: new Santander().calculateUrlServer('mailing'), // Set the url thumbnailWidth: 60, thumbnailHeight: 60, parallelUploads: 20, headers, previewTemplate, autoQueue: true, // Make sure the files aren't queued until manually added previewsContainer: '#previews', // Define the container to display the previews clickable: '.fileinput-button' // Define the element that should be used as click trigger to select files. })

myDropzone.on('addedfile', file => { // Hookup the start button file.previewElement.querySelector('.start').addEventListener('click', () => { myDropzone.enqueueFile(file) }) }) myDropzone.on('success', (file, path) => { uploads.push(path) })

myDropzone.on('error', (e, xhr, a) => { console.log('-------' + e + ' xhr ' + xhr + 'a ' + a) // eslint-disable-line no-console })

If I click on dropzone.min.js.1 it shows the message: "Cannot send this request because the XMLHttpRequest.readyState is not OPENED"

• Windows 10, 64 bits
• Browser Chrome Versión 91.0.4472.77 (Build oficial) (64 bits) and Microsoft Edge Versión 91.0.864.41 (Compilación oficial) (64 bits)

Thanks a lot!

[swampthang]

@jesusprietoa did you find a resolution to this? If so, I would greatly appreciate your posting it here. Thanks!

[jcanchor]

I am having the same issue. On my local server the dropzone executes perfectly with no errors. On my production server however, when I use the same dropzone, I get a 500 server error, and in sources I see dropzone.min.js with the message underscored in red: "Cannot send this request because the XMLHttpRequest.readyState is not OPENED"

I have multiple dropzones on my platform, some are working, but this one is giving this message. I am using Laravel 9 on Ubuntu 20.04.3 and PHP 8.0.2 - with dropzone-5.9.3

I looked in dropzone.min.js and see that XMLHttpRequest is initiated

function(e,t){var n,r=this,o=new XMLHttpRequest,a=c(e,!0);try{for(a.s();!(n=a.n()).done;)

then accepted

var l={Accept:"application/json","Cache-Control":"no-cache","X-Requested-With":"XMLHttpRequest"}

and if not found the error is triggered

{1==e.readyState?e.send(t):console.warn("Cannot send this request because the XMLHttpRequest.readyState is not OPENED.")}}

Laravel uses CSRF tokens and I verified that the token exists in headers at the top of page and the same token is included in parameters passed in the form of the dropzone.

Would the CSRF tokens cause a problem? I can exempt dropzone from CSRF if needed, but have not tested that yet. Just looking for what can cause XMLHttpRequest to fail.

[jcanchor]

So far this discussion was the most helpful one I have seen: https://stackoverflow.com/questions/8866761/xmlhttprequest-ajax-error

Is there a callback in the event the file hasn't finished loading? I am not loading large files, smaller than 1 MB.

[jcanchor]

I have 3 dropzones on the server - two are working, and only this one is failing. Will look at the three to see if I can see any difference.

[jcanchor]

After doing more digging and testing, I found this dropzone is working on other accounts in my platform just fine. So there must be some corruption or conflict I have not found yet, but it appears not to be dropzone so I am relieved to know that. I would like to mark this issue resolved.

Just found the issue. I changed permissions on the folder from 755 to 777. The error went away. This is a helpful list of issues. https://startutorial.com/view/move_uploaded_file-faq

[israel-oye]

After doing more digging and testing, I found this dropzone is working on other accounts in my platform just fine. So there must be some corruption or conflict I have not found yet, but it appears not to be dropzone so I am relieved to know that. I would like to mark this issue resolved.

Just found the issue. I changed permissions on the folder from 755 to 777. The error went away. This is a helpful list of issues. https://startutorial.com/view/move_uploaded_file-faq

I am experiencing the same issue and I checked the SO link you sent earlier in the thread. Funny thing was my dropzone was working in another project but when I try to do a chunk upload with the same dropzone config, it never completes. I've checked everywhere and the most common thing I can find is a CORS issue. I've still not gotten to the root of it and I've been frustrated.

key: "submitRequest",
                    value: function(e, t, n) {
                        1 == e.readyState ? e.send(t) : console.warn("Cannot send this request because the XMLHttpRequest.readyState is not OPENED.")
                    }

This is what is giving me such a headache and I think the XMLHTTP readyState is still set to 0.

[jcanchor]

I am experiencing the same issue and I checked the SO link you sent earlier in the thread. Funny thing was my dropzone was working in another project but when I try to do a chunk upload with the same dropzone config, it never completes. I've checked everywhere and the most common thing I can find is a CORS issue. I've still not gotten to the route of it and I've been frustrated.

When I look in Laravel at chunking documentation, the method is for use in chunking database queries, but not for uploading files. https://laravel.com/docs/master/queries#chunking-results

Two options I see is a plugin like pion/laravel-chunk-upload https://packagist.org/packages/pion/laravel-chunk-upload https://webdock.io/en/docs/how-guides/laravel-guides/laravel-chunked-upload-uploading-huge-files

Some other options including the pion plugin above are mentioned here https://laracasts.com/discuss/channels/laravel/how-to-chunk-large-file

Hope you find an answer with one of these.

[israel-oye]

Thank you @JCanchor

So I figured it out. I use Flask for my server backend. After so much digging and testing and trials, I figured Dropzone behaved that way because of how I arranged my backend. It was a server-side issue just like what you experienced. To be much clearer, the way I organized the if-else blocks to handle file chunks caused Dropzone to only upload the first chunk and stop. How that spiralled to prevent the XHR readyState from changing to 1 is interesting though. Thank you!

[jcanchor]

the way I organized the if-else blocks to handle file chunks caused Dropzone to only upload the first chunk and stop.

Congratulations! Nice when things become clear!