0

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. Imagen Subida

Imagen antes de subir

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.

2
  • para mandar ficheros desde front a back tienes que usar FormData y no json
    – hawks
    el 14 nov. 2020 a las 14:16
  • si, hice el intento con FormData, tengo publicada la pregunta pero no llegué a una solución (no guarda la imagen). Por eso, buscando encontré a esta forma, que "al menos" llega a guardar, pero algo se pierde en el camino.
    – FerMV
    el 14 nov. 2020 a las 14:21

2 respuestas 2

1

Existe un libreria en angular que es para subir archivos, es mucho mas util que utilizar la etiqueta form la libreria es esta: https://www.npmjs.com/package/angular-file-uploader yo tuve problemas al instalar la version actual por lo que te recomiendo instalar la version 4.1.4 que es bastante estable, ahi podras guiarte de como instalar e implementar la libreria para que puedas subir tus imagenes

1
  • Gracias por comentar, la verdad me está costando mucho resolverlo y cualquier ayuda es valorada. Justo ayer probé también con una librería, pero era ´ngx-file-drop´ lo empaquetaba bien, pero igual no llegaba , ahora pruebo con la que me sugieres y te comento.
    – FerMV
    el 18 nov. 2020 a las 10:40
0

después de casi 2 semanas de búsqueda, encontré una solución que comparto a continuación.

Primero muestro el backend, en laravel para que quede claro que debemos recibir. El método dentro del controlador queda así:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Illuminate\Facades\Storage;
use Symfony\Component\HttpFoundation\Response; 

class ProcedimientosController extends Controller
{
   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(
         
            'image'=>$image, 
            'status'=>'success'
        );
        return response()->json($data,200);
    }
}

Ahora desde angular, comenzamos por el component.html

<form #imageForm="ngForm" (ngSubmit)="enviarImagen()">
        <div class="col-4">
            <label for='imagen'><b>Imagen</b></label>
        </div>
        <div class="col-4"> <input type="file" name="imagen" #imagen="ngModel" [(ngModel)]="image" (change)="cargarImagen($event)"> </div>
        <button type="subtmit" class="btn btn-info">Agregar Imagen</button>
    </form>

el component.ts

import { Component, OnInit } from '@angular/core';
import {NgForm, ReactiveFormsModule}                        from '@angular/forms';
import {FormControl,FormGroup,Validators}                                from '@angular/forms';
import { GLOBAL } from 'src/app/services/global';
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 {
  selectedFile: File=null;
constructor(
private _procedimientosService: ProcedimientosService
) { }
cargarImagen(event){
    this.selectedFile=<File>event.target.files[0]
     }

   enviarImagen(){
     this._procedimientosService.onUpload(this.selectedFile).subscribe(
       response=>{
          if(response.status=='success'){
            console.log(response);
          }
       },
       error=>{
         console.log(<any>error);
       }
     );
     
   }
}

y por último el service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders }  from '@angular/common/http'; 
import { Observable }               from 'rxjs';
import { GLOBAL }                   from './global';



@Injectable({
  providedIn: 'root'
})
export class ProcedimientosService {
  public url: string;

  constructor(
    public _http: HttpClient,
  ) {
    this.url = GLOBAL.url;
   }


onUpload(file):Observable<any>{
  const fd= new FormData;
  fd.append('image',file,file.name);
  return   this._http.post(this.url+'add-image-post',fd); 
}
}

Nótese que GLOBAL contiene la url de mi proyecto Como podrán observar, ni siquiera configura el header en la petición, pero funciona a la perfección. Espero que le sirva a alguien más y agradezco muchísimo a los que aportaron con sus ideas y comentarios.

Referencia: https://www.youtube.com/watch?v=YkvqLNcJz3Y

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.