2

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.

1 Answer 1

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

Sign up to request clarification or add additional context in comments.

5 Comments

I don't want to save file, I want to upload/put it in the folder. Saving will be done via API
From Javascript, saving/uploading can be done only to upload/put the file in Download folder
I don't think so.
Well, I cannot help then, I hope you find a solution on how to save/upload file to a specific folder using Angular and please share it with me.
You can put it in your download location via file-saver

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.