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.
Aqui es cuando vuelvo a cargar el archivo que si es una imagen e indica que no es una imagen.
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',
];
}
LoadProject
por favor