CODEWITHSUNDEEP
dropzone.jsdropzone
Angel Miladinov
Angel Miladinov

Reputation: 1655

Dropzone multiple file upload uploads 2 files at a time

I have the following code

HTML

<form action="{{ route('documents.store') }}" method="POST" class="kt-form kt-form--label-right">
    @csrf
    <div class="kt-portlet__body">
        <div class="form-group">
            <div class="dropzone dropzone-default dropzone-success" id="documents_upload" style="padding: 0;">
                <div class="dropzone-msg dz-message needsclick">
                    <h3 class="dropzone-msg-title">Drop files here</h3>
                </div>
            </div>
        </div>
    </div>
</form>

Javascript

<script type="text/javascript">
    $(document).ready(function() {
        $('#documents_upload').dropzone({
            url: "{{ route('documents.store') }}", // Set the url for your upload script location
            paramName: "documents", // The name that will be used to transfer the file
            maxFiles: 50,
            maxFilesize: 4, // MB
            addRemoveLinks: true,
            acceptedFiles: "application/msword, application/vnd.ms-excel, application/pdf, image/*, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, image/*",
            uploadMultiple: true,
            headers: {
                'X-CSRF-TOKEN': "{{ csrf_token() }}"
            },
            queuecomplete: function() {
                // notify about successful upload

                // window.location.replace("{{ route('client.documents.index') }}");
            }
        });
    });
</script>

The problem

It seems like this uploads the documents on chunks, 2 at a time. So if I want to upload 8 files it makes 4 requests, each containing 2 files. I want to upload all at once, is there any easy way I can do this ? This method causes many problems, because the user may upload a large amount of documents and when half of them are ready, he can leave/refresh the page, etc. and he will have to search which documents have been uploaded and which have not.

Upvotes: 0

Views: 492

Answers (1)

Danielle Lpz
Danielle Lpz

Reputation: 322

You need to tell the dropzone to do a parallel upload in the options of your dropzone, by the quantity you want.

<script type="text/javascript">
$(document).ready(function() {
    $('#documents_upload').dropzone({
        url: "{{ route('documents.store') }}", // Set the url for your upload script location
        paramName: "documents", // The name that will be used to transfer the file
        maxFiles: 50,
        maxFilesize: 4, // MB
        addRemoveLinks: true,
        acceptedFiles: "application/msword, application/vnd.ms-excel, application/pdf, image/*, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, image/*",
        parallelUploads:10,
        uploadMultiple: true,
        headers: {
            'X-CSRF-TOKEN': "{{ csrf_token() }}"
        },
        queuecomplete: function() {
            // notify about successful upload

            // window.location.replace("{{ route('client.documents.index') }}");
        }
    });
});

Let me know if it worked!!

Upvotes: 1

Related Questions