How to post ajax call with multipart/form-data?
You can't upload a file with AJAX.
Ext's Ajax
can emulate it though. See the doc of the request
method. You have to use the form
and isUpload
options.
However, since you have to use a form anyway, you should look at Ext.form.field.Field
(and, as suggested in the doc, to Ext.form.Basic.hasUpload
; that will give you a better understanding of the file upload problematic).
EDIT: In fact, HTML5 and XMLHttpRequest Level 2 adds support for file upload. Doesn't change how you have to handle it in Ext, though.
JS11
Updated on June 04, 2022Comments
-
JS11 over 1 year
I need to upload a file from extjs page, via AJAX call, to the server. I am able to do it with simple HTML page to servlet but using extjs (v4.0.7) i am not getting file in my servlet when i pars request. Servlet recognizes multipart page but nothing comes with the call. Can anyone tell me what I am doing wrong in my code?
EXTJS code:
var fileName = Ext.getCmp("fileName").getValue(); Ext.Ajax.request({ url : 'UploadServlet', method: 'POST', headers: {'Content-Type': 'multipart/form-data'}, params :{ 'fileName': fileName.trim() }, success: function ( result, request ) { resultData = result.responseText; }, failure: function ( result, request ) { resultData = result.responseText; } });
Servlet code:
protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException { ....... // Check that we have a file upload request isMultipart = ServletFileUpload.isMultipartContent(request); response.setContentType("text/html"); java.io.PrintWriter out = response.getWriter( ); if( !isMultipart ){ // display no file attached error return; } // Create a factory for disk-based file items DiskFileItemFactory factory = new DiskFileItemFactory(); // maximum size that will be stored in memory factory.setSizeThreshold(maxMemSize); // Location to save data that is larger than maxMemSize. factory.setRepository(new File(tempDir)); // Create a new file upload handler ServletFileUpload upload = new ServletFileUpload(factory); // maximum file size to be uploaded. upload.setSizeMax( maxFileSize ); try{ // Parse the request to get file items. ////// fileItems is empty, ////nothing is comming from extjs page///////// List<FileItem> fileItems = upload.parseRequest(request); // Process the uploaded file items Iterator<FileItem> i = fileItems.iterator(); while ( i.hasNext () ) { FileItem fi = (FileItem)i.next(); if ( !fi.isFormField () ) { // Get the uploaded file parameters String fieldName = fi.getFieldName(); String fileName = fi.getName(); String contentType = fi.getContentType(); boolean isInMemory = fi.isInMemory(); long sizeInBytes = fi.getSize(); // check if file exists File propFile = new File(tempDir, fileName.substring( fileName.lastIndexOf("\\"))); if (!propFile.exists()) { // Write the file if( fileName.lastIndexOf("\\") >= 0 ){ file = new File(tempDir + fileName.substring( fileName.lastIndexOf("\\"))) ; }else{ file = new File( tempDir + fileName.substring(fileName.lastIndexOf("\\")+1)) ; } //InputStream uploadedStream = fi.getInputStream(); fi.write( file ) ; out.println("Uploaded Filename: " + fileName + " is in " + filePath + "<br>"); } ..... } }