upload image in folder using angular 7

Question

I want to upload Image in assets/ folder using Angular 7, below is my try:

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 not getting where/what to add code for upload image in local folder. Also, I am not getting any response in formData. I also want to send that file name, title and description in web-service.

Answer 1

This is not possible, you cannot upload any file from frontend (Angular, Javascript etc).

Through Javascript, you cannot specify a user's Desktop location to download files.

Create an API in backend(nodeJs, Php,Java etc), pass your image formData to it, and save the file in the desired location via the API