JQuery/Ajax & Spring Rest Multi-part form submit - javascript

I am quite new to JQuery and I was trying to do some asynchronous multipart form uploading. The form consist of few data fields and a file type. I have set up the server side code (Spring) like this:
#RequestMapping(method = RequestMethod.POST)
public #ResponseBody
Upload multipleSave(MultipartHttpServletRequest request)
{
Upload upload = new Upload();
Iterator<String> iterator = request.getFileNames();
while (iterator.hasNext())
{
MultipartFile file = request.getFile(iterator.next());
try
{
System.out.println(MessageFormat.format("File Length: {0}", Arrays.toString(file.getBytes())));
System.out.println("File Type: " + file.getContentType());
upload.setContent(file.getBytes());
upload.setDocId(id++);
upload.setError(null);
upload.setName(file.getName());
upload.setSize(file.getSize());
fileList.put(upload.getDocId().toString(), upload);
} catch (Exception e)
{
System.out.println("Error occurred: " + e);
upload.setError("500: Something went wrong!");
}
}
return upload;
}
and client side code like this:
function processFileUpload()
{
console.log("fileupload clicked");
var formData = new FormData();
formData.append("file", files[0]);
$.ajax({dataType: 'json',
url: "/SpringJqueryFileUpload/upload",
data: formData,
type: "POST",
enctype: 'multipart/form-data',
processData: false,
contentType: false,
success: function (result) {
alert('success' + JSON.stringify(result));
},
error: function (result) {
alert('error' + JSON.stringify(result));
}
});
}
When I do submit, the server responds with this:
java.lang.IllegalArgumentException: No converter found for return value of type: class com.upload.model.Upload
I am wondering with error. Could I be missing something here??

I would try changing your annotation to:
#RequestMapping(method = RequestMethod.POST, produces=MediaType.APPLICATION_JSON_VALUE)
And make sure you have Jackson (which Spring uses for JSON serialization) properly on your path. Also, make sure your Upload class is serializable, e.g. is not private or anything like that. If it is just a normal Java bean type class it should be fine.
Lastly, if that doesn't work you can turn on Spring debug logs with something like:
log4j.category.org.springframework.web=ALL
in your log4j.properties file.

Related

