We Keep Coding

How to solve MissingServletRequestPartException inSpring upload

I am having a problem uploading picture in Spring. I have encountered countless problems, which i have tried to solve. For my current error i have tried all the solution provide by spring but it still persist. According to spring the issue of MissingServletRequestPartException can be solved by including a MultipartResolver.`http://docs.spring.io/spring/docs/current/javadoc-api/org/springframework/web/multipart/support/MissingServletRequestPartException.html. I have done that (find below), but the issue still persist.
Error
timestamp: 1490599131962, status: 400, error: "Bad Request",…}
error:"Bad Request"
exception:"org.springframework.web.multipart.support.MissingServletRequestPartException"
message:"Required request part 'uploadfile' is not present"
path:"/uploadFile"
Config
#Bean(name = "multipartResolver")
public CommonsMultipartResolver multipartResolver() {
CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver();
multipartResolver.setMaxUploadSize(100000);
return new CommonsMultipartResolver();
}
Controller
public ResponseEntity<?> uploadFile(#RequestParam("uploadfile") MultipartFile uploadfile, Picture picture, Principal principal, MultipartHttpServletRequest request) {
User user = (User) ((UsernamePasswordAuthenticationToken) principal).getPrincipal();
picture.setUser(user);
Iterator<String> itrator = request.getFileNames();
MultipartFile multiFile = request.getFile(itrator.next());
try {
System.out.println("File Length:" + multiFile.getBytes().length);
System.out.println("File Type:" + multiFile.getContentType());
// Crop the image (uploadfile is an object of type MultipartFile)
BufferedImage croppedImage = cropImageSquare(multiFile.getBytes());
String fileName=multiFile.getOriginalFilename();
System.out.println("File Name:" +fileName);
String path=request.getServletContext().getRealPath("/");
// Get the filename and build the local file path
File directory= new File(path+ "/uploads");
directory.mkdirs();
String filename = uploadfile.getOriginalFilename();
String ext = FilenameUtils.getExtension(filename);
File outPutFile = new File(directory.getAbsolutePath()+System.getProperty("file.separator")+picture.getUploadfile());
ImageIO.write(croppedImage, ext, outPutFile);
} catch (Exception e) {
System.out.println(e.getMessage());
return new ResponseEntity<>(HttpStatus.BAD_REQUEST);
}
pictureService.save(picture, uploadfile);
return new ResponseEntity<>(HttpStatus.ACCEPTED);
}
JS FILE
'use strict';
var $formUploader = $("#upload-file-input");
$formUploader.on("submit", function(e){
e.preventDefault();
var data = new FormData(this);
$.each($formUploader.serializeArray(), function(i, field) {
data[field.name] = field.value;
});*/
$.ajax({
//dataType: 'json',
url: $formUploader.prop('action'),
type: "POST",
//data: new FormData($("#upload-file-input")[0]),
data: data,
enctype: 'multipart/form-data',
processData: false,
contentType: false,
cache: false,
success: function (data) {
console.log(data);
// Handle upload success
$("#upload-file-message").text("File succesfully uploaded");
},
error: function (response) {
console.log(response);
// Handle upload error
$("#upload-file-message").text("File not uploaded (File might be big, size needed.)");
}
});
});
Form
<form id="upload-file-input" th:action="#{/uploadFile}" method="post" th:object="${picture}"
enctype="multipart/form-data" class="form-inline inline new-item">
<div th:replace="common/layout :: flash"></div>
<fieldset>
<legend> Upload Picture</legend>
<div class="row">
<div class="col s12 l8">
<div class="file-wrapper">
<input type="file" id="file" name="uploadfile" />
<span class="placeholder" data-placeholder="Choose an image...">Choose an image...</span>
<label for="file" class="button">Browse</label>
<span id="upload-file-message"></span>
</div>
</div>
<button type="submit" class="btn btn-primary">Upload</button>
</div>
</fieldset>
<div class="style16"></div>
</form>

You added all form values into the FormData, but didn't add a content of file. That's how it can be done:
...
var data = new FormData(this);
$.each($formUploader.serializeArray(), function(i, field) {
data[field.name] = field.value;
});
//next line will add content of file
data.append('fileContent', $('#file').files[0]);
$.ajax({ ...
You can use any name instead of fileContent, it doesn't matter.
In case when user enables to select multiple files at once, you have to add contents of all of this files:
...
var data = new FormData(this);
$.each($formUploader.serializeArray(), function(i, field) {
data[field.name] = field.value;
});
$.each($('#file').files, function(i, file) {
formData.append('fileContent' + i, file);
});
$.ajax({ ...

file and form upload at the same time using ajax in java web [duplicate]

I'm creating a JSP/Servlet web application and I'd like to upload a file to a servlet via Ajax. How would I go about doing this? I'm using jQuery.
I've done so far:
<form class="upload-box">
<input type="file" id="file" name="file1" />
<span id="upload-error" class="error" />
<input type="submit" id="upload-button" value="upload" />
</form>
With this jQuery:
$(document).on("#upload-button", "click", function() {
$.ajax({
type: "POST",
url: "/Upload",
async: true,
data: $(".upload-box").serialize(),
contentType: "multipart/form-data",
processData: false,
success: function(msg) {
alert("File has been uploaded successfully");
},
error:function(msg) {
$("#upload-error").html("Couldn't upload file");
}
});
});
However, it doesn't appear to send the file contents.

To the point, as of the current XMLHttpRequest version 1 as used by jQuery, it is not possible to upload files using JavaScript through XMLHttpRequest. The common workaround is to let JavaScript create a hidden <iframe> and submit the form to it instead so that the impression is created that it happens asynchronously. That's also exactly what the majority of the jQuery file upload plugins are doing, such as the jQuery Form plugin (an example).
Assuming that your JSP with the HTML form is rewritten in such way so that it's not broken when the client has JavaScript disabled (as you have now...), like below:
<form id="upload-form" class="upload-box" action="/Upload" method="post" enctype="multipart/form-data">
<input type="file" id="file" name="file1" />
<span id="upload-error" class="error">${uploadError}</span>
<input type="submit" id="upload-button" value="upload" />
</form>
Then it's, with the help of the jQuery Form plugin, just a matter of
<script src="jquery.js"></script>
<script src="jquery.form.js"></script>
<script>
$(function() {
$('#upload-form').ajaxForm({
success: function(msg) {
alert("File has been uploaded successfully");
},
error: function(msg) {
$("#upload-error").text("Couldn't upload file");
}
});
});
</script>
As to the servlet side, no special stuff needs to be done here. Just implement it exactly the same way as you would do when not using Ajax: How can I upload files to a server using JSP/Servlet?
You'll only need an additional check in the servlet if the X-Requested-With header equals XMLHttpRequest or not, so that you know how what kind of response to return for the case that the client has JavaScript disabled (as of now, it is mostly the older mobile browsers which have JavaScript disabled).
if ("XMLHttpRequest".equals(request.getHeader("X-Requested-With"))) {
// Return an Ajax response (e.g. write JSON or XML).
} else {
// Return a regular response (e.g. forward to JSP).
}
Note that the relatively new XMLHttpRequest version 2 is capable of sending a selected file using the new File and FormData APIs. See also HTML5 drag and drop file upload to Java Servlet and Send a file as multipart through XMLHttpRequest.

Monsif's code works well if the form has only file type inputs. If there are some other inputs other than the file type, then they get lost. So, instead of copying each form data and appending them to FormData object, the original form itself can be given to the constructor.
<script type="text/javascript">
var files = null; // when files input changes this will be initialised.
$(function() {
$('#form2Submit').on('submit', uploadFile);
});
function uploadFile(event) {
event.stopPropagation();
event.preventDefault();
//var files = files;
var form = document.getElementById('form2Submit');
var data = new FormData(form);
postFilesData(data);
}
function postFilesData(data) {
$.ajax({
url : 'yourUrl',
type : 'POST',
data : data,
cache : false,
dataType : 'json',
processData : false,
contentType : false,
success : function(data, textStatus, jqXHR) {
alert(data);
},
error : function(jqXHR, textStatus, errorThrown) {
alert('ERRORS: ' + textStatus);
}
});
}
</script>
The HTML code can be something like following:
<form id ="form2Submit" action="yourUrl">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br>
<input id="fileSelect" name="fileSelect[]" type="file" multiple accept=".xml,txt">
<br>
<input type="submit" value="Submit">
</form>

$('#fileUploader').on('change', uploadFile);
function uploadFile(event)
{
event.stopPropagation();
event.preventDefault();
var files = event.target.files;
var data = new FormData();
$.each(files, function(key, value)
{
data.append(key, value);
});
postFilesData(data);
}
function postFilesData(data)
{
$.ajax({
url: 'yourUrl',
type: 'POST',
data: data,
cache: false,
dataType: 'json',
processData: false,
contentType: false,
success: function(data, textStatus, jqXHR)
{
//success
},
error: function(jqXHR, textStatus, errorThrown)
{
console.log('ERRORS: ' + textStatus);
}
});
}
<form method="POST" enctype="multipart/form-data">
<input type="file" name="file" id="fileUploader"/>
</form>

This code works for me.
I used Commons IO's io.jar, Commons file upload.jar, and the jQuery form plugin:
<script>
$(function() {
$('#upload-form').ajaxForm({
success: function(msg) {
alert("File has been uploaded successfully");
},
error: function(msg) {
$("#upload-error").text("Couldn't upload file");
}
});
});
</script>
<form id="upload-form" class="upload-box" action="upload" method="POST" enctype="multipart/form-data">
<input type="file" id="file" name="file1" />
<span id="upload-error" class="error">${uploadError}</span>
<input type="submit" id="upload-button" value="upload" />
</form>
boolean isMultipart = ServletFileUpload.isMultipartContent(request);
if (isMultipart) {
// Create a factory for disk-based file items
FileItemFactory factory = new DiskFileItemFactory();
// Create a new file upload handler
ServletFileUpload upload = new ServletFileUpload(factory);
try {
// Parse the request
List items = upload.parseRequest(request);
Iterator iterator = items.iterator();
while (iterator.hasNext()) {
FileItem item = (FileItem) iterator.next();
if (!item.isFormField()) {
String fileName = item.getName();
String root = getServletContext().getRealPath("/");
File path = new File(root + "../../web/Images/uploads");
if (!path.exists()) {
boolean status = path.mkdirs();
}
File uploadedFile = new File(path + "/" + fileName);
System.out.println(uploadedFile.getAbsolutePath());
item.write(uploadedFile);
}
}
} catch (FileUploadException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
}

Image upload using angularjs and servlet

I am trying to upload an image from html --> angularjs --> servlet --> database (here am using the post method).
My html is
<form class="formCls" ng-submit="addTravel()">
<input type="text" placeholder="Title" ng-model="travel.title"><br>
<input type="text" placeholder="Place from" ng-model="travel.from"><br>
<input type="text" placeholder="Place To" ng-model="travel.to"><br>
<input type="text" placeholder="With" ng-model="travel.withFrnd"><br>
<input type="file" ng-model-instant onchange="angular.element(this).scope().imageUpload(this)"><br>
<input type="submit" id="formSubmit" value="Submit">
<input type="reset" value="Reset"><br><br>
</form>
and my app.js is
$scope.imageUpload = function(element) {
var reader = new FileReader();
reader.onload = $scope.imageIsLoaded;
reader.readAsDataURL(element.files[0]);
}
$scope.imageIsLoaded = function(e) {
$scope.$apply(function() {
$scope.stepsModel.push(e.target.result);
});
}
$scope.addTravel = function() {
alert($scope.travel);
console.log($scope.stepsModel);
$http({
method : 'POST',
url : 'NewTravel',
headers : {
'Content-Type' : undefined
},
params : {
title : $scope.travel.title,
from : $scope.travel.from,
to : $scope.travel.to,
withFriend : $scope.travel.withFrnd,
imageArray : $scope.stepsModel
}
}).success(function(data, status, headers, config) {
console.log("I am done");
console.log("data " + data);
console.log(status);
console.log(headers);
console.log(config);
$scope.uploaded = 'uploaded Successfully';
$scope.travel = {};
somethingChanged = false;
}).error(function(data, status, headers, config) {
console.log("You need to nail me");
$scope.uploaded = 'Sorry';
});
}
and in servlet am getting it as
#Override
protected void service(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
System.out.println("I came to servlet");
System.out.println("Image Array"+request.getParameterValues("imageArray"));
String tvTitle = request.getParameter("title");
String tvFrom = request.getParameter("from");
String tvTo = request.getParameter("to");
String tvWith = request.getParameter("withFriend");
String tvImage = request.getParameterValues("imageArray");
System.out.println(tvTitle+"\n"+tvFrom+"\n"+tvTo+"\n"+tvWith+"\n"+tvImage);
}
}
if i do like this am not able to get the data at in the server side, am getting the error as con_Aborted or 400 bad request.
how do I upload an image and how do i get that image in the servlet. is that correct way of getting the image in servlet

how to take data from a Java servlet and put it on an existent html page

edit: i have already read this question "How to use Servlets and Ajax?" it talks about generating something in the same page, i want to take data from the page to the servlet then redirect to another page and fill some existing text areas.
Hi i'm new on stackoverflow and i am new in programming. I'm doing a web app where i have to search something from an html page to the db, and this is not a problem.
The problem is that when the ajax call produces the data i have to create a button too that redirects me to an existing html page, at the same time the button have to send the data to load in the other page to the servlet (i have already done this, it now produces the json but i don't know how to insert it into the other page) and i don't know how to say to the servlet "hey take this little data from the search page, find the record and load the edit page with the data i want in!".
I prefer to not use a JSP but if it is the only way..
these are the buttons in the search function:
<form>
<button name="delA" class="btn btn-danger" type="submit" value="' + data[i].key + '" formaction="delete" formmethod="post" onclick="clickedConfirm(event)"></button>
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
<button name="row" class="btn btn-warning" type="submit" value="' + data[i].key + '" href="http://localhost:8080/label-editor/edit.html" formaction="edit" formmethod="get"></button>
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</form>
this is the edit servlet:
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
LabelManager lm = new LabelManager();
JSONSerializer js = new JSONSerializer();
String json = "";
String paramRow = req.getParameter("row");
ServletOutputStream out = resp.getOutputStream();
if(paramRow != null){
Collection<LabelModel> label = null;
label = lm.searchLabelK(paramRow);
json = js
.exclude("*.class")
.exclude("locale.ISO3Language")
.exclude("locale.baseLocale")
.exclude("locale.country")
.exclude("locale.displayCountry")
.exclude("locale.displayLanguage")
.exclude("locale.displayScript")
.exclude("locale.displayVariant")
.exclude("locale.language")
.exclude("locale.localeExtensions")
.exclude("locale.script")
.exclude("locale.variant")
.serialize(label);
resp.setContentType("application/json");
out.print(json);
out.flush();
}
}
I was thinking about an ajax call like this but i don't know how to complete it, i cant find anything that could help:
function editlabel() {
$.ajax({
url : 'edit',
data : {
row : getUrlParameter('row')
},
success : function(data, status, xhr) {
$('#edit').submit(function(response) {
if (data.length > 0) {
$('#key').val(data[0].key)
console.log("stampo il titolo");
for (var i = 1; i < data.key.length; i++) {
var row = data[i];
$('#val' + i).val(row.value)
console.log("ciclo " + row);
}
}
});
},
error : function(req, status, err) {
console.log('Something went wrong', status, err);
}
});
}
Thank you for your time and your help
p.s. sorry for my bad english

the button:
<button title="Modifica label" name="id" class="btn btn-warning" onclick="edit(\'' + data[i].id + '\')">
the function:
function edit(id){
window.location = 'new.html?id=' + id;
};
then a function onload in the html page where i will be redirect with the substring:
function editlabel() {
var param = window.location.search.substr(1);
if(param != ""){
var k = param.split("id=")[1];
var id = decodeURI(k)

Why I am seeing the name attribute of file tag in the html for when I call getName() in Servlet?

So this is in my web.xml:
<servlet>
<servlet-name>UploadFileServlet</servlet-name>
<servlet-class>com.tugay.julyseventeen.UploadFileServlet</servlet-class>
<multipart-config>
<max-file-size>20000</max-file-size>
<file-size-threshold>20000</file-size-threshold>
</multipart-config>
</servlet>
<servlet-mapping>
<servlet-name>UploadFileServlet</servlet-name>
<url-pattern>/uploadFile</url-pattern>
</servlet-mapping>
And the form I have:
<form action="${pageContext.servletContext.contextPath}/uploadFile" method="post"
enctype="multipart/form-data">
<label for="name">Your name here:
<input type="text" name="name" id="name"/>
</label>
<input type="file" name="xxx" id="file"/>
<input type="submit"/>
</form>
And in the Servlet I have:
public class UploadFileServlet extends HttpServlet {
#Override
protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse)
throws ServletException, IOException {
String name = httpServletRequest.getParameter("name");
Part file = httpServletRequest.getPart("xxx");
InputStream inputStream = file.getInputStream();
int read;
final byte[] bytes = new byte[1024000];
System.out.println(file.getName());
}
}
So here file.getName() will return me "xxx" which I do not like. I want to get the name of the file being uploaded. How can I?

Since Servlet API 3.1, the Part interface provides the getSubmittedFileName() method which does what you need.
Gets the file name specified by the client

Use Commons Fileupload library provided by Apache that makes it easy to add robust, high-performance, file upload capability to your servlets and web applications.
Sample code:
List<FileItem> multiparts = new ServletFileUpload(
new DiskFileItemFactory()).parseRequest(request);
for(FileItem item : multiparts){
if(!item.isFormField()){
String name = new File(item.getName()).getName();
}
}
Find complete code here and here

I did something very similar recently using a Multipart file, and using ajax to post to my controller.
Form:
<form enctype="multipart/form-data" id="inputForm">
<input id="file" type="file" name="file" />
</form>
<input onclick="Javascript: upload()" type="submit" value="Upload" />
JS:
function upload() {
var data = new FormData($('#inputForm')[0]);
$.ajax({
type : 'POST',
url : 'upload',
data : data,
cashe : false,
contentType : false,
processData : false,
success : function(response) {
alert(response);
},
error : function() {
alert("Didn't work");
}
});
}
Controller:
#ResponseBody
#ResponseStatus(HttpStatus.OK)
#RequestMapping(value = "/upload", method = RequestMethod.POST)
public String upload(#RequestBody MultipartFile file) {
System.out.println("Uploaded - " + file.getOriginalFilename());
}
This should give you the file name you're looking for.
I don't know if you're using SpringMVC or not, but if you are, this is what I did. You're going to want to import org.springframework.web.multipart.MultipartFile for the MultipartFile.