Search code examples
javascriptformsfile-uploaddropzone.jsdropzone

How to resend dropzone files after uploading the form and receiving server messages


I have a form that contains article information and images that I submit using the DropZone library. I have no problem with this library and it works very well, but when the submitted form had an error and I receive this error message on the client side via Ajax, the user fixes the problems and sends the form again, but unfortunately the form is not sent and no file is left. Not selected While the files are available in the preview and are sent to the server only once. What should I do to solve this problem? Please enter simple codes. Thanks

successmultiple function

               myDropzone.on("successmultiple", function(file,serverResponse) {

                    /* None of the uploaded files are available in Drop Zone here anymore,
                    ** and I had to delete the files so the user could choose again,
                    ** which would not be a good user experience.
                    ** Exactly what code should I write here so that there is no need to
                    ** re-select files from the user's system?
                    */
                    myDropzone.removeFile(file);

                    if(serverResponse.status)
                    {
                        // Success:: In this case, I have no problem
                        alert("Article saved successfully. Redirecting to the Articles page ...");
                        window.location.href = serverResponse.redirectedTo;
                    }
                    else
                    {
                        // Display errors received from the server to the user
                        alert("Please enter your name and resubmit the form.");
                    }
               });

Solution

  • I found the answers to my questions myself and i will put it below for you too.

    This code is written for Laravel blade file :

    <script>
        $("document").ready(()=>{
            var path = "{{ $path }}";
            var file = new File([path], "{{ $attach->file_name }}", {type: "{{ $attach->mime_type }}", lastModified: {{ $attach->updated_at}}})
            file['status'] = "queued";
            file['status'] = "queued";
            file['previewElement'] = "div.dz-preview.dz-image-preview";
            file['previewTemplate'] = "div.dz-preview.dz-image-preview";
            file['_removeLink'] = "a.dz-remove";
            file['webkitRelativePath'] = "";
            file['width'] = 500;
            file['height'] = 500;
            file['accepted'] = true;
            file['dataURL'] = path;
            file['upload'] = {
                bytesSent: 0 ,
                filename: "{{ $attach->file_name }}" ,
                progress: 0 ,
                total: {{ $attach->file_size }} ,
                uuid: "{{ md5($attach->id) }}" ,
            };
    
            myDropzone.emit("addedfile", file , path);
            myDropzone.emit("thumbnail", file , path);
            // myDropzone.emit("complete", itemInfo);
            // myDropzone.options.maxFiles = myDropzone.options.maxFiles - 1;
            myDropzone.files.push(file);
            console.log(file);
        });
    </script>