I am using the Heic2Any.js library to convert .heic files before uploading them. Once the file is converted I append it to a placeholder (#target) so I can see that the conversion worked, and it does. The image element has a JPG blob in it.

If the image is not .heic the form submits and it uploads as normal, using AJAX.

My question is, if it is a .heic file, how do I remove the .heic version from the FormData and replace it with the new JPG version, before submitting the form?

Also, what value do I put into the fetch call?

// HEIC to JPG Conversion

$('.image-input').on('change', function(e) {
    e.preventDefault();

    var fileextension = $(this).val().split('.').pop().toLowerCase();

    if (fileextension == 'heic') {
        fetch(????) 
            .then((res) => res.blob())
            .then((blob) => heic2any({
                blob,
                toType: "image/jpeg",
            }))
            .then((conversionResult) => {
                var url = URL.createObjectURL(conversionResult);
                $(".image-upload-form").find('.image-preview').append('<img src="' + url + '" />');
            })
            .catch((e) => {
                console.log(e);
            });
    } 

    // I want to add the new JPG to the form and then submit it to the AJAX uploader below. 
    $(this).closest(".image-upload-form").submit();
});

// AJAX uploader (this part works great already)

var form = $(this);

$.ajax({
    url: base_url + "upload-image",
    type: "POST",
    data:  new FormData(this),
    dataType: 'json',
    mimeType:"multipart/form-data",
    contentType: false,
    cache: false,
    processData: false,
    success: function(response) {
        if (response.message == 'error') {
            // show error
        } else {
            var src = base_url + 'assets/uploads/' + response.filename;
            form.find('.image-preview').append('<img src="' + src + '" />');
        }
    },
    error: function(error) {
      console.log(error);
    }
});