Subida de imagen con AJAX tras conversión Heic2Any

Resumen y Solución para la Subida de Imágenes con AJAX Después de la Conversión Heic a JPG

En este artículo, se presenta el uso de la biblioteca Heic2Any.js para convertir archivos .heic a formato JPG antes de subirlos mediante AJAX. Se plantea un problema específico sobre cómo reemplazar el archivo .heic con el nuevo archivo JPG en el objeto FormData antes de enviar el formulario.

Problemas Identificados

1. Remover el archivo .heic del FormData: Se necesita eliminar el archivo .heic de la recopilación de datos del formulario y agregar el nuevo archivo JPG convertido.
2. Manejo de la llamada fetch: Se requiere saber qué valor se debe utilizar dentro de la llamada fetch para la conversión.

Solución Propuesta

A continuación se plantea una solución que aborda ambos problemas:

// Conversión de HEIC a JPG

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

    var fileextension = $(this).val().split('.').pop().toLowerCase();
    var form = $(this).closest(".image-upload-form"); // Almacena el formulario

    if (fileextension == 'heic') {
        var file = this.files[0]; // Obtiene el archivo .heic
        var formData = new FormData(form[0]); // Crea un nuevo FormData a partir del formulario

        // Convierte HEIC a JPG
        heic2any({
            blob: file,
            toType: "image/jpeg",
        }).then((conversionResult) => {
            var jpegFile = new File([conversionResult], 'converted.jpg', { type: 'image/jpeg' });
            formData.set('image', jpegFile); // Reemplaza el archivo .heic con el archivo JPG

            // Subir el formulario con el nuevo archivo JPG
            $.ajax({
                url: base_url + "upload-image",
                type: "POST",
                data: formData,
                dataType: 'json',
                mimeType:"multipart/form-data",
                contentType: false,
                cache: false,
                processData: false,
                success: function(response) {
                    if (response.message == 'error') {
                        // Mostrar error
                    } else {
                        var src = base_url + 'assets/uploads/' + response.filename;
                        form.find('.image-preview').append('<img src="' + src + '" />');
                    }
                },
                error: function(error) {
                    console.log(error);
                }
            });
        }).catch((e) => {
            console.log(e);
        });
    } else {
        // Aquí se maneja la subida normal de otros tipos de archivo
        $(this).closest(".image-upload-form").submit();
    }
});

Explicación de la Solución

1. Captura del Archivo: Se captura el archivo .heic utilizando this.files[0].
2. Creación de FormData: Se crea una nueva instancia de FormData con base en el formulario actual para permitir la manipulación antes de la subida.
3. Conversión y Reemplazo: Usamos heic2any para convertir la imagen y luego reemplazamos el archivo original en el FormData usando formData.set('image', jpegFile).
4. Subida mediante AJAX: Finalmente, se realiza la llamada AJAX con el nuevo FormData que ahora contiene el archivo JPG.

Este enfoque asegura que siempre se suba un archivo JPG válido, incluso si el usuario selecciona inicialmente un archivo .heic.