Desde hace varios días vengo intentando enviar una imagen desde Angular para que la misma se almacene en el Storage de Laravel. Buscando encontré esta forma de hacerlo.
.component.html
<form (ngSubmit)="upload()">
<label>Nombre</label>
<input type="file" accept="image/*" (change)="seleccionarArchivo($event)">
<button type="submit" class="btn btn-primary">Subir Archivo</button>
</form>
.component.ts
import { Component, OnInit } from '@angular/core';
import {NgForm, ReactiveFormsModule} from '@angular/forms';
import {FormControl,FormGroup,Validators} from '@angular/forms';
import { Post} from 'src/app/models/post';
import { ProcedimientosService } from 'src/app/services/procedimientos.service';
@Component({
selector: 'app-nuevo',
templateUrl: './nuevo.component.html',
styleUrls: ['./nuevo.component.css']
})
export class NuevoComponent implements OnInit {
public archivo={
nombreArchivo:null,
base64textString:null
};
constructor(
private _procedimientosService: ProcedimientosService
) { }
public newPostForm = new FormGroup({
imagePost: new FormControl('',Validators.required)
})
ngOnInit(): void {
}
seleccionarArchivo(event){
var files=event.target.files;
var file=files[0];
this.archivo.nombreArchivo=file.name;
if(file && files) {
var reader = new FileReader();
reader.onload=this._handleReaderLoader.bind(this);
reader.readAsBinaryString(file);
}
}
_handleReaderLoader(readerEvent){
var binaryString=readerEvent.target.result;
this.archivo.base64textString=btoa(binaryString);
}
upload(){
console.log(this.archivo);
this._procedimientosService.uploadFile(this.archivo).subscribe(
response=>{
if(response.status="success")
{
console.log(response);
alert('Subido correctamente');
}
},
error=>{
console.log(<any>error)
}
);
}
}
.component.service.ts
uploadFile(archivo):Observable<any>{
let json=JSON.stringify(archivo);
let params = "json="+json;
console.log(params);
let headers=new HttpHeaders().set('Content-Type','application/x-www-form-urlencoded').set('Accept','*/*');
return this._http.post(this.url+'add-image-post-prueba',params,{headers: headers});
}
Controller.php
public function addImageprueba(Request $request){
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: *');
$json=$request->input('json',null);
$params_array=json_decode($json,true);
$archivo=$params_array['base64textString'];
$archivo=base64_decode($archivo);
$image_path=$params_array['nombreArchivo'];
\Storage::disk('images')->put($image_path, $archivo);
$data=array(
'image'=>$request,
'status'=>'success'
);
return response()->json($data,200);
}
El resultado de todo esto es, que el archivo se guarda, respetando el nombre, pero no puedo abrirlo como imagen. Si comparo el tamaño del archivo, antes y después de subir noto que se pierden algunos KB, (137 contra 140), y si en propiedades, voy a detalles, veo que no tiene los atributos de una imagen.
El otro dato es el siguiente. Como habrán visto, en el service.ts, hago un console.log
del params
, que voy a enviar. Si yo copio todo el json
, y lo pego en una petición postman, la imagen se guarda perfectamente. Entonces, al servicio llega lo que corresponde, por lo tanto deduzco que mi problema se podría encontrar a partir de la línea siguiente, donde configuro el header y hago la petición http.
Perdón por lo extenso de la pregunta, espero que puedan darme una mano.
Saludos y gracias de antemano.