3

Estoy tratando de subir una imagen desde un input file con la validacion que solo permita la extension de un img y no otras extensiones (como word,excel, etc). Cuando cargo primero en el input file que es el icono de camara, un archivo con extension (docx, etc) que no es img me muestra una validacion de formato no permitido que esta en un FormRequest; pero cuando cargo nuevamente un archivo que si es una imagen con su extension (.png,.jpg, etc) correcta me lanza el mensaje de validacion de que no tiene el formato correcto. ¿Como podria solucionar ese inconveniente de subir la imagen?.

Esta imagen es cuando cargo un archivo que no es img cuando valida bien.

introducir la descripción de la imagen aquí

Aqui es cuando vuelvo a cargar el archivo que si es una imagen e indica que no es una imagen.

introducir la descripción de la imagen aquí

Adjunto codigo JS

Aqui creo el input File que tiene el icono de camara.

function selectFile() {
    const inputFile = document.createElement("input");
    inputFile.type = "file";
    inputFile.style.opacity = 0;
    inputFile.id = "file_input";
    inputFile.name = "file_input";
    inputFile.accept = "image/*";
    document.body.appendChild(inputFile);
    inputFile.onchange = (e) => {
        if (e.target.files) {
            nameFile.innerText = e.target.files[0].name;
        }
    };
    inputFile.click();
}

Este es el codigo donde en el status 422, me lanza la validacion:

function subir_photo() {
    let data = new FormData();

    let project_id = $('#project_id').val();
    data.append('file_input', $('#file_input')[0].files[0]);
    data.append('project_id', project_id);

    $.ajax({
        method: 'POST',
        url: '/upload',
        processData: false,
        contentType: false,
        mimeType: 'multipart/form-data',
        dataType: 'json',
        data: data,
        statusCode: {
            422: function (response) {               
                let errors = response.responseJSON.errors;
                console.log(errors['file_input']);
                for (let i = 0; i < errors['file_input'].length; i++) {
                    alert(errors['file_input'][i]);
                } 
                $('#nameFile').text('');                             
            },
            200: function (response) {
                console.log(response);
                Swal.fire(
                    'Bien hecho!',
                    response['message'],
                    'success'
                ).then(function () {
                    window.location = '/control';
                });

            },
            500: function () {
                console.log('Comuniquese con soporte');
            }
        }

    })

}

Este es el codigo de mi controller donde recupero el archivo enviado desde el input file:

public function upload(LoadProject $request){
        
        if ($request->file('file_input')) {
            $file = $request->file('file_input');
            $name = $file->getClientOriginalName();
            $valor = Storage::putFileAs('public/projects', $file, $name);            
            $url = str_replace('public/','storage/',$valor);  
            
            $project = Project::find($request->project_id);
            
            $project->update(['url_photo'  => $url]);            

            return response()->json(['message' => 'Se subió la imagen del radiador terminado']);
        }

    }

Este codigo es de mi formrequest:

public function rules()
    {
        return [
            'file_input'  => 'image|max:2048|mimes:jpeg,png,jpg',            
        ];        
    }

    public function attributes(){
        return [
            'file_input'     => 'foto del radiador',            
        ];

    }
5
  • Agrega el codigo de validación que hiciste en la clase LoadProject por favor Commented el 16 sept. 2023 a las 22:00
  • porloscerros, ya edite agregue el contenido del LoadProject que es formrequest Commented el 16 sept. 2023 a las 22:26
  • La parte de laravel se ve bien. Hace mucho que no uso jquery, pero el problema parece estar ahí. Fijate algun ejemplo en el sitio es.stackoverflow.com/questions/506496/… Commented el 16 sept. 2023 a las 23:17
  • El código si me permite subir mi imagen a una carpeta de mi proyecto siempre y cuando pruebo subiendo el archivo con extensión de imagen y guarda todo ok, pero cuando primero cargo un archivo que no es una imagen y vuelvo a intentar subir ahora una imagen ya me tira nuevamente el mensaje de validación como si no fuera el formato enviado. Commented el 17 sept. 2023 a las 1:45
  • fijate en que esta enviando por la peticion post usa las herramoentas del desarrollador para ver cuales valores estas enviando y asi podras determinar que esta sucediendom puede ser de javascript o cache del aconsulta
    – John
    Commented el 17 sept. 2023 a las 5:13

1 respuesta 1

1

Tú problema por lo que veo lo tienes en la función selectFile(), está crea un elemento input cada vez que se inicializa.

Cuando seleccionas un file de tipo .doc por ejemplo se crea un input con este valor, pero cuando quieres cambiar este archivo por uno de tipo img vuelves y creas un elemento de tipo input, como se ve en esta imagen:

introducir la descripción de la imagen aquí

Como tienes $('#file_input')[0].files[0]) este recupera el primer elemento siempre de todos los que se crearon, es por esto, que siempre se va a mandar un archivo de tipo .doc aunque lo cambies. Posiblemente si es esto el error, si subes dos imágenes que no contenga una de estas extensiones te dará el mismo error jpeg,png,jpg.

Para solucionar este problema deberás borrar el input cada vez que llames la función selectFile(). Ejemplo:

function selectFile() {
    $('#file_input').remove();
    const inputFile = document.createElement("input");
    inputFile.type = "file";
    inputFile.style.opacity = 0;
    inputFile.id = "file_input";
    inputFile.name = "file_input";
    inputFile.accept = "image/*";
    document.body.appendChild(inputFile);
    inputFile.onchange = (e) => {
        if (e.target.files) {
            nameFile.innerText = e.target.files[0].name;
        }
    };
    inputFile.click();
}

No te comento en la publicación porque aún no tengo 50 de reputación. Si quieres volver a contactarme hazlo por mi linkedin, así no tienes que ir a una publicación a comentarme linkedin

Me dejas saber si te funciona, suerte!

2
  • 1
    gracias, mechavarria si me soluciono el problema de la validacion, faltaba eliminar nuevamente el input file cada vez que se ejecutaba la funcion. Commented el 21 sept. 2023 a las 4:23
  • Saludos, que bueno que te sirvió. Suerte ! Commented el 21 sept. 2023 a las 13:14

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.