Getting FileUploadException: the request was rejected because no multipart boundary was found in Controller while posting File from Angular 2

Question

I have Controller Method as below :

     @RequestMapping(method = RequestMethod.POST, consumes = "multipart/form-data", produces = "application/json")
     public void saveUpdate(@RequestPart("org") Organization org, @RequestPart("logo") MultipartFile file){

     LOG.info("ORG :"+org != null ? org.getName()+"  : " + file : null);

     }

In Angular I am sending Form Like below :

  public saveUpdateOrganization(organization: Organization, file: File): Observable<void> {
      let headers = new Headers({ 'Content-Type': 'multipart/form-data', 'Access-Control-Allow-Origin': '*' });
      let options = new RequestOptions({headers: headers});
      let formData = new FormData();
      formData.append("logo",file);
      formData.append("org", new Blob([JSON.stringify(organization)],
      {
        type: "application/json"
      }));
      return this.http.post(AppSettings.API_ENDPOINT + "org", organization, options).map((response) => {
        return;
      })
  }

Where is the issue here? and Where it is needed the correction.

Please Suggest.

Try this https://gist.github.com/Toxicable/1c736ed16c95bcdc7612e2c406b5ce0f — borislemke, May 21 '17 at 06:04
@borislemke I am getting the File details in ts sevice but I am not able to post it to the Controller. — Sachi-17, May 21 '17 at 06:42

score 0 · Answer 1 · answered May 21 '17 at 07:59

I resolved this issue in this way :

We need to set our request body in XMLHttpRequest

      Observable.fromPromise(new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();

        // setting the params 
        formData.append("logo",file);
        formData.append("org", new Blob([JSON.stringify(organization)],
        {
            type: "application/json"
        }));

        // call post API method
        xhr.open("POST", API_URL , true);
        xhr.send(formData)
        }));

If any other smart way please feel free to suggest.

borislemke · Answer 2 · 2017-05-21T09:22:50.117

Since you are comfortable with using XHR, here is a more advanced implementation with upload abortion and progress counter. Instead of using Promise we use Observable:

uploadFile(url: string, file: File, metadata?: any): Observable<string | number> {

    // Initiates a FormData object to be sent to the server
    const fd: FormData = new FormData()

    fd.append('file', file)

    // In case you want to add other fields to the `FormData`
    if (metadata) {

        for (const key in metadata) {

            if (metadata.hasOwnProperty(key)) {

                fd.append(key, metadata[key])
            }
        }
    }

    const xhr = new XMLHttpRequest

    return Observable.create(observer => {

        // Count progress of upload
        xhr.upload.onprogress = (progress) => {

            let percentCompleted

            if (progress.lengthComputable) {

                percentCompleted = Math.round(progress.loaded / progress.total * 100)

                if (percentCompleted < 1) {

                    observer.next(0)

                } else {

                    observer.next(percentCompleted)
                }
            }
        }

        xhr.onload = (e) => {

            if (e.target['status'] !== 200) {

                observer.error(e.target['responseText'])

            } else {

                observer.next(e.target['responseText'])

                observer.complete()
            }
        }

        xhr.onerror = () => {

            observer.error('Upload error')
        }

        xhr.onabort = () => {

            observer.error('Transfer aborted by the user')
        }

        xhr.open('POST', API_DOMAIN + url)

        xhr.setRequestHeader('Authorization', `Bearer ${someAuthToken}`)

        // Send the FormData
        xhr.send(fd)

        // Allows to abort file transfer on unsubscription
        // sub.unsubscribe() <- will abort upload if not yet completed
        return () => xhr.abort()
    })
}

Usage:

uploadRef;

upload() {

    this.uploadRef = uploadFile('media/upload', someFileFromInputElement, {file_name: 'avatar.jpeg'}).subscribe(progress => {
        if (typeof progress === 'number') {
            console.log('upload progress', progress)
            if (progress === 100) alert('Upload complete!')
        }
    })
}

// Abort upload
cancelUpload(): void {
    if (this.uploadRef) this.uploadRef.unsubscribe()
}

Getting FileUploadException: the request was rejected because no multipart boundary was found in Controller while posting File from Angular 2

2 Answers2