file upload - ngx - Cómo subir un archivo en Angular2

subir archivos angular 6

Question

Tengo que enviar un formulario junto con la imagen. He intentado este código (con varias formas) pero no funcionó para mí. ¿Hay alguien que tenga una demostración funcional de carga de archivos usando angular2? Por favor, ayúdenme.

componente.html

    <form class="form-horizontal" role="form" >

        <div class="form-group">
            <label class="control-label col-sm-4" for="myname" style="">Name<span class="asterisk">*</span></label>
            <div class="col-sm-7">
                <div>
                    <input type="text" class="form-control" id="myname"
                    [(ngModel)]="myfile.name">                        
                </div>                  
            </div>                               
        </div>        


        <div class="form-group">
            <label class="control-label col-sm-4" for="myimage">Image</label>
            <div class="col-sm-7">
                <div>
                    <input type="file" (change)="fileChangeEvent($event)" placeholder="Upload file..." />                         
                </div>   
            </div>
        </div>


        <div class="form-group">        
        <div class="text-center">
            <button type="button" (click)="upload()">Upload</button>             
        </div>
        </div>
  </form>

componente.ts

     myfile={
                "name":"Mubashshir",               
                "image":''''
     }

     fileChangeEvent(fileInput: any){
        this.myfile.image = fileInput.target.files;        
     }

     upload(){
          this.base_path_service.PostRequest(''http://128.199.190.109/api/school/schoolDetail/'',this.myfile)
            .subscribe(
                data => {
                            console.log("data submitted");                        
                        },
                err => console.log(err),
                () =>{
                     console.log(''Authentication Complete'');                    

                }
            );
      }

Answer 1

Aquí está la versión Angular 2

Necesitábamos implementar la función de entrada de archivo de arrastrar y soltar en una de nuestra aplicación Angular 2 .

Seleccionamos ng-file-upload para esto.

Intentamos seguir la página de ayuda . Como se sugirió, implementó drag-upload-input.html & drag-upload-input.component.ts la siguiente manera:

drag-upload-input.html

<!-- we only need single file upload -->
<input type="file" ng2FileSelect [uploader]="uploader" />

drag-upload-input.component.ts

import { Component } from ''@angular/core'';
import { FileUploader } from ''ng2-file-upload'';

// const URL = ''/api/'';
const URL = ''https://evening-anchorage-3159.herokuapp.com/api/'';

@Component({
  moduleId: module.id,
  selector: ''drag-upload-input'',
  templateUrl: ''./drag-upload-input.html''
})
export class DragUploadInput {
  public uploader: FileUploader = new FileUploader({ url: URL });
  public hasBaseDropZoneOver: boolean = false;
  public hasAnotherDropZoneOver: boolean = false;

  public fileOverBase(e: any): void {
    this.hasBaseDropZoneOver = e;
  }

  public fileOverAnother(e: any): void {
    this.hasAnotherDropZoneOver = e;
  }
}

El app.module.ts tiene FileUploadModule así:

// File upload modules
import { FileUploadModule } from ''ng2-file-upload'';
import { DragUploadInput } from ''./file-upload/drag-upload-input.component'';

//other imports

@NgModule({
  imports: [ ... other imports
FileUploadModule
],
  declarations: [  ... other declarations
DragUploadInput],
  bootstrap: [AppComponent]
})
export class AppModule { }

Y el systemjs.config.js ve así:

(function (global) {
  System.config({
    // map tells the System loader where to look for things
    map: {
      // other libraries
      ''ng2-file-upload'': ''node_modules/ng2-file-upload'',
    },
    packages: {
      // other packages
      ng2-file-upload'': {
        main: ''ng2-file-upload.js'',
        defaultExtension: ''js''
      }
    }
  });
})(this);

source

Answer 2

De hecho, la clase Http no es compatible con eso en este momento.

Debe aprovechar el objeto XHR subyacente para hacer eso:

import {Injectable} from ''angular2/core'';
import {Observable} from ''rxjs/Rx'';

@Injectable()
export class UploadService {
  constructor () {
    this.progress$ = Observable.create(observer => {
      this.progressObserver = observer
    }).share();
  }

  private makeFileRequest (url: string, params: string[], files: File[]): Observable {
    return Observable.create(observer => {
      let formData: FormData = new FormData(),
        xhr: XMLHttpRequest = new XMLHttpRequest();

      for (let i = 0; i < files.length; i++) {
        formData.append("uploads[]", files[i], files[i].name);
      }

      xhr.onreadystatechange = () => {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            observer.next(JSON.parse(xhr.response));
            observer.complete();
          } else {
            observer.error(xhr.response);
          }
        }
      };

      xhr.upload.onprogress = (event) => {
        this.progress = Math.round(event.loaded / event.total * 100);

        this.progressObserver.next(this.progress);
      };

      xhr.open(''POST'', url, true);
      xhr.send(formData);
    });
  }
}

Consulte este plunkr para obtener más detalles: https://plnkr.co/edit/ozZqbxIorjQW15BrDFrg?p=info .

Hay un problema y un RP pendiente con respecto a esto en el repositorio angular:

• https://github.com/angular/angular/issues/10424
• https://github.com/angular/angular/pull/7310/files

Answer 3

Método mejorado onChange ():

file: File;
  onChange(event: EventTarget) {
        let eventObj: MSInputMethodContext = <MSInputMethodContext> event;
        let target: HTMLInputElement = <HTMLInputElement> eventObj.target;
        let files: FileList = target.files;
        this.file = files[0];
        console.log(this.file);
    }

Answer 4

su archivo de servicio http:

import { Injectable } from "@angular/core";
import { ActivatedRoute, Router } from ''@angular/router'';
import { Http, Headers, Response, Request, RequestMethod, URLSearchParams, RequestOptions } from "@angular/http";
import {Observable} from ''rxjs/Rx'';
import { Constants } from ''./constants'';
declare var $: any;

@Injectable()
export class HttpClient {
  requestUrl: string;
  responseData: any;
  handleError: any;

  constructor(private router: Router, 
  private http: Http, 
  private constants: Constants, 
  ) {
    this.http = http;
  }

  postWithFile (url: string, postData: any, files: File[]) {

    let headers = new Headers();
    let formData:FormData = new FormData();
    formData.append(''files'', files[0], files[0].name);
    // For multiple files
    // for (let i = 0; i < files.length; i++) {
    //     formData.append(`files[]`, files[i], files[i].name);
    // }

    if(postData !=="" && postData !== undefined && postData !==null){
      for (var property in postData) {
          if (postData.hasOwnProperty(property)) {
              formData.append(property, postData[property]);
          }
      }
    }
    var returnReponse = new Promise((resolve, reject) => {
      this.http.post(this.constants.root_dir + url, formData, {
        headers: headers
      }).subscribe(
          res => {
            this.responseData = res.json();
            resolve(this.responseData);
          },
          error => {
            this.router.navigate([''/login'']);
            reject(error);
          }
      );
    });
    return returnReponse;
  }
}

llame a su función (archivo de componente):

onChange(event) {
    let file = event.srcElement.files;
    let postData = {field1:"field1", field2:"field2"}; // Put your form data variable. This is only example.
    this._service.postWithFile(this.baseUrl + "add-update",postData,file).then(result => {
        console.log(result);
    });
}

su código html:

<input type="file" class="form-control" name="documents" (change)="onChange($event)" [(ngModel)]="stock.documents" #documents="ngModel">