Sending byte array over ajax [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I am having ajax request which is working only half way.
function receivedText() {
alert(fr.result); //Here i have good result
$.ajax({
type: "POST",
url: "/Gallery/UploadImage",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: {
byteArray: fr.result,
fileName: $('input[type=file]').val().split('\\').pop()
},
success: function (data) {
if (data == 0)
alert("error");
else
alert("Success");
},
error: function () {
alert("ERROR");
}
});
}
Here is my request. As you can see i commented up there that in my test(alert) fr.result has value BUT when i debug and go see it in my controller, it is NULL.
Here is my controller.
[HttpPost]
public IActionResult UploadImage(byte[] byteArray, string fileName)
{
try
{
System.IO.File.WriteAllBytes(_hostingEnvironment.WebRootPath + "\\Uploads\\Images\\" + fileName, byteArray);
return Json(0);
}
catch
{
return Json(0);
}
}
Your're using ajax in a wrong way.
The first error is a mismatch with Content-Type
$.ajax({
...
contentType: "application/json; charset=utf-8",
...
data: {
byteArray: fr.result,
fileName: $('input[type=file]').val().split('\\').pop()
},
...
}
Although you've set the Content-Type=application/json, the payload sent to server will be form-url-encoded by default:
fileName=Xyz&byteArray=
If you need JSON format, you should use JSON.stringify({...}) to get a text representation.
The contentType: "application/json; is not suitable here. That's because :
The JSON is not designed to deal with binary data but used for text. You can't send a byte[] with json.
The server side code expects simple type from query/routes/form. If you need json, they should be something like IActionResult UploadImage([FromBody] Fr fr)
If you're sending an image, the easiest way is to use the Content-Type of multipart/form-data with the IFormFile on the server side at the same time.
// action method
public IActionResult UploadImage(IFormFile image, string fileName)
{
// ...
}
and now you could send a FormData :
// your receivedText() function
function receivedText(){
var formData = new FormData();
formData.append('fileName', 'Xyz.img');
// if you need upload image
var inputFileElement=document.getElementById("inputFileImage");
formData.append('image', inputFileElement.files[0]);
// of if you're already have a `byte[]`, you could do it as below:
// var blob = new Blob([bytearray]...); // see https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob
// formData.append('image', blob);
$.ajax({
type: "POST",
url: "/Gallery/UploadImage",
contentType: false,
processData: false,
data: formData,
success: function (data) {
console.log(data);
// ...
},
error: function () {
// ...
}
});
}
That would be your idea:
public class UploadImageBindings {
public string byteArray {get;set;}
public string fileName {get;set;}
}
[HttpPost]
public IActionResult UploadImage(UploadImageBindings bindings)
{
try
{
var bytes = System.Text.Encoding.UTF8.GetBytes(bindings.byteArray);
System.IO.File.WriteAllBytes(_hostingEnvironment.WebRootPath + "\\Uploads\\Images\\" + bindings.fileName, bytes);
return Json(0);
}
catch
{
return Json(0);
}
}
Your problem is that you not post as byte[] but you have to post as string !

Ajax POST FormData throw exception in Spring MVC

Yesterday I had a similar problem where Ajax POST method returned 405 error which was caused by csrf token. Someone helped mi with this, but now I'm powerless what is happening.
I have an Ajax POST request:
$(document).ready(function(){
var mic, recorder, soundFile;
setup();
})
function setup() {
mic = new p5.AudioIn();
mic.start();
recorder = new p5.SoundRecorder();
recorder.setInput(mic);
soundFile = new p5.SoundFile();
}
function toggleRecording(e) {
if (e.classList.contains("recording")) {
recorder.stop();
e.classList.remove("recording");
sendAudioToServer(soundFile)
} else {
e.classList.add("recording");
recorder.record(soundFile);
}
}
function sendAudioToServer(soundFile)
{
var data = new FormData();
data.append('file', soundFile);
$.ajax({
method: 'POST',
enctype: 'multipart/form-data',
url: '/recognizeCommand',
data: data,
processData: false,
contentType: false,
success: function(data) {
alert("works!");
},
error: function(xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
})
}
soundFile is an object from p5.js library which contain audio. I also try with simple String but there is the same error
And a controller in Spring MVC:
#RequestMapping(value = "/recognizeCommand", method = RequestMethod.POST)
public #ResponseBody String recognizeCommand(#RequestParam("file") MultipartFile multipartFile) {
try {
SpeechRecognitionApplication.logger.info("BEFORE: " + multipartFile);
byte[] bytes = multipartFile.getBytes();
SpeechRecognitionApplication.logger.info(bytes);
} catch (IOException e) {
e.printStackTrace();
}
return "finish";
}
When I send this Ajax request it throws error 400 and there is exception in Spring:
org.springframework.web.multipart.support.MissingServletRequestPartException: Required request part 'file' is not present
at org.springframework.web.method.annotation.RequestParamMethodArgumentResolver.handleMissingValue(RequestParamMethodArgumentResolver.java:199) ~[spring-web-5.0.5.RELEASE.jar:5.0.5.RELEASE]
at org.springframework.web.method.annotation.AbstractNamedValueMethodArgumentResolver.resolveArgument(AbstractNamedValueMethodArgumentResolver.java:112) ~[spring-web-5.0.5.RELEASE.jar:5.0.5.RELEASE]
at org.springframework.web.method.support.HandlerMethodArgumentResolverComposite.resolveArgument(HandlerMethodArgumentResolverComposite.java:124) ~[spring-web-5.0.5.RELEASE.jar:5.0.5.RELEASE]
at org.springframework.web.method.support.InvocableHandlerMethod.getMethodArgumentValues(InvocableHandlerMethod.java:161) [spring-web-5.0.5.RELEASE.jar:5.0.5.RELEASE]
at org.springframework.web.method.support.InvocableHandlerMethod.invokeForRequest(InvocableHandlerMethod.java:131) [spring-web-5.0.5.RELEASE.jar:5.0.5.RELEASE]
at org.springframework.web.servlet.mvc.method.annotation.ServletInvocableHandlerMethod.invokeAndHandle(ServletInvocableHandlerMethod.java:102) [spring-webmvc-5.0.5.RELEASE.jar:5.0.5.RELEASE]
at org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.invokeHandlerMethod(RequestMappingHandlerAdapter.java:877) [spring-webmvc-5.0.5.RELEASE.jar:5.0.5.RELEASE]
at org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.handleInternal(RequestMappingHandlerAdapter.java:783) [spring-webmvc-5.0.5.RELEASE.jar:5.0.5.RELEASE]
at org.springframework.web.servlet.mvc.method.AbstractHandlerMethodAdapter.handle(AbstractHandlerMethodAdapter.java:87) [spring-webmvc-5.0.5.RELEASE.jar:5.0.5.RELEASE]
at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:991) [spring-webmvc-5.0.5.RELEASE.jar:5.0.5.RELEASE]
at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:925) [spring-webmvc-5.0.5.RELEASE.jar:5.0.5.RELEASE]
at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:974) [spring-webmvc-5.0.5.RELEASE.jar:5.0.5.RELEASE]
at org.springframework.web.servlet.FrameworkServlet.doPost(FrameworkServlet.java:877) [spring-webmvc-5.0.5.RELEASE.jar:5.0.5.RELEASE]
What is important that when I tested endpoint with postman and send some file as parameter it works correctly.
I know there are similar posts on this forum but seriously I checked each of them, try every solution and nothing can help.
I believe that some of you will have any idea how to solve this problem.
EDIT
Added this 3 lines before ajax post method:
data.append('file', "example");
console.log("file: " + data.get("file"));
console.log(data);
returns:
I guess problem is not with spring controller, but the way the file is passed to request. To ensure that file is passed, you can log into browser to check if file is present :
console.log("file" + data.get("file"));
Could you show the code you use to get file from input ?
EDIT:
Could you tes your endpoint with this simle file upload form ?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function handleFileSelect() {
var data = new FormData();
input = document.getElementById('fileinput');
data.append('file', input.files[0]);
console.log("file" + data.get("file"));
$.ajax({
method: 'POST',
enctype: 'multipart/form-data',
url: 'http://localhost:8080/test/recognizeCommand',
data: data,
processData: false,
contentType: false,
success: function (data) {
alert("works!");
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
}
</script>
</head>
<body>
<input type="file" id="fileinput"/>
<input type='button' id='btnLoad' value='Test' onclick='handleFileSelect();'>
</body>
</html>
You are getting this exception
org.springframework.web.multipart.support.MissingServletRequestPartException: Required request part 'file' is not present
and if you look this part of yor code
public #ResponseBody String recognizeCommand(#RequestParam("file") MultipartFile multipartFile)
You are using #RequestParam, so you have to change your code to
#RequestMapping(value = "/recognizeCommand", method = RequestMethod.POST, consumes = { "multipart/form-data" })
public #ResponseBody String recognizeCommand(#RequestPart("file") MultipartFile multipartFile) {
and it should work

how to download file into aclient from server without Returning filepathresult

i saw this code for downloading a file into client from server...
public ActionResult Download()
{
string file = #"c:\someFolder\foo.xlsx";
string contentType = "application/pdf";
return File(file, controntType, Path.GetFileName(file));
}
But the problem is that i have to do two different things in this Download method.Atfirst ,i want to download the file and then i need to get path of downloaded file and pass in to a documentviewr to display it.so i wrote this code in view razor.
function navigate(target) {
$.ajax({
url: '#Url.Action("Download", "Patient")',
type: 'GET',
dataType: 'json',
cache: false,
data: { 'filepath' : target },
success: function (results) {
event.preventDefault();
documentViewr.loadDocument(results);
},
error: function () {
alert('Error occured');
}
});
}
and in my controller i wrote this:
[HttpGet]
public JsonResult Download(string filepath)
{
var content_type = "";
//path = Path.Combine("D:\file1", filename);
content_type = "application/pdf";
FilePathResult file = File(filepath, content_type,
Path.GetFileName(filepath));
String sDocID, sDocPath;
ViewerController vc = new ViewerController();
sDocPath = Server.MapPath(".") + "\\App_Data\\sample.docx";
sDocID = vc.LoadDocument(sDocPath);
return Json(sDocID, JsonRequestBehavior.AllowGet);
}
so my question is that how i can merge this two actions together?because if i do not return FilePathResult i can not download the file..my another question is that how i can define the path in which file will be downloded?can i tell it to download files into for example Server.MapPath(".") + "\App_Data\...??
i will be grateful if u can help me....

Download file with ajax() POST request via Spring MVC

I try to download a file. The action is triggered by ajax() POST request. The request sends data in JSON format to the controller. The controller generates the file (bytes) and sends it back.
JavaScript:
function getLicenseFile() {
$.ajax({
type: 'POST',
url: '<%=request.getContextPath()%>/licenses/rest/downloadLicenseFile',
dataType: 'json',
contentType: 'application/json;charset=UTF-8',
data: ko.mapping.toJSON(licenseModel),
success: function (data) {
console.log("in sucess")
},
error:function (xhr, ajaxOptions, thrownError){
console.log("in error")
}
});
}
Controller:
#RequestMapping(value = "/licenses/rest/downloadLicenseFile", method = RequestMethod.POST)
#ResponseStatus(value=HttpStatus.OK)
#ResponseBody
public void createLicenseFile(#Valid #RequestBody License license, HttpServletResponse response) throws Exception {
logger.debug("Contoller License in: "+ license);
byte[] licensedata = licenseEncodeDefaultService.createLicenseFile(license);
logger.debug("licenseData: " + new String(licensedata));
response.setHeader("Content-Disposition", "attachment; filename=\"" + license.getCustomer() + ".license\"");
response.getOutputStream().write(licensedata);
response.flushBuffer();
}
Problem
The Browser should open a download box, but it does not happen
The response is handled in the error: section of ajax function (but the HTTP Status is OK)
So what do I do wrong or what is the proper way to do this?
Just send a URL of file in response and then "visit" it in your success callback.
function getLicenseFile() {
$.ajax({
type: 'POST',
url: '<%=request.getContextPath()%>/licenses/rest/downloadLicenseFile',
dataType: 'json',
contentType: 'application/json;charset=UTF-8',
data: ko.mapping.toJSON(licenseModel),
success: function (data) {
window.open(data.fileUrl);
// or window.location.href = data.fileUrl;
},
error:function (xhr, ajaxOptions, thrownError) {
console.log("in error");
}
});
}
data.fileUrl should be set in response by server to say client where to get the file.
So your server will send a response with JSON like
{
"fileUrl": "http://mysite.com/files/0123456789"
}
#will824 As you ask I'll post my own solution.
I used a workaround in controller and save the file temporarily in the files ystem (/tmp). I split up the function in 2 steps. Creating and downloading.
This is not very nice but good enough for me.
Controller (creates a file, will be saved on the server file system):
#RequestMapping(value = "/licenses/rest", method = RequestMethod.PUT)
#ResponseStatus(value=HttpStatus.OK)
#ResponseBody
public String createLicenseFile(#Valid #RequestBody License license) throws Exception {
// create encrypted license file and send the name back to view
String fileName = licenseEncodeDefaultService.createLicenseFile(license);
return fileName;
}
Controller (downloads a file):
#RequestMapping(value = "/licenses/downloadFile/{file}", method = RequestMethod.GET)
public void downloadLicenseFile(#PathVariable("file") String file, HttpServletResponse response) throws Exception {
// create full filename and get input stream
File licenseFile = new File ("/tmp/" + file);
InputStream is = new FileInputStream(licenseFile);
// set file as attached data and copy file data to response output stream
response.setHeader("Content-Disposition", "attachment; filename=\"" + file + ".license\"");
FileCopyUtils.copy(is, response.getOutputStream());
// delete file on server file system
licenseFile.delete();
// close stream and return to view
response.flushBuffer();
}
JavaScript:
function getLicenseFile() {
//console.log(ko.mapping.toJSON(licenseModel));
$.ajax({
type : 'PUT',
url : '${pageContext.request.contextPath}/licenses/rest',
dataType : 'text',
contentType : 'application/json;charset=UTF-8',
data : ko.mapping.toJSON(licenseModel),
success : function(data) {
window.location.href = '${pageContext.request.contextPath}/licenses/downloadFile/'
+ data;
},
error : function(xhr, ajaxOptions, thrownError) {
// error handling
}
});
}
If you want download file without change URL, you can call form.submit() programmatically instead of using AJAX.
JavaScript:
function downloadFileUsingForm(url) {
var form = document.createElement("form");
form.method = "post";
form.action = url;
document.body.appendChild(form);
form.submit();
document.body.removeChild(form);
}
downloadFileUsingForm("/YourController/DownloadFile");
Controller:
[HttpPost]
public ActionResult DownloadFile()
{
string content = "Some Values";
byte[] bytes = System.Text.UTF8Encoding.UTF8.GetBytes(content);
return File(bytes, System.Net.Mime.MediaTypeNames.Application.Octet, "file.txt");
}
As the comments said you can't do it with an ajax call, but you can do it with plain Javascript.
function getLicenseFile() {
var downloadUrl = "${pageContext.request.contextPath}/licenses/rest/downloadLicenseFile";
// (optionally) provide the user with a message that the download is starting
window.location.href = downloadUrl;
}
Note the use of ${pageContext.request.contextPath}, which is preferred over <%=request.getContextPath()%>.
Ajax is not going to help you try with hidden form approach
<form action='../servletname' method='POST' id='formid'>
<input type='hidden' value='' name='name' id='id'/>
<input type='hidden' value=' ' name='name' id='id' />
</form>
pass you json through form field
on click of of your download button submit form
$('#formid').submit();
then in server side
response.setContentType("application/vnd.ms-excel");
response.setHeader("Content-Disposition", "attachment; filename=filnemae.fileformat");
ServletOutputStream out = res.getOutputStream();
write on ouput stream then close or flush
if you are sending large data through post update postsize in server.xml

HTTP POST data not going from AJAX to C# MVC 5 Backend

As the title states, I'm trying to send data from a Javascript frontend to my C# MVC 5 backend, and it doesn't seem to make it. I've run through it with the debugger in Visual Studio and the data I'm trying to pass always ends up null.
Here is my front end code:
var file = $("#my-file").files[0];
file = file[0];
var formData = new FormData();
var MyData = {
Name: "Form 133",
Attachments: {
Type: "Check"
}
};
formData.append('file', file);
$.ajax({
type: "POST",
url: '/NMISProduct/Index',
contentType: false,
processData: false,
data: { formData: formData, MyData: MyData },
success: function (result) {
console.log(result);
},
error: function (xhr, status, p3, p4) {
var err = "Error " + " " + status + " " + p3 + " " + p4;
if (xhr.responseText && xhr.responseText[0] == "{")
err = JSON.parse(xhr.responseText).Message;
console.log(err);
}
});
Backend code:
[HttpPost]
public async Task<JsonResult> Index(MyData MyData)
{
Debug.WriteLine(Request.Params["MyData"]);
Debug.WriteLine(MyData.Name);
try
{
foreach (string file in Request.Files)
{
var fileContent = Request.Files[file];
if (fileContent != null && fileContent.ContentLength > 0)
{
// get a stream
var stream = fileContent.InputStream;
// and optionally write the file to disk
var fileName = fileContent.FileName;
var path = Path.Combine(Server.MapPath("~/App_Data/"), fileName);
using (var fileStream = System.IO.File.Create(path))
{
stream.CopyTo(fileStream);
}
}
}
}
catch (Exception)
{
return Json("Upload failed");
}
return Json("File uploaded successfully");
}
public class MyData
{
public string Name { get; set; }
public Attachment Attachments { get; set; }
}
public class Attachment
{
public string Type { get; set; }
}
As I stated, on the Backend MyData always ends up being null. What am I doing wrong?
jQuery docs state:
processData (default: true)
Type: Boolean
By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data, set this option to false.
The problem is that you are trying to send MyData as an object while setting processData to false. Which will result in the data not being processed before being send. The data property should contain a query string of the form key1=value1&key2=value2, or an object of the form {key1: 'value1', key2: 'value2'}, the latter will be converted into a query string before being send unless you are setting processData to false.
So if you want to send your formData along with the MyData you will need to append the MyData to the formData before sending it like so.
formData.append('Name', 'Form 133');
formData.append('Type', 'Check');
And then in the $ajax call add the FormData to the data property like so.
data: formData,
contentType setting to false you just told him to not sending any data in the header so basically the tag [HttpPost] become useless.
processData setting to false you told him not to process has and object so rendering MyData useless again by setting to true if i remember correctly it mean process anything beside string has a object.
$.ajax({
url: "#Url.Action("Your METHOD", "Your Controller")",
type: "POST",
contentType: "application/json",
data: JSON.stringify({ MyData: MyData}),
success: function(response) {
response ? alert("Process") : alert("Boom");
}
});

Categories