JavaScript and html multiple file field - I want to pass all the files

Scandal

Well-known member
I'm posting it on the general questions. ;)
I have the following javascript code, used for a plugin called heic2any (converts heic images to jpeg / its functionality is not interesting us for this problem).
On the testing board I run jQuery noConflict so this is the reason why it is written without $.
JavaScript:
    function convertHeicToJpg(input)
    {
        let fileInputElement = jQuery(input)[0];
        let container = new DataTransfer();
        for (var i = 0; i < jQuery(input).get(0).files.length; ++i)
        {
            var fileName = jQuery(input).get(0).files[i].name;
            var fileNameExt = fileName.substr(fileName.lastIndexOf('.') + 1);
            if(fileNameExt.toLowerCase() == "heic")
            {
                var blob = jQuery(input).get(0).files[i];
                heic2any({
                    blob: blob,
                    toType: "image/jpeg",
                })
                .then(function (resultBlob) {
                        var url = URL.createObjectURL(resultBlob);

                        let file = new File([resultBlob], "test.jpg",{type:"image/jpeg", lastModified:new Date().getTime()});
                        container.items.add(file);
                        fileInputElement.files = container.files;
                    })
                    .catch(function (x) {
                        console.log(x.code);
                        console.log(x.message);
                    });
            }         
        }
    }
    jQuery( document ).ready(function() {
       jQuery("input[type=file]").change(function() {
            convertHeicToJpg(this);
         });
    });
The issue: if I select 1 file, it works as expected. But the input type=file is multiple file selection. So we need to process all files and put them on fileInputElement.files = container.files.

I want to ask what modifications I need to do for this part of the code:
JavaScript:
let file = new File([resultBlob], "test.jpg",{type:"image/jpeg", lastModified:new Date().getTime()});
container.items.add(file);
fileInputElement.files = container.files;
... so as to pass/ made the trick for all the files of fileInputElement, since currently uploads/ take into account only the last selected file (only one file).
As a start I added for (var i = 0; i < jQuery(input).get(0).files.length; ++i) to process all files, but still not convert all multiple selected files.
I firmly believe that the problem exists on the above 3 lines where I need to pass all converted blobs.

Hey javascript experts? :D
 
Any idea? :)
I tried to put fileInputElement.files = container.files; outside the for loop, but it doesn't work.
 
Back
Top Bottom