0

tengo una api para un cms con propiedades o inmuebles y quiero colocarle ademas de algunos campos una imagen principal. Pero antes de registrar la propiedad, como subo la imagen con un nombre numerado y la asigno al registro nuevo? He colocado todo el html dentro de un formulario y lo proceso asi:

$("#fupForm").on('submit', function(e){
e.preventDefault();

var formData = new FormData(this);

formData.append('img', $('input[name=img]')[0].files[0]);

$.ajax({
    type: 'POST',
    url: 'http://localhost/cmsi/propiedad',
    data: formData,

    contentType: false,
    cache: false,
    processData:false,
    beforeSend: function(){
        $('.submitBtn').attr("disabled","disabled");
        $('#fupForm').css("opacity",".5");
    },
    success: function(msg){
        alert(msg);
        $('.statusMsg').html('');
        if(msg == 'ok'){
            $('#fupForm')[0].reset();
            $('.statusMsg').html('<span style="font-size:18px;color:#34A853">Form data submitted successfully.</span>');
        }else{
            $('.statusMsg').html('<span style="font-size:18px;color:#EA4335">Some problem occurred, please try again.</span>');
        }
        $('#fupForm').css("opacity","");
        $(".submitBtn").removeAttr("disabled");
    }
});
});

Los campos como nombre y demas llegan bien pero no me toma el campo imagen

