title: upload image in folder using angular 7
body: <p>I want to upload Image in <code>assets/</code> folder using Angular 7, below is my try:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;form [formGroup]="form" (ngSubmit)="postData()" class="intro-form-css"&gt;
                &lt;div class="form-row"&gt;
                  &lt;div class="form-group col-lg-12 col-md-12 col-12"&gt;
                      &lt;label class="form-text"&gt;Icon&lt;/label&gt;
                    &lt;input type="file" class="file" #introIcon id="uploadBtn" (change)="onFileChange($event)" name="browseIcon"&gt;
                    &lt;div class="input-group"&gt;
                      &lt;span class="input-group-btn"&gt;
                        &lt;button class="btn btn-css-browse" type="button" (click)="triggerFile()"&gt;Browse&lt;/button&gt;
                      &lt;/span&gt;
                      &lt;input type="text" class="form-control css-input" disabled placeholder="Upload Icon" #uploadFileName id="uploadFile"&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="form-row"&gt;
                  &lt;div class="form-group col-lg-12 col-md-12 col-12"&gt;
                    &lt;label class="form-text"&gt;Title&lt;/label&gt;
                    &lt;input type="text" formControlName="introTitle" placeholder="Enter Title" class="form-control border-radius-0" /&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
                &lt;div class="form-row"&gt;
                    &lt;div class="form-group col-lg-12 col-md-12 col-12"&gt;
                      &lt;label class="form-text"&gt;Description&lt;/label&gt;
                      &lt;textarea rows="5" cols="50" formControlName="introDesc" placeholder="Enter Description" class="form-control border-radius-0 no-resize"&gt;&lt;/textarea&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;div class="form-row"&gt;
                  &lt;div class="form-group col-lg-6 col-md-6 col-6"&gt;
                    &lt;button type="button" class="btn btn-block custom-css-btn" &gt;Submit&lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group col-lg-6 col-md-6 col-6"&gt;
                    &lt;button type="button" class="btn btn-block custom-css-btn" &gt;Cancel&lt;/button&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/form&gt;
  </code></pre>
  
  <p><strong>ts:</strong></p>
  
  <pre><code>      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 &gt; 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 = (&lt;HTMLSelectElement&gt;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);
            }
          }
  </code></pre>
  
  <p>I am not getting where/what to add code for upload image in local folder. Also, I am not getting any response in <code>formData</code>. I also want to send that file name, title and description in web-service.</p>