angular button open file input
<input type="file" accept="image/*" #file>
<button (click)="file.click()">Upload file</button>angular button open file input
<input type="file" accept="image/*" #file>
<button (click)="file.click()">Upload file</button>file input angular
602
Here is a working example for file upload to api:
Step 1: HTML Template (file-upload.component.html)
Define simple input tag of type file. Add a function to (change)-event for handling choosing files.
<div class="form-group">
<label for="file">Choose File</label>
<input type="file"
id="file"
(change)="handleFileInput($event.target.files)">
</div>
Step 2: Upload Handling in TypeScript (file-upload.component.ts)
Define a default variable for selected file.
fileToUpload: File | null = null;
Create function which you use in (change)-event of your file input tag:
handleFileInput(files: FileList) {
this.fileToUpload = files.item(0);
}
If you want to handle multifile selection, than you can iterate through this files array.
Now create file upload function by calling you file-upload.service:
uploadFileToActivity() {
this.fileUploadService.postFile(this.fileToUpload).subscribe(data => {
// do something, if upload success
}, error => {
console.log(error);
});
}
Step 3: File-Upload Service (file-upload.service.ts)
By uploading a file via POST-method you should use FormData, because so you can add file to http request.
postFile(fileToUpload: File): Observable<boolean> {
const endpoint = 'your-destination-url';
const formData: FormData = new FormData();
formData.append('fileKey', fileToUpload, fileToUpload.name);
return this.httpClient
.post(endpoint, formData, { headers: yourHeadersConfig })
.map(() => { return true; })
.catch((e) => this.handleError(e));
}
So, This is very simple working example, which I use everyday in my work.Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
