Angular 2 file upload without libraries, not getting file name and path

Question

i tried the below code which i got after searching,app is working but it shows an error Unexpected end of JSON input , i am not getting the value of image upload

the code which i have used is given below

Html

<input type="file" (change)="fileChange($event)"  class="form-control filed" >

Typescript

private imageUpload: any = {
    "upload":""
};

private ImageUploadURL: string = `${environment.api.host}:${environment.api.port}${environment.api.base}${environment.api.api}/${environment.api.version}${environment.api.services.store.uploadImage}`;

constructor(private http: Http)

fileChange(event) {
  let fileList: FileList = event.target.files;
  if(fileList.length > 0) {
      let url = this.ImageUploadURL;
      let file: File = fileList[0];
      let formData:FormData = new FormData();
      formData.append('uploadFile', file, file.name);
      let headers = new Headers({   'Content-Type': 'application/json' ,'Authorization': 'Bearer ' + this.accountsService.accessToken });
      let options = new RequestOptions({ headers: headers });
        return  this.http.post(url,this.imageUpload,options)
          .map(res => res.json())
          .catch(error => Observable.throw(error))
          .subscribe(
              data => console.log('success'),
              error => console.log(error)
          )
  }
}

Hope the information provided is enough. please help with a solution

alsami · Answer 1 · 2018-02-27T11:12:36.097

2

You must send the FormData in the post method as body of it.

...
return this.http.post(url, formData, options)
...

You are creating it already but not passing it to the http.post method. Changing it to sending the formdata instead of an arbitrary object, will cause the content type to be "multipart/form-data".

Your API must have an endpoint to handle that ofc.

edited Feb 27 '18 at 11:12

answered Feb 27 '18 at 10:58

alsami

8,996
3
25
36

Thank you so much for your comment i'm not getting the value in that request payload **upload** getting the value in ** content-Disposition : form-data; Name="uploadFile"; filename="demo.jpg" ** ** Content-Type: image/jpeg ** How can i get the values the db – Aashiq Rathnadas Feb 28 '18 at 04:20
That depends on your back-end. If you provide code in your OP we might find a solution. – alsami Feb 28 '18 at 10:20

score 1 · Answer 2 · answered Feb 27 '18 at 11:48

In your html form tag, give enctype,

<form enctype="multipart/form-data">......</form>

Typescript: In post give your form data and make your enctype is multipart/form-data.

private imageUpload: any = {
    "upload":""
};

    private ImageUploadURL: string = `${environment.api.host}:${environment.api.port}${environment.api.base}${environment.api.api}/${environment.api.version}${environment.api.services.store.uploadImage}`;

    constructor(private http: Http)

    fileChange(event) {
      let fileList: FileList = event.target.files;
      if(fileList.length > 0) {
          let url = this.ImageUploadURL;
          let file: File = fileList[0];
          let formData:FormData = new FormData();
          formData.append('uploadFile', file, file.name);
          let headers = new Headers(
                {
                    'enctype': 'multipart/form-data',
                    'method': 'POST',
                    'Authorization': 'Bearer ' + this.accountsService.accessToken
                });
            let options = new RequestOptions({ headers: headers });
 return this.http.post(url, formData, options)
 .map(res => res.json())
          .catch(error => Observable.throw(error))
          .subscribe(
              data => console.log('success'),
              error => console.log(error)
          )
 }
}

Thank you for your reply Getting an error like this "Request header field method is not allowed by Access-Control-Allow-Headers in preflight response" — Aashiq Rathnadas, Feb 28 '18 at 04:08
https://stackoverflow.com/questions/32500073/request-header-field-access-control-allow-headers-is-not-allowed-by-itself-in-pr see this — Arun Kumar, Feb 28 '18 at 04:13

Angular 2 file upload without libraries, not getting file name and path

2 Answers2