0

Planteamiento: Estoy intentando precargar una imágen desde un botón e insertarla en mysql y una carpeta del proyecto usando sweetAlert2, php puro y jquery.

Descripción: La idea es cargar una imagen usando input file de sweetAlert, mostrar la imagen en un modal de pre-carga y si desea cargarla entonces la envié a una carpeta y se inserte en la bd.

Problema: Intento la pre-carga en un modal usando FileReader() pero al momento de cargar, php me devuelve el error que dejaré en el código (no recibe la imagen('fileToUpload')).

Comentario: "Sí se envía la foto sin el modal de precarga, se realiza el insert y guarda la imagen en carpeta. Entonces surge el problema, ya que necesito enviar desde el modal de pre-carga:

const reader = new FileReader(); reader.onload = (e) => { Swal.fire({Swal.fire({....

y no desde el modal del input file del aSweet" const { value: file } = await Swal.fire({.... //Editado

Agradezco la ayuda.

$('#upload').click(async function() {   
            const { value: file } = await Swal.fire({
                width:280,
                title: 'Select image',
                input: 'file',

            });
            if (file) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    Swal.fire({
                        width:200,
                        text: 'Your uploaded picture',
                        imageUrl: e.target.result,
                        showCancelButton:true,
                        confirmButtonText:'Cargar',
                        cancelButtonText:'Cancelar',
                        customClass:{
                            confirmButton:'btn btn-success',
                            cancelButton:'btn btn-danger',
                       },
                       buttonsStyling:false,
                  }).then((file)=>{ 
                    if (file.value) {
                        //idea: Al aceptar realice la petición y ejecute insert y envio de la imagen a la carpeta img(Debe ser desde la precarga y no desde el input file)
                        let formData = new FormData();
                        let file = $('.swal2-file')[0].files[0];//Esta clase es asignada por sAlert (la uso para obtener la imangen)
                        formData.append("fileToUpload",file);

                        $.ajax({
                            url: 'uploadPhoto.php',
                            type: 'POST',
                            data: formData,
                            processData:false,
                            contentType:false,
                        }).done(function(response) {
                            let photo = response;
                            console.log(response);
                        });
                    }
                });
            },
            reader.readAsDataURL(file);
        }
    });

PHP:

<?php
    include 'conexion.php';

    $name = $_FILES['fileToUpload']['name'];
    $type = $_FILES['fileToUpload']['type'];
    $size = $_FILES['fileToUpload']['size'];
    $tmp = $_FILES['fileToUpload']['tmp_name'];
    $upload = "customersPhoto/".$name;
        move_uploaded_file($tmp, "customersPhoto/".$name);


        $insert = mysqli_query($conexion, "INSERT INTO fotos(foto)VALUES('$upload')");
        if (!$insert) {
            echo "fallo la inserccion".$insert;
        }

?>

Botón HTML:

<button id="upload">cargar</button>

ERROR DEVUELTO PHP:

<br/>
<b>Notice</b>:  Undefined index: fileToUpload in ........<b><br />
<br/>
2
  • ¿Cuál es el problema entonces? Tu Comentario me dejó confundido.
    – A. Cedano
    el 17 mar. 2020 a las 22:58
  • @A.Cedano Edite el comentario. Necesito enviar desde el modal de pre-carga y no desde el modal del input file (de sweetAlert), que es lo que intento.
    – Daniel
    el 18 mar. 2020 a las 2:10

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.