file upload angular - spring boot - mysql - mysql

Question

I had a working post api sending formdata to the back end and posting it to the DB .
when I added an input file type to the form and appended it the dataform, I got errors.
I always have this error:
"error: "Internal Server Error"
message: "Unrecognized field "file" (class org.sid.model.User), not marked as ignorable (6 known properties: "fileName", "id", "email", "name", "password", "logo"])↵ at [Source: (String)"{"name":"ss","email":"sss","password":"ssssssss","file":"C:\fakepath\ooredoo_758118.png"}"; line: 1, column: 58] (through reference chain: org.sid.model.User["file"])"
path: "/users"
"
Controller
#CrossOrigin(origins = { "http://localhost:4200", "http://localhost:9000" }, maxAge = 36000)
/*#RequestMapping(value="/users" , method=RequestMethod.POST)*/
#RequestMapping(value="/users" , headers = ("content-type=multipart/*"), method = RequestMethod.POST,
consumes = MediaType.MULTIPART_FORM_DATA_VALUE ,
produces = { "application/json" }
)
public User save(#RequestPart("file") MultipartFile f ,
#RequestPart ("user") String u)
throws JsonParseException, JsonMappingException, IOException{
User user = new ObjectMapper().readValue(u, User.class) ;
user.setLogo(f.getBytes());
return userRepository.save(user);
}
User.java
#Entity
public class User {
#Id #GeneratedValue
private Long id ;
private String name ;
private String email ;
private String password ;
#Column(name="logo")
private byte[] logo;
#Column(name="file_name")
private String fileName ;
}
mainApplication.java
#SpringBootApplication
public class MyChebbaApplication {
public static void main(String[] args) {
SpringApplication.run(MyChebbaApplication.class, args);
}
#Bean
public MultipartConfigElement multipartConfigElement() {
MultipartConfigFactory factory = new MultipartConfigFactory();
factory.setMaxFileSize("10240KB");
factory.setMaxRequestSize("10240KB");
return factory.createMultipartConfig();
}
}
Clien Side
component.html
<div class="container" >
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Register</div>
<div class="panel-body">
<form class="form-horizontal" #form="ngForm" (ngSubmit)="onSubmit(form)">
<div class="form-group">
<label for="name" class="control-label col-md-4">Nom Complet</label>
<div class="col-md-6">
<input id="name" type="text" name="name" #userName="ngModel" ngModel class="form-control" required>
</div>
</div>
<div class="form-group">
<label for="email" class="control-label col-md-4">E-mail Address</label>
<div class="col-md-6">
<input id="email" type="email" name="email" #userEmail="ngModel" ngModel class="form-control" required>
</div>
</div>
<!-- <div class="form-group">
<label for="phone" class="control-label col-md-4">Phone number</label>
<div class="col-md-6">
<input id="phone" type="phone" name="phone" #phone="ngModel" ngModel class="form-control" >
</div>
</div> -->
<div class="form-group">
<label for="password" class="control-label col-md-4">Password</label>
<div class="col-md-6">
<input id="password" type="text" name="password" #password="ngModel" ngModel class="form-control" required>
</div>
</div>
<div class="form-group">
<label for="file" class="control-label col-md-4">File Upload</label>
<div class="col-md-6">
<input
type="file"
name="file"
accept="image/*"
(change)="onFileSelected($event)"
ngModel class="form-control" >
</div>
</div>
<div class="form-group">
<div class="col-md-8 col-md-offset-4">
<button type="submit" class="btn btn-primary"
[disabled]="form.invalid">
Register
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
component.ts
selectedFile: File = null ;
constructor(private userService: UserService) { }
ngOnInit() {
}
onFileSelected(event) {
console.log(event) ;
this.selectedFile = event.target.files[0] ;
}
onSubmit(form: any) {
let fd = new FormData() ;
const user = form.value ;
fd.append('user' , JSON.stringify(user)) ;
fd.append('file' , this.selectedFile ) ;
console.log(fd) ;
this.userService.register(fd )
.then((resp) => {
this.userService.logUserIn(resp) ;
}) ;
}
user.service.ts
register(fd: FormData ): Promise<UserData> {
return this.http.post(`${CONFIG.API_URL}/users`, fd)
.toPromise()
.then((response) => {
let token = response.json().token ;
let user = response.json() ;
let userData = new UserData(token, user) ;
this.router.navigate(['/users']);
return userData ;
});
}

Answer 1

this means that your JSON String u doesn't contain "file" field. In order to ignore missing fields please use this:
ObjectMapper mapper = new ObjectMapper()
.configure(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES, false)
mapper.readValue(u, User.class);
...
Good luck.

Answer 2

It means that User doesn't have a property file.
To solve that, just disable that config in applicatgion.properties.
pring.jackson.deserialization.fail-on-unknown-properties=true