0

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.

4
  • did you try get base64 of uploaded file? you can get base64 of that file and send that string to spring rest in json object. if you want i can send you some samples to resolve your problem Commented Oct 22, 2018 at 8:33
  • It will be great help if u provide me some code snippet at frontend and backend Commented Oct 22, 2018 at 8:48
  • what's your frontend technology? Commented Oct 22, 2018 at 11:59
  • As mentioned Angular 4 Commented Oct 22, 2018 at 14:05

1 Answer 1

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\"}"
}
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.