How to post ajax call with multipart/form-data?

Question

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>");
                } 

                ..... 
             }
          }

Answer 1

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.