I am having trouble uploading an Image to the assets/ folder using Angular 7. Below is my attempted solution:
HTML:
<form [formGroup]="form" (ngSubmit)="postData()" class="intro-form-css">
<div class="form-row">
<div class="form-group col-lg-12 col-md-12 col-12">
<label class="form-text">Icon</label>
<input type="file" class="file" #introIcon id="uploadBtn" (change)="onFileChange($event)" name="browseIcon">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-css-browse" type="button" (click)="triggerFile()">Browse</button>
</span>
<input type="text" class="form-control css-input" disabled placeholder="Upload Icon" #uploadFileName id="uploadFile">
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-lg-12 col-md-12 col-12">
<label class="form-text">Title</label>
<input type="text" formControlName="introTitle" placeholder="Enter Title" class="form-control border-radius-0" />
</div>
</div>
<div class="form-row">
<div class="form-group col-lg-12 col-md-12 col-12">
<label class="form-text">Description</label>
<textarea rows="5" cols="50" formControlName="introDesc" placeholder="Enter Description" class="form-control border-radius-0 no-resize"></textarea>
</div>
</div>
<div class="form-row">
<div class="form-group col-lg-6 col-md-6 col-6">
<button type="button" class="btn btn-block custom-css-btn" >Submit</button>
</div>
<div class="form-group col-lg-6 col-md-6 col-6">
<button type="button" class="btn btn-block custom-css-btn" >Cancel</button>
</div>
</div>
</form>
ts:
fileName;
fileType;
form: FormGroup;
@ViewChild('introIcon') uploadFileVariable: ElementRef;
@ViewChild('uploadFileName') uploadFileName: ElementRef;
ngOnInit() {
this.form = this.formBuilder.group({
browseIcon: [''],
introTitle: '',
introDecs: ''
});
}
triggerFile(){
document.getElementById('uploadBtn').click()
}
onFileChange(event) {
if (event.target.files.length > 0) {
const file = event.target.files[0];
this.fileName = file.name;
this.fileType = file.type;
if(this.fileType == 'image/png' || this.fileType == 'image/jpeg' || this.fileType == 'image/PNG' || this.fileType == 'image/JPEG') {
let fName = (<HTMLSelectElement>document.getElementById('uploadFile')).value;
fName = this.fileName;
this.uploadFileName.nativeElement.value = fName;
this.form.get('browseIcon').setValue(file);
} else {
console.log('Error!');
}
}
}
postData() {
const formData = new FormData();
if (this.form.get('browseIcon').value == '' || this.form.get('browseIcon').value == null) {
console.log('Error!');
} else {
formData.append('file', this.form.get('browseIcon').value);
formData.append('introDecs', this.form.get('introDecs').value);
formData.append('introTitle', this.form.get('introTitle').value);
console.log('formData:', formData);
}
}
I am struggling to determine where and how to include code to upload the image to a local folder. Additionally, I am not receiving any response in the formData. My goal is to also send the file name, title, and description to a web-service.