I've put in a lot of effort to solve my issue, but unfortunately, I haven't had any success yet.
Currently, I am working with an Angular 5 client and I need to send a file over to my SpringBoot web service so that I can process it on the server side.
This is what my template looks like:
<div class="dropdown-content">
<label (click)="openDialog()">Upload from xls</label>
<label>Save to xls</label>
<label>Link 3</label>
<input type="file" class="inputFile" style="display:none" (change)="handleFileInput($event.target.files)">
</div>
I want users to be able to select a file by clicking on the "Upload from xls" label:
openDialog() {
let myInputFile = <HTMLElement>document.querySelector('.inputFile');
myInputFile.click();
}
//This method is called after choosing a file
handleFileInput(files: FileList) {
var file = this.fileToUpload = files.item(0);
this.uploadFileService.pushFileToStorage(file);
}
Afterwards, we call this.uploadFileService.pushFileToStorage(file);
@Injectable()
export class UploadFileService {
constructor(private http: Http, private globals: Globals, private httpClient: HttpClient) { }
pushFileToStorage(file) {
let headers = new Headers();
let options = new RequestOptions({ headers: headers }); // Create header
let formData = new FormData();
formData.append('file', file); // Append file to formdata
console.log(file);
const req = this.httpClient.post('http://localhost:' + this.globals.tomcatPort + '/utils/saveFromFile', JSON.stringify(formData));
req.subscribe((data) => {
console.log(data); // Sucess response
}, (err: HttpErrorResponse) => {
// Error response
if (err.error instanceof Error) {
//client side error
console.log('An error occured: ', err.error.message);
}
else {
console.log('Backend returned code', err.status, 'body was ', err.error);
}
})
On the WebService side, my StorageController currently looks like this for testing purposes:
@RestController
@CrossOrigin(origins = "http://localhost:4200", maxAge = 3600)
@RequestMapping("/utils")
public class StorageController {
@PostMapping(value = "/saveFromFile", consumes = "multipart/form-data", produces = MediaType.APPLICATION_JSON_VALUE)
public void saveFromFile(@RequestParam("file") MultipartFile multipartFile) {
System.out.println(multipartFile);
}
@Bean
public CommonsMultipartResolver multipartResolver() {
CommonsMultipartResolver multipart = new CommonsMultipartResolver();
multipart.setMaxUploadSize(3 * 1024 * 1024);
return multipart;
}
@Bean
@Order(0)
public MultipartFilter multipartFilter() {
MultipartFilter multipartFilter = new MultipartFilter();
multipartFilter.setMultipartResolverBeanName("multipartResolver");
return multipartFilter;
}
}
Unfortunately, I'm facing the following error:
Failed to load http://localhost:8180/utils/saveFromFile: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 403.
The CORS issue only arises when trying to send a file.
Thank you in advance! Mateusz