Implementing HEIC to Image Upload Previews

Hello, all. I am building a simple blog that includes a multiple image upload feature. I have implemented a jquery image preview script on the files input tag. I soon realized that it does not work with Apple’s .heic files. I found a javascript called heic2any that will convert .heic to jpg, png or gif client-side.

I also found what seems to be a straight forward implementation of heic2any here at javascriptio:

check to see if file from input is .heic, then use library like so:

heic2any({
        // required: the HEIF blob file
        blob: file,
        // (optional) MIME type of the target file
        // it can be “image/jpeg”, “image/png” or “image/gif”
        // defaults to “image/png”
        toType: “image/jpeg”,
        // conversion quality
        // a number ranging from 0 to 1
        quality: 0.5
    })

I wrap this call in a promise and then pass the result to the file reader:

// uploadHEIC is a wrapper for heic2any
uploadHEIC(heicFile).then(**function** (heicToJpgResult) {
    **var** reader = **new** Filereader();
    reader.onload = **function** () {
    // Do what you want to file
    }
    reader.readAsArrayBuffer(heicToJpgResult);
}

How do I merge/implement the above into my current javascript below?

My current javascript:

$(function() {
// Multiple images preview with JavaScript
var previewImages = function(input, imgPreviewPlaceholder) {
    if (input.files) {
        var filesAmount = input.files.length;

        for (i = 0; i < filesAmount; i++) {
            var reader = new FileReader();

            reader.onload = function(event) {
            $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(imgPreviewPlaceholder);
            }
            reader.readAsDataURL(input.files[i]);
        }
    }
};
    $('#images').on('change', function() {
        previewImages(this, 'div.images-preview-div');
    });
});