En este proyecto veremos como subir imágenes a una Base de Datos atreves de una API, para empezar el siguiente proyecto necesitaremos varios requisitos:

  • Tener una Base de Datos donde guardar el archivo
  • Tener un enlace o crear una API para la subida del archivo

En mi caso la API tiene un modelo Archivo en el que tendra 3 campos:

  • ID
  • Nombre de la imagen
  • Tipo
Upload-File.component

export class Archivo {
constructor(
public id: number,
public nombre: string,
public imagen: string
) {}
}

Y un repositorio el cual recibirá un objeto tipo «Archivo» y lo pasara de JSON hasta la BD.

Para empezar en Angular necesitaremos un modelo igual al de la Api, en mi caso lo he llamado también Archivo.

Crearemos la carpeta components y dentro de ella crearemos nuestros component para subir la imagen.

En la vista tendremos un formulario con un input type file con una función fileEvent () y un botón que llamara a otra función subirArchivo () para subir el archivo.

1

Al hacer un cambio en el input file, es decir, al seleccionar un archivo se lanzara la primera funcion (change)=»fileEvent($event)» , esta funcion recogeá el archivo y lo guardará en un objeto.

Al pulsar sobre el botón llamara a la función subirArchivo ( $event ) para hacer post a la api.

Service de angular

3
Upload.service

import { Injectable } from «@angular/core»;
import { HttpClient, HttpHeaders } from «@angular/common/http»;
import { Global } from «./global»;
import { Observable } from «rxjs»;
import { Archivo } from «src/models/Archivo»;
@Injectable()
export class ApiService {
public url: string;

constructor(private _http: HttpClient) {
this.url = Global.urlConnection;
}

uploadFile(File): Observable {
var peticion = «api/Subir/»;
var json = JSON.stringify(File);
console.log(File);
var headers = new HttpHeaders().set(«Content-Type»,

«application/json»);
return this._http.post(this.url + peticion, File, { headers });
}

getUploads(): Observable {
var peticion = «api/ImagenesSubidas»;
return this._http.get(this.url + peticion);
}
}

GetUploads() = Devulve todas los registros de la BD atraves de la API.

UploadFile () = Le pasamos el objeto Archivo mapeado a Json y hacemos POST a nuestro servicio API.

Component de angular

En este component cargaremos al empezar con la funcion, ngOnInit() ,todas las imagenes que estan guardadas en el server para ello nos conectaremos a nuestra api, llamando a la funcion getUploads del service.

this.lastPK = En esta variable guardaremos el ultimo id guardado en la BD y le sumaremos 1 para que no se repitan los id y pueda dar fallos al insertar.

fileEvent ($event) = en esta funcion recogeremos el archivo seleccionado y comprobaremos si es una imagen

if (file.type == «image/jpeg» || file.type == «image/jpeg»)

Si es una imagen pasa a mapearse el objeto

2
Upload-File.component

import { Component, OnInit } from «@angular/core»;
import { HttpClient } from «@angular/common/http»;
import { ApiService } from «src/services/upload.service»;
import { Global } from «src/services/global»;
import { Archivo } from «src/models/Archivo»;
@Component({
selector: «app-upload-file»,
templateUrl: «./upload-file.component.html»,
styleUrls: [«./upload-file.component.css»],
providers: [ApiService]
})
export class UploadFileComponent implements OnInit {
public archivo: Archivo;
public archivosServer: Archivo;
public lastPK: number;

constructor(private _service: ApiService) {}

subirArchivo(archivo: Archivo) {
this._service.uploadFile(this.archivo).subscribe(Response => {});
}

fileEvent(fileInput: Event) {
let file = (fileInput.target).files[0];

if (file.type == «image/jpeg» || file.type == «image/jpeg») {
this.archivo = new Archivo(this.lastPK + 1, file.name, file.type);
}
}

ngOnInit(): void {
this._service.getUploads().subscribe(Response => {
this.archivosServer = Response;
this.lastPK = this.archivosServer[Response.length – 1].id;
});
}
}

Ejecutar el proyecto

Una vez tengamos el codigo pasaremos a intenter insertar una Img. Pulsamos en subir archivo

4

Después de seleccionar imagen, cuando termine de cargar podremos ver que se subió correctamente ya debajo de la anterior imagen. Ya que la API se actualiza con la BD.

5
6

Consejo: En caso de utilizar tu propia API puede que tengas problemas para completar las acciones get o post utilizadas en este post, pasa solucionarlo hay que habilitar CORS. En WebConfigApi de tu API habria que añadir las siguientes líneas

  • EnableCorsAttribute cors = new EnableCorsAttribute("*","*","*");
  • config.EnableCors(cors);

  Autor/a: Alejandro Merino Ontana
Curso: Microsoft MCSA Web Applications + Microsoft MCSD App Builder + Xamarin
Centro: Tajamar
Año académico: 2019-2020

Recursos:Guardar En local :
https://itelisoft.com/como-utilizar-el-localstorage-en-angula/

Video de ayuda :
https://www.youtube.com/watch?v=YkvqLNcJz3Y
https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsArrayBuffer

URLs de interes:
https://stackoverflow.com/questions/3548401/how-to-save-image-in-database-using-c-sharp

https://docs.microsoft.com/es-es/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api

https://stackoverflow.com/questions/51721340/how-to-convert-file-in-byte-array-and-store-in-database-using-angular-asp-ne

GitHub: https://github.com/AlexMerino19/Angular

Leave a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.