Search code examples
javascriptjqueryjquery-file-uploaddropzonejsgrid

How to upload and display only one file in Dropzone.js and jsGrid?

I have a Dropzone control and a jsGrid control. Files that are dragged to the Dropzone are displayed in jsGrid. I want only one file to be uploaded and after it, there should be no option to upload files. Now it can be solved by the following approach.

Every time the change event is triggered on jsGrid, no. of rows in jsGrid are counted. Dropzone is enabled if the count is 0 and disabled if the count is 1. I can't seem to find the code for counting the no. of rows in jsGrid. Kindly help me with the code.

Also, let me know if there's another way to solve it.

Here's the screenshot of my form:

enter image description here

Thanks in advance.

Solution

  • I have solved the issue by using CSS to disable the Dropzone control. 

    .maxFilesReached {
        pointer-events: none;
        cursor: default;
        background-color: #ffd9d8
}

    This CSS class is added to the jsGrid loadData event upon success. 

    loadData: function (filter) {
                return $.ajax({
                    type: "POST",
                    url: "/Downloads/GetDownloadItems/" + DownloadId,
                    data: filter,
                    dataType: "json"
                }).done(function (response) {
                    debugger;
                    if (response.length == 1) { // disabling Dropzone control
                        $("#dropzoneForm").addClass('maxFilesReached');
                    }
                });
            }

    Similarly, the CSS class is removed upon the deleteItem event of jsGrid.

    deleteItem: function (item) {
                    return $.ajax({
                        type: "POST",
                        url: "/Downloads/DDownloadItem/" + item.Id,
                        dataType: "json"
                    }).done(function () {
                        // enabling Dropzone control
                        $("#dropzoneForm").removeClass('maxFilesReached');
                    });
                }

    I have also used the maxFiles property of Dropzone to prevent more than one uploads.

    P.S. jsGrid is kind of messy.