Necesito adjuntar imagen desde el front, realizado con Angular 10, y enviarla a mi backend en Laravel 5.6, donde pretendo almacenarlas en el Storage. Tengo un ejemplo realizado con .blade.php, traté de trasladar la idea a Angular, pero no tuve éxito. Comparto lo que estoy haciendo para que me puedan ayuda.
Porción del .component.html
<div class="col-4">
<label for='imagen'><b>Imagen</b></label>
</div>
<div class="col-4"> <input type="file" name="imagen" (change)="handleImage($event)"> </div>
<button class="btn btn-secondary">Agregar Imagen</button>
Porción del .component.ts
handleImage(event:any):void{
this.image=event.target.files[0];
console.log('IMAGE',this.image);
this._procedimientosService.addImage(this.image).subscribe(
response=>{
console.log(response);
},
error=>{
console.log(<any>error);
}
);
}
service.ts (editado)
addImage(image: any):Observable<any>{
let form = new FormData();
form.append('image',image,'image');
form.append('Content-Type','multipart/form-data');
console.log(form);
let headers=new HttpHeaders().set('Content-Type','multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW');
return this._http.post(this.url+'add-image-post',form,{headers: headers});
}
Quiero comentar que tuve que agregar el boundary, lo saque de una consulta de stackoverflow en inglés, es la única forma que el archivo viaje, de lo contrario por consola tengo el siguiente error.
HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://localhost/api/public/api/add-image-post", ok: false, …}
error: {error: SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) at XMLHtt…, text: "<br />↵<b>Warning</b>: Missing boundary in multip…{},"cookies":{},"headers":{}},"status":"success"}"}
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message: "Http failure during parsing for http://localhost/api/public/api/add-image-post"
name: "HttpErrorResponse"
ok: false
status: 200
statusText: "OK"
url: "http://localhost/api/public/api/add-image-post"
__proto__: HttpResponseBase
En lavarel, en el controlador, trato de recibirla de la siguiente manera.
public function addImage(Request $request){
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: *');
$image=$request->file('image');
if($image){
$image_path=$image->getClientOriginalName();
\Storage::disk('images')->put($image_path, \File::get($image));
}
$data=array(
'imagen'=>$request,
'status'=>'success'
);
return response()->json($data,200);
}
El actual return que tiene, es solo para saber que lo que envío desde el front llega, nada más, luego hare el mapeo para guardarlas y levantarlas como corresponde.
Si hago una petición usando Postman, la imagen se guarda correctamente. Si envío la imagen desde el front-end, no recibo error, pero no se guarda.
Yo para saber si lo que envió desde el front, es lo mismo que recibe si lo hago del postman, comparé las respuestas, haciendo que me devuelva $request
Respuesta del postman
{
"imagen": {
"attributes": {},
"request": {},
"query": {},
"server": {},
"files": {},
"cookies": {},
"headers": {}
},
"status": "success"
}
No puedo acceder al contenido de los campos del objeto.
Respuesta desde el front, por consola del navegador.
Y aquí puedo ver que hay dentro de cada elemento.
Otro dato, si yo le pido desde el backend que me devuelva
$image=$request->file('image');
$data=array(
'imagen'=> $image,
'status'=>'success'
);
return response()->json($data,200);
Obtengo, si la envío desde el Postman,
{
"imagen": {},
"status": "success"
}
y desde el front
Por lo que me parece que tengo problemas al querer hacer
$image=$request->file('image');
cuando envío desde el front.
Espero de esta forma tener información para que puedan indicarme mejor como solucionar el problema, agradezco a Danilo, que va respondiendo mis preguntas y gracias a ello llegué hasta aquí.
Desde ya muchas gracias.