Upload File di Angular 4

teman-teman mau tanya, ada yang pernah upload file di angular? untuk mengambil value dari filename nya gimana ya? biar bisa masuk ke formControlName dan dikirim pakai Api

avatar afrijaldz
@afrijaldz

220 Kontribusi 86 Poin

Diperbarui 6 tahun yang lalu

3 Jawaban:

sudah pernah coba ng-file-upload gan? https://github.com/danialfarid/ng-file-upload saya pakai di project saya, lumayan mudah implementasinya

avatar rachmatsasongko
@rachmatsasongko

410 Kontribusi 426 Poin

Dipost 6 tahun yang lalu

ini contoh upload file.

 export class HomePage {
  loadProgress:any = 0;
  constructor(public navCtrl: NavController, private zone: NgZone) {
  }

  upload(e){
    let file = e.target.files[0];
    let formData: FormData = new FormData();
    let xhr: XMLHttpRequest = new XMLHttpRequest();
    xhr.setRequestHeader('authorization', window.localStorage.getItem('token'));
    formData.append("file", file);
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          console.log(JSON.parse(xhr.response))
        } else {
          console.log(JSON.parse(xhr.response))
        }
      }
    };

    xhr.upload.onprogress = (event) => {
      this.zone.run(()=>{
        this.loadProgress = Math.round(event.loaded / event.total * 100);
      })
    };

    xhr.open('POST', 'http://localhost:3000/upload', true);
    xhr.send(formData);
  }

}
 <ion-content padding>
  <ion-list>
    <ion-item>
      <input type="file"(change)="upload($event)">
    </ion-item>
    <progressbar [progress]="loadProgress"></progressbar>
  </ion-list>
</ion-content>
avatar ardyhim
@ardyhim

289 Kontribusi 175 Poin

Dipost 6 tahun yang lalu

Maap baru sempet buka wkwkw udah solved gan, ane sempet pake ng2-file-upload tp ada masalah sama file keynya, jadi pakai angular2-dropzone-wrapper

avatar afrijaldz
@afrijaldz

220 Kontribusi 86 Poin

Dipost 6 tahun yang lalu

Login untuk ikut Jawaban