I am attempting to upload a file with a progress bar feature.
var fileInput = document.getElementById('jquery-ajax-single')
var form = new FormData();
form.append('uploadFile',fileInput.files[0]);
$.ajax({
url: "file/upload",
processData : false,
contentType : false,
data : form,
type : 'POST',
xhr: function() {
var xhr = $.ajaxSettings.xhr();
xhr.upload.onprogress = function(e) {
console.log(Math.floor(e.loaded / e.total *100) + '%');
$('#progress-jquery-ajax-single.progress-bar-progress').css(
'width', Math.floor(e.loaded / e.total * 400)+ 'px'
);
};
return xhr;
}
});
The above code is functional and successfully directs to the FileController.
@Controller
@RequestMapping("/file")
public class FileController {
@RequestMapping(value = "/upload", method = RequestMethod.POST, headers = "X-Requested-With=XMLHttpRequest")
public void upload(@RequestParam MultipartFile uploadFile){
System.out.println("name : " + uploadFile.getOriginalFilename());
System.out.println("content-type : " + uploadFile.getContentType());
System.out.println("size : " + uploadFile.getSize());
}
}
After each ajax process, the upload progress is displayed. Once it reaches 100%, it goes to the FileController and displays the file information. However, checking the Chrome browser console shows:
jquery-2.1.4.js:8630 POST http://localhost:8080/FileUploadWeb/file/upload 404 (Not Found).
I also attempted using dropzone.js, which resulted in the same error 404 but modified the URL to http://localhost:8080/FileUploadWeb/file/file/upload
<form id="my-dropzone"action="file/upload" class="dropzone"></form>