Sending File inside object from angular2 to Spring Rest

Question

Hi This question is not new but I could not find any proper way of doing this.Please help me.

Requirement

Sending a uploaded File inside the json object and handle at rest service.

Example of Sample json:

{
    id:"123",
    name:"XYZ",
    nonProfit:[{
        name:"profile1",
        attachedFile: object of file
    }, {
        name:"profile2",
        attachedFile: object of file2
    }]
}

Problem:

I am able to get the file object inside json but I am not able to send to the service as I guess payload is not going right to the web service.

Is there any way that I can send the json like below and handle in the backend service.

Answer 1

first you have to get base64 of your file

 public readFile(fileToRead: File): Observable<MSBaseReader>{
        let base64Observable = new ReplaySubject<MSBaseReader>(1);

        let fileReader = new FileReader();
        fileReader.onload = event => {
             base64Observable.next(fileReader.result);
        };
        fileReader.readAsDataURL(fileToRead);

        return base64Observable;
}

after read base64 you should pass it to json file

let params = {
            id:"123",
            name:"XYZ",
            nonProfit:[{
            name:"profile1",
            attachedFile: this.fileBase64
}

after that you can create a service to send data to backend.first of this create a server.service.ts file for call api

import {Injectable} from '@angular/core';
import {Headers, Http, RequestOptions} from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/forkJoin';
import 'rxjs/add/operator/toPromise';
import {AuthenticationService} from "./authentication.service";
import {isUndefined} from "util";

@Injectable()
export class ServerService {
     constructor(private http: Http) {
     }

     servicePost(service: string, parameters: string) {
           return this.http.post('/service/' + service, parameters)
     }
}

add your service to providers of module

@NgModule({
declarations: [...],
imports: [...],
providers: [AuthGuard,
    ServerService],
entryComponents: [...],
bootstrap: [AppComponent]
})
export class AppModule {
}

now add your service to your constructor

constructor(private serverService: ServerService) {
}

and call your service in component.

this.service.servicePost('subDirectoryOfService',params).subscribe(data=>{dosomething after call api})

now in backend you will got in this service with path: /service/subDirectoryOfService

in controller you got in this method

@RequestMapping('/service/subDirectoryOfService')
public String subDirectoyOfService(@FormParam String params){
      JSONObject json = new JSONObject(params);
      String base64 = json.getString("attachedFile");
      System.out.println("base64 of file: "+ base64);
      return "{\"res\":\"success\"}"
}