Carga de archivos angulares – Barcelona Geeks

La carga de archivos es un componente esencial para crear un formulario que almacene algún tipo de datos de imagen. Ayuda en las aplicaciones que utilizan la carga de imágenes o en el intercambio de archivos. Este componente de carga de archivos utiliza la API file.io para cargar archivos y, a cambio, proporciona un enlace para compartir. Además, podemos enviar una solicitud de obtención al enlace para compartir para obtener el archivo, pero por ahora, nuestro único enfoque es en la sección de carga, por lo que solo usamos el método de publicación.

Acercarse:

Cree una nueva aplicación angular usando el siguiente comando:
```
ng new angular-file-upload 
```
Muévase dentro de la aplicación usando el comando cd-
```
cd src/app/
```
Generar nuevo archivo de componente-subir-
```
ng g c file-upload/ 
```
Abra la carpeta src/app y comience a editar el archivo app.component.html .

<app-file-upload></app-file-upload>
Cree un servicio para el componente de carga de archivos a través del comando-
```
ng g s file-upload/
```

Abra la carpeta src/app/file-upload y comience a editar el archivo file-upload.component.ts .

import { Component, OnInit } from '@angular/core';
import { FileUploadService } from './file-upload.service';
  
@Component({
    selector: 'app-file-upload',
    templateUrl: './file-upload.component.html',
    styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent implements OnInit {
  
    // Variable to store shortLink from api response
    shortLink: string = "";
    loading: boolean = false; // Flag variable
    file: File = null; // Variable to store file
  
    // Inject service 
    constructor(private fileUploadService: FileUploadService) { }
  
    ngOnInit(): void {
    }
  
    // On file Select
    onChange(event) {
        this.file = event.target.files[0];
    }
  
    // OnClick of button Upload
    onUpload() {
        this.loading = !this.loading;
        console.log(this.file);
        this.fileUploadService.upload(this.file).subscribe(
            (event: any) => {
                if (typeof (event) === 'object') {
  
                    // Short link via api response
                    this.shortLink = event.link;
  
                    this.loading = false; // Flag variable 
                }
            }
        );
    }
}

Abra src/app/file-upload/ y comience a editar el archivo file-upload.service.ts .

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class FileUploadService {
    
  // API url
  baseApiUrl = "https://file.io"
    
  constructor(private http:HttpClient) { }
  
  // Returns an observable
  upload(file):Observable<any> {
  
      // Create form data
      const formData = new FormData(); 
        
      // Store form name as "file" with file data
      formData.append("file", file, file.name);
        
      // Make http post request over api
      // with formData as req
      return this.http.post(this.baseApiUrl, formData)
  }
}

Abra src/app/file-upload y comience a editar el archivo file-upload.component.html .

<div class="text-center">
    <input class="form-control" type="file" 
            (change)="onChange($event)">
  
    <button (click)="onUpload()" 
        class="btn btn-success">
        Upload
    </button>
</div>
  
<!-- Shareable short link of  uoloaded file -->
<div class="container text-center jumbotron"
    *ngIf="shortLink">
    <h2> Visit Here</h2>
    <a href="{{shortLink}}">{{shortLink}}</a>
</div>
  
<!--Flag variable is used here-->
<div class="container" *ngIf="loading">
    <h3>Loading ...</h3>
</div>

Abra src/app/ y comience a editar el archivo app.module.ts .

import { BrowserModule } from 
    '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { FileUploadComponent } from 
    './file-upload/file-upload.component';
  
import { AppComponent } from './app.component';
import {HttpClientModule} from 
    '@angular/common/http';
@NgModule({
  declarations: [
    AppComponent,
    FileUploadComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ahora ejecute este comando para servir en localhost
```
ng serve
```

Producción:

Antes de la selección de archivos:
Después de seleccionar el archivo y hacer clic en el botón:
Una vez finalizada la carga:

HTML es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .

Publicación traducida automáticamente

Artículo escrito por Ritik_Dua y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta