Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @ViewChild("fileInput") fileInput;
- addFile(): void {
- let fi = this.fileInput.nativeElement;
- if (fi.files && fi.files[0]) {
- let fileToUpload = fi.files[0];
- this.uploadService
- .upload(fileToUpload)
- .subscribe(res => {
- console.log(res);
- });
- }
- }
- upload(fileToUpload: any) {
- let input = new FormData();
- input.append("file", fileToUpload);
- return this.http.post("/api/uploadFile", input);
- }
- <input class="form-control" type="file" name="avatar" (change)="imageUpload($event)">
- <img [src]="imageUrl" />
- // Declare the variable.
- imageUrl: any;
- //method definition in your class
- imageUpload(e) {
- let reader = new FileReader();
- //get the selected file from event
- let file = e.target.files[0];
- reader.onloadend = () => {
- //Assign the result to variable for setting the src of image element
- this.imageUrl = reader.result;
- }
- reader.readAsDataURL(file);
- }
- }
- import {BrowserModule} from '@angular/platform-browser';
- import {FileInputAccessorModule} from "file-input-accessor";
- @NgModule({
- declarations: [
- AppComponent
- ],
- imports: [
- BrowserModule,
- FileInputAccessorModule
- ],
- providers: [],
- bootstrap: [AppComponent]
- })
- export class AppModule {}
- <!--Reactive Forms-->
- <input type="file" multiple [formControl]="someFileControl" />
- <input type="file" multiple formControlName="someFileControl" />
- <!--Template-driven-->
- <input type="file" name="file-input" multiple [(ngModel)]="fileList" />
Add Comment
Please, Sign In to add comment