Angular : How to send file as part of form data that spring boot maps to the domain class?

Question

I've an html form as follows

 <form #basicForm = "ngForm" (ngSubmit) = "onClickSubmit(basicForm.value)" enctype="multipart/form-data" class="form-horizontal">
     <input type="file" id="file-input" name="fileInput" ngModel>
     <button type="submit"> Submit</button>
 </form>

and onClickSubmit method is

 onClickSubmit(data) {
    console.log(data.fileInput);
    this.http.post("http://localhost:8080/basicForm", data).subscribe( (ob)=>(console.log("subscribe method called")));
  }

But this only logs a fakepath in browser console like C:\fakepath\User.java not the file itself

and I'm not able to access the file from server side ,It seems like only the fake path is uploaded to the server not the file itself

FormDomain java class

public class FormDomain {
 private File fileInput;

public File getFileInput() {
    return fileInput;
}

public void setFileInput(File fileInput) {
    this.fileInput = fileInput;
}

}

FormController

@CrossOrigin(origins="*")
@RestController
public class FormController {
      @PostMapping(path="/basicForm")
 public String postResponseController(
              @RequestBody FormDomain loginForm) throws IOException {

          BufferedReader br = new BufferedReader(new FileReader(loginForm.getFileInput())); 

          String st; 
          while ((st = br.readLine()) != null) { 
            System.out.println(st); 
          } 

         return "file transfer completed successfully";
     }
}

Accessing uploaded files this way results in error java.io.FileNotFoundException: C:\fakepath\User.java (No such file or directory). How to send file as part form data that spring boot maps to the domain class?

May be this can help you [Link](https://stackoverflow.com/a/48320977/11719787) — Sameer, Jan 21 '20 at 05:30
as shown in that link you can bind the file to `data.fileInput = event.target.files` after `(change)` function is invoked — Sameer, Jan 21 '20 at 05:37
And one more thing for `post` API you cannot directly send a file like you are sending as `data`, you have to use `form data` [Explained Here](https://stackoverflow.com/a/47938117/11719787) — Sameer, Jan 21 '20 at 05:41
@SameerKhan Does spring boot map FormData to domain object like it map form to domain object? — Arjun, Jan 21 '20 at 06:31
Sorry brother, I don't have any idea about spring boot, but you may find any tutorial/video or blog regarding that. Just google once :) — Sameer, Jan 21 '20 at 06:38

score 0 · Answer 1 · answered Jan 21 '20 at 06:05

You have to write change method

 <form #basicForm = "ngForm" (ngSubmit) = "onClickSubmit(basicForm.value)" enctype="multipart/form-data" class="form-horizontal">
     <input type="file" id="file-input" name="fileInput" (change)="onFileChange($event)" ngModel>
     <button type="submit"> Submit</button>
 </form>

In ts file,

selectedFile : any = null;
onFileChange(event){
 if (event.target.files && event.target.files.length) {
  this.pdfFile = event.target.files[0];
 }
}

while sending to backend

onClickSubmit(data) {
    data.fileInput = this.selectedFile ;
    console.log(data.fileInput);
    this.http.post("http://localhost:8080/basicForm", data).subscribe( (ob)=>(console.log("subscribe method called")));
  }

Angular : How to send file as part of form data that spring boot maps to the domain class?

1 Answers1