Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
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
3 Jawaban:
sudah pernah coba ng-file-upload gan? https://github.com/danialfarid/ng-file-upload saya pakai di project saya, lumayan mudah implementasinya
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>
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