En mi proyecto, necesito que los usuarios tomen fotos con su teléfono y luego envíen estas fotos al servidor, ya configuré el campo de archivo para abrir la cámara, tome la foto y muestre el previo en el formulario, pero cuando envío los datos del formulario al servidor, no funciona correctamente, Se envían todos los datos de los demás campos, inclusive el nombre del archivo y la extensión llegan al controlador pero el contenido del archivo no (la imagen) y por lo tanto me genera el registro en la Base de Datos, pero en el directorio que debe guardarse el archivo no hay nada.
Cuando intenté hacer lo mismo desde la PC, subir fotos almacenadas en la PC, funcionó perfectamente.
Este es mi formulario
<form enctype="multipart/form-data" method="POST" id="form">
<input type="hidden" name="id" id="id" value="42">
<input type="hidden" name="autor" id="autor" value="Cliente/Contacto">
<div>
<div class="h2">Fotos Documentos</div>
<div>
<ul>
<li>Seleccione el tipo de foto que va a tomar.</li>
<li>Si se le solicita un permiso, por favor otorguelo.</li>
<li>Tome la foto y acepte.</li>
<li>Haga click en Grabar Foto y acepte.</li>
</ul>
</div>
<div>
<label class="mb-1">Tipo de Foto</label>
<select name="tipo_foto" id="tipo_foto">
<option selected="" disabled="">Haga click aquí</option>
<option value="d1">Documento 1</option>
<option value="d2">Documento 2</option>
<option value="d3">Documento 3</option>
</select>
</div>
<div>
<input type="file" name="imagen_upload" id="imagen_upload" capture="camera" accept="image/*" class="d-none">
<div class="img-muestra">
</div>
<div class="btn btn-primary w-100 btn-save">Guardar Foto</div>
</div>
</div>
</form>
Este es mi JS (jQuery)
var formData;
$(document).on('submit', '#form', function(e) {
e.preventDefault();
formData = new FormData(this);
return false;
});
$(document).on('click', '.btn-save', function(e) {
$('#form').trigger('submit');
var confirmation;
foto = $('[name="imagen_upload"]').val();
if (foto == null || foto == '') {
toastr.error('Debe tomar una foto');
return;
}
confirmation = confirm('¿Esta seguro que desea grabar esta foto?');
if (confirmation) {
$.post({
url: '{{ route('subirFoto') }}',
data: formData,
contentType: false,
processData: false,
success: function(data) {
alert(data);
if (data.status) {
toastr.success('Se grabo la foto correctamente');
} else {
toastr.error('No se pudo grabar la foto, por favor intente de nuevo');
}
},
error: function(data) {
alert('Hubo un error');
}
})
}
})
Esta la acción en el controlador
public function upload(Request $request)
{
$status = false;
// Eliminar fotos previas
$foto = Foto::whereInspeccionId($request->id)->whereTipo($request->tipo_foto)->first();
if ($foto) {
$foto->delete();
}
// Crear instacia de Foto
$foto = new Foto();
$foto->inspeccion_id = $request->id;
if (Auth::user()) {
$foto->autor = Auth::user()->id;
} else {
$foto->autor = $request->autor;
}
$foto->tipo = $request->tipo_foto;
$img = $request->file('imagen_upload');
$foto->asset = $img->getClientOriginalName();
$save = $foto->save();
// Cargar foto al servidor
$dir = public_path() . '/../images/inspecciones/' . $foto->inspeccion_id . '/';
$img->move($dir, $foto->asset);
if ($save) {
$status = true;
}
return response()->json(['status' => $status]);
}
Necesito que las fotos tomadas con el móvil se almacén en el servidor tal como sucede cuando envío una foto almacenada en la PC.