Form data not appending values/image using Angular 4

Question

Hello friends I created a project in angular 4 I want to upload an image and sent request to the PHP file but form-data can't append values and images. please help me I include FormGroup, FormControl, FormBuilder, Validators, Http

const Image = this.com_Image.nativeElement;
if (Image.files && Image.files[0]) {
  this.comImageFile = Image.files[0];
}
const ImageFile: File = this.comImageFile;

// [enter image description here][1]
let formData = new FormData();
formData.append('companyName', value.companyName);
formData.append('username', value.username);
formData.append('uploadFile', ImageFile, ImageFile.name);

console.log(formData);

Is sending it as a base64 string an option for you?

yannick
– yannick

2018-09-06 14:06:28 +00:00
Commented Sep 6, 2018 at 14:06 — yannick
– yannick, Commented Sep 6, 2018 at 14:06
no i cant find result i my formdata

James
– James

2018-09-06 14:10:41 +00:00
Commented Sep 6, 2018 at 14:10 — James
– James, Commented Sep 6, 2018 at 14:10

Pratap A.K · Accepted Answer · 2018-09-06 14:34:30Z

1

Html

<input #fileSelect type="file" class="form-control" (change)="onFileChanged($event)" accept=".jpg, .png"/>

component

export class FileUploadComponent {
  @ViewChild('fileSelect') fileSelectInput: ElementRef;

  fileToUpload: any;

  onFileChanged(event) {
    // https://stackoverflow.com/questions/13602039/e-srcelement-is-undefined-in-firefox
    this.fileToUpload = (event.srcElement || event.target).files; 
    let formData: FormData = new FormData();
    formData.append('file', this.fileToUpload[0]);
    this.createOrUpdateResource(formData);   
  }

  // https://stackoverflow.com/questions/48059121/angular4-file-upload-put-request-fails, 
  so making this POST
  private createOrUpdateResource(formData: FormData) {
    this.http.post<any>(`http://localhost:8080/upload`, formData).subscribe((res) => {
      //success
    }, error => {
      //error
    });
  }
}

answered Sep 6, 2018 at 14:34

Pratap A.K

4,52715 gold badges49 silver badges81 bronze badges

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

3 Comments

James Over a year ago

i have a doubt bro formdata append is not working without image upload also

Pratap A.K Over a year ago

@James what do you mean by formdata append not working?

James Over a year ago

can't append values in the formdata

bob0the0mighty · Accepted Answer · 2018-09-06 15:21:35Z

1

Have you tried to pass only name and value for the image?

For file management (in general) this has worked for me:

formData.append('uploadFile', ImageFile);

edited Sep 6, 2018 at 15:21

bob0the0mighty

78212 silver badges29 bronze badges

answered Sep 6, 2018 at 14:22

DanniFilth

5964 silver badges5 bronze badges

1 Comment

James Over a year ago

formdata append is not working without image upload also

Collectives™ on Stack Overflow

Form data not appending values/image using Angular 4

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related