public function subirImagen($imagen){
    if(!empty($_FILES['file']['name'])){
        $uploadedFile = '';
        if(!empty($_FILES["file"]["type"])){
            $fileName = time().'_'.$_FILES['file']['name'];
            $valid_extensions = array("jpeg", "jpg", "png");
            $temporary = explode(".", $_FILES["file"]["name"]);
            $file_extension = end($temporary);
            if((($_FILES["hard_file"]["type"] == "image/png") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/jpeg")) && in_array($file_extension, $valid_extensions)){
                $sourcePath = $_FILES['file']['tmp_name'];
                $targetPath = "img/".$fileName;
                if(move_uploaded_file($sourcePath,$targetPath)){
                    $uploadedFile = $fileName;
                }
            }
        }
        return $fileName;
  }
}
 public function addPropiedades(Request $req, Response $res){
    $nombreimagen=self::subirImagen($req->body->img);
    if(
        $this->PropiedadesModel->addPropiedades(
            $req->body->nombre, 
            $req->body->dc, 
            $req->body->dl, 
            $req->body->sitactual, 
            $req->body->cond, 
            $req->body->banos, 
            $req->body->dormitorios, 
            $req->body->ubi, 
            $req->body->ciudad, 
            $req->body->barrio, 
       
        )
    ){
        $res->status(200)->send([
            "message" => "The account was successfully created."
        ]);
    }else{
        $res->status(500)->send([
            "message" => "An error occurred while creating the account."
        ]);
    }
    
}

Actualmente en el post llamo a ese metodo. Por otro lado no se si esta bien colocar elmetodo que sube el archivo dentro del codigo de la api.

Esta linea da error $nombreimagen=self::subirImagen($req->body->img);

Undefined propery stdClass:$img

4
  • Yo no usuaria el método post(), usa AJAX(), junto a un FormData para hacer el envío
    – Minor
    Commented el 9 mar. 2023 a las 23:41
  • Ok y como obtengo cada campo luego en php del formdata.
    – Caruso
    Commented el 9 mar. 2023 a las 23:57
  • Acabo de editar la pregunta colocando una peticion ajax como me indicaste, pero no logro enviar el archivo completo para procesarlo.
    – Caruso
    Commented el 10 mar. 2023 a las 12:52
  • Con el método append incluyes los textos, primero tomas la imagen y la colocas en el FormData, posteriormete anexas con append el texto plano, mira tengo un proyecto algo así como lo solicitas, tratare de dejarlo lo más claro en respuesta, solo ojo.... Yo manejo el BLOB como registro en la base de datos y no como en alguna carpeta
    – Minor
    Commented el 10 mar. 2023 a las 19:54

3 respuestas 3

1

Mi ejemplo como respuesta esta con JQuery, talvez no es la mejor manera pero a mi me funciona como lo requería la empresa donde laboro.

EVENTO SUBMIT DEL FORMULARIO

    $('#formulario_registro_pago').submit( (e) => {
        e.preventDefault();
        let listadoComprobantes = consigueComprobantes();
        listadoComprobantes = consigueInformacionFormulario('formulario_registro_pago', listadoComprobantes);
        if (listadoComprobantes == false){
            return;
        }
        registroPago(listadoComprobantes);
    });

Función consigueComprobantes(), en este caso es la función para sustraer las imagenes que cargues en el formulario, recuerda que puede ser 1 o muchas imagenes

 function consigueComprobantes(){
     // Campo para imagen de comprobante de pago
     let imagenesComprobantes = $('#comprobante_pago')[0];
     // Obtenemos el listado de archivos en un array
     let arrayComprobantes = imagenesComprobantes.files;
     // Creamos un objeto FormData, que nos permitira enviar un formulario este objeto, ya tiene la propiedad multipart/form-data
     let data = new FormData();
     // Recorremos todo el array de archivos y lo vamos añadiendo all objeto data
     for (let i = 0; i < arrayComprobantes.length; i ++) {
         // Al objeto data, le pasamos clave,valor
         data.append(`archivo${i}`, arrayComprobantes[i])
     }
     return data;
 }

Función consigueInformacionFormulario, esta función anexa los campos que sean de texto

 function consigueInformacionFormulario(id, data){
     $(`#${id}`).find('input, select').each( (i, v) => {
         if (v.type !== 'file') {
             if (v.type === 'checkbox' && v.checked === true) {
                 data.append(v.name,'on');
             }else{
                 data.append(v.name,v.value);
             }
         }
     });
     return data;
 }

Posteriormente a esto, generas la petición AJAX

 function registroPago(data){
    $.ajax({
        url: '../models/registrar_pago.php',
        data: data,
        method: 'POST',
        dataType: 'JSON',
        contentType: false,
        processData: false,
        cache: false,
        beforeSend: () => {
            // Desactivando el botón para registro de pago y cambiando el texto a "Registrando pago"
            $('#registrar_pago').prop('disabled', true).val('Registrando pago');
            // Bloqueo de la interfaz de usuario
            $.blockUI({message: null});
        }
        // Ya aquí abajo continuas con el done, always y fail, que te mencionaba anteriormente

Para el backend en mi caso valide primero que se enviara una(s) imagen(es) con

// Aquí haces las validaciones de los campos, ya sea en base a una tabla catalogo, con isBlank para evitar campos vacios o lo que tu requieras

if ($_FILES) {
    // Aquí puedes hacer el inserte de los datos planos por asi decirlo

    $sentenciaPreparada = $conexionBaseDatos -> prepare(
    "INSERT INTO pagos (tus campos necesarios) 
    VALUES (tu información plana)");
    
    // Aquí puedes hacer tus inserts a la base de datos, de tus imagenes, puedes guardar la información del formulario en una tabla y las imagenes como tipo de datos BLOB en otra tabla haciendo una relación 1:M así como el uso de lastInsertId de PHP, no te recomiento en tipo de datos BLOB, te hará la tabla muy pesada si puedes es mejor en una carpeta en el servidor y en la tabla solo coloca la dirección de la imagen

   // Posteriormente puedes hacer el insert o guardado de las imagenes con
   foreach ($_FILES as $comprobantes) {
       // Insert de las imagenes
   }

} else {
    // No se cargo nada de imgs
}

Espero que esto te sirva, si tienes dudas dejalas en comentarios estaré al pendiente de ello

2
  • Buenas estoy probando el codigo..me falta leer las imagenes desde php, el caso es que tengo una api del lado del servidor, y no se como procesar el objeto data que se pasa en la peticion, es decir el array $comprobantes que mostras en php que propiedades tiene
    – Caruso
    Commented el 12 mar. 2023 a las 13:42
  • Solo estoy recorriendo el arreglo de imágenes con un "foreach indexado" en lugar de un "for" y dentro de ello estoy tomando en cuenta y haciendo validaciones de la información de cada imagen como [name], [type], [tmp_name], [error], [size]. ¿Dejaste el código de la API, verdad?
    – Minor
    Commented el 13 mar. 2023 a las 4:49
0

no entiendo donde está exactamente el problema, si me ciño al título me pillas con eso a mano por aquí

en el formulario tengo esto

<form onsubmit="return formSubmit(this)">

la funcion a la que llama

function formSubmit(form){
    var formData = new FormData(form);
            $.ajax({
                type:"POST",
                url:"https://example.com",
                processData: false,
                contentType: false,
                cache: false,
                data: formData,
                success: function(response) {
                    console.log(response);
                },
                error: function() {
                    console.log(response);
                }
            });
    return false;
 }

 

por el lado servidor, lo tratas como un formulario normal, tratando los campos como harías de costumbre, incluido el file

pero este comentario...

Pero antes de registrar la propiedad, como subo la imagen con un nombre numerado y la asigno al registro nuevo

aqui veo un error de metodo, el orden para hacerlo bien es este:

1-primero, registras la propiedad

2-con mysqli_insert_id obtienes el número autoincremental que se ha generado al crear ese registro, si tu tabla no tiene un campo autoincremental, mal, créalos siempre

3-y ya puedes usar ese número para renombrar todo lo que necesites

si es necesario divide la carga del formulario en 2 partes, primero creas el registro con toda la info, obtienes el número y luego de haber creado el registro trabajas con la imagen, si todo el trabajo con la imagen ha sucedido correctamente pues ya lo tendrías, si no, eliminas el registro creado

1
  • Si, de hecho o habia pensado dado que tengo que cargar varias imagenes de cada propiedad, solo que queria cargar la imagen principal en el formulario la primera vez.
    – Caruso
    Commented el 10 mar. 2023 a las 12:09
0

Bueno ya logre subir la imagen, renombrarla y registrarla en la base de datos..el codigo de @Minor me ayudo mucho. En mi Imagenescontroller.php en la api tengo:

public function subirImagen($imagen){
    $total_imagenes = count(glob('../cmsi/App/img/{*.jpg,*.jpeg,*.png}',GLOB_BRACE)) +1;
    
            $uploadedFile = '';
      
                $valid_extensions = array("jpeg", "jpg", "png");
                $temporary = explode(".", $imagen["name"]);
                $file_extension = end($temporary);
                $fileName = "imagen".$total_imagenes.".".$file_extension;
    
                if((($imagen["type"] == "image/png") || ($imagen["type"] == "image/jpg") || ($imagen["type"] == "image/jpeg")) && in_array($file_extension, $valid_extensions)){
                    $sourcePath = $imagen['tmp_name'];
                    $targetPath = "../cmsi/App/img/".$fileName;
                    if(move_uploaded_file($sourcePath,$targetPath)){
                        $uploadedFile = $fileName;
                    }
                
            
            return $fileName;
                
    
    
    }
}
public function addImagenes(Request $req, Response $res){
 
    if ($_FILES) {


    foreach ($_FILES as $comprobantes) {
         //obtenemos el nombre de la imagen
         $nombre=$this->subirImagen($comprobantes);
     
    
    
        $this->ImagenesModel->addImagenes(
            intval( $req->body->id), 
            $nombre, 
            'ss', 
            'ss', 
        );
    
}
}
}

Como verán la función subirImagen cuenta cuantas img hay en el directorio y asigna el numero siguiente como nombre del archivo. luego registro esa imagen en la base de datos, la propiedad a la que pertenece y su nombre que obtuve. Ahora lo que quiero es subir varias imagenes pero cada una con un nombre y descripcion pero lo voy a colocar en otra pregunta.

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.