Uploader. Selecting multiple files consecutively only uploads last file when using preview

[Juan Jiminez]

Hi SF,

Following up this issue https://www.syncfusion.com/forums/147065/uploader-selecting-multiple-files-consecutively-only-uploads-last-file-dropped-or-selected, when using the image preview sample https://ej2.syncfusion.com/aspnetmvc/Uploader/ImagePreview#/material the issue persists by setting "args.cancel = true;" on the select method.

See attached sample code, if you select a file with browse, then select a different file the same way and try to submit, only the last file is posted. This doesn;t happens if you select multiple files at once or if you remove "args.cancel = true;" from the select callback but that messes up the image preview.

Attachment: Multifile_select_92297290.zip

[Sevvandhi Nagulan]

Hi Juan, 

Greetings from Syncfusion support. 

We resolved the reported issue by removing args.cancel =true in the select event and removing the li element in the FileListRendering event. Please refer the below code snippet and sample for your reference. 

function onSelect(args) { 

        if (!document.getElementById('dropArea').querySelector('li')) { 

            this.filesData = []; 

        } 

        if (ej.base.isNullOrUndefined(document.getElementById('dropArea').querySelector('.e-upload-files'))) { 

            parentElement = ej.base.createElement('ul', { className: 'e-upload-files' }); 

            document.getElementsByClassName('e-upload')[0].appendChild(parentElement); 

        } 

        var validFiles = validateFiles(args, this.filesData); 

        if (validFiles.length === 0) { 

            args.cancel = true; 

            return; 

        } 

        for (var i = 0; i < validFiles.length; i++) { 

            formSelectedData(validFiles[i], this); 

        } 

        this.filesData = this.filesData.concat(validFiles); 

       // args.cancel = true; 

    } 

 

   function FileListRendering(args) { 

         

        setTimeout(function (e) { 

            args.element.remove(); 

        }, 30); 

    } 

 

<form id="form1" method="post"> 

    <div id='dropArea' style='height: auto; overflow: auto'> 

        <span id='drop'> Drop image (JPG, PNG) files here or <a rel='nofollow' href='' id='browse'><u>Browse</u></a> </span> 

        @Html.EJS().Uploader("UploadFiles").AutoUpload(false).Selected("onSelect").FileListRendering("FileListRendering").Render() 

    </div> 

    <div class="form-group" style="padding-top: 11px;"> 

        <input type="submit" value="submit" id="submit"> 

    </div> 

</form> 

 

Please find the sample below, 

Sample link:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/Uploader1469643237 

Please check the above sample and get back to us if you need further assistance. 

Regards, 

Sevvandhi N 

[Juan Jiminez]

Thanks Sevvandhi , it works as expected.

[Sevvandhi Nagulan]

Hi Juan, 

Thanks for the update. Please let us know if you need further assistance. 

Regards, 

Sevvandhi N