Insert Image to database using typescript (angular2) and spring boot (spring data)

Question

I start by presenting my client side the service

    addImage (url: string, params: string[], files: File[]): Observable {
                return Observable.create(observer => {
                    let formData: FormData = new FormData(),
                        xhr: XMLHttpRequest = new XMLHttpRequest();

                    for (let i = 0; i < files.length; i++) {
                        formData.append("uploads[]", files[i], file

s[i].name);
                }

                xhr.onreadystatechange = () => {
                    if (xhr.readyState === 4) {
                        if (xhr.status === 200) {
                            observer.next(JSON.parse(xhr.response));
                            observer.complete();
                        } else {
                            observer.error(xhr.response);
                        }
                    }
                };

                xhr.upload.onprogress = (event) => {
                    this.progress = Math.round(event.loaded / event.total * 100);

                    this.progressObserver.next(this.progress);
                };

                xhr.open('POST', url, true);
                xhr.send(formData);
            });

    }

then this is my html code

<input type="file" (change)="uploadImage($event)"/>

where I call this method from my component

uploadImage(event) {
        var files = event.srcElement.files;
        console.log(files);
        this._serviceSection.addImage('http://localhost:8080/template/img', [], files).subscribe(() => {
            console.log('sent');
        });
    }

and in my service side

this is a method from my controller

@RequestMapping(value = "/img", method = RequestMethod.POST)
    public void getFileContents(@RequestParam MultipartFile file) {
        System.out.println("++++++++++++++++++++++++++++++++++++++++ " +file.getOriginalFilename());
    }

in a first time a try just to show a fileName but I get this error

Thierry Templier · Accepted Answer · 2016-07-04 11:08:05Z

1

It seems that your progressObserver isn't set. The reason for this could be that you didn't subscribe to its associated observable. Don't forget that observables are lazy and if you don't subscribe to them, their initialization callback isn't called.

To prevent from having the error, you could check if it's null or not:

xhr.upload.onprogress = (event) => {
  if (this.progressObserver) {
    this.progress = Math.round(event.loaded / event.total * 100);

    this.progressObserver.next(this.progress);
  }
};

Otherwise, you can notice that from RC2, Angular2 accepts FormData objects as parameters of HTTP methods...

answered Jul 4, 2016 at 11:08

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

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

1 Comment

AndroidLover Over a year ago

how can we get the onprogress callback using the Http service method while we are uploading and using a FormData as a body ?

Collectives™ on Stack Overflow

Insert Image to database using typescript (angular2) and spring boot (spring data)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related