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

12,732

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.

Share:
12,732
JS11
Author by

JS11

Updated on June 04, 2022

Comments

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