Not getting file data in Extjs Ajax request

Question

I have a form on form-window, and inside form window I have a form with many fields and one upload button. When try to submit form using Ajax.request I have got textfield value but can not get file data. Except filename.

    var fd = Ext.getCmp('users-form').form;
    var fileInput = document.getElementById('company_logo');
    console.log(fd.getEl().dom.files);
    params = {
        name            : fd.findField('name').getValue(),
        login           : fd.findField('login').getValue(),
        email           : fd.findField('email').getValue(),
        password        : fd.findField('password').getValue(),
        password_repeat : fd.findField('password_repeat').getValue(),
        id              : fd.findField('id').getValue()
        company_logo    : fd.findField('logo').getValue()
    }
    console.log(params);
Ext.Ajax.request({
      url: Scada.reqUrl('users', 'save'),
      method: 'post',
      params: {
        data: Ext.encode(params)
      },
      success: function() {
        console.log('in success');
      },
      failure: function() {
        console.log('in failure');
      }
    });

Here logo is input type file. I want to send logo data with ajax request. Please help me to figure out the problem. Thanks

score 1 · Answer 1 · answered Nov 06 '19 at 06:35

Not sure why you started a new question instead of editing Encode form data while fileupload true in Extjs Form Submit as this seems to be the same problem.

Assuming logo is your file upload field you are trying to get the file data using getValue does not actually return the file content (if you use modern there is a getFiles method which returns the selected file objects).

General problems with your approach: As I stated in my original answer it is not a good idea to send files in a standard ajax request. In your case those problems are:

If you expect getValue to return file contents, you are potentially encoding binary data into a JSON string. This will maybe work but create a large overhead and as the only available JSON datatype that could handle this content is string your parser would have to guess that property company_logo contains binary data and needs to be somehow converted into some sort of file reference.
You are sending files without metadata, so when just adding the raw content into your JSON string you would not be able to detect the expected file type without testing the file in multiple ways
As far as I know you would not be able to access the file content in classic toolkit at all

Submitting the data as a form: In your original question you explained that you submit the form instead of doing Ajax requests which is generally the preferred way. When you submit a form that contains a file upload field the form will automatically be submitted as multipart/form-data the raw files are added to the request body with it's original content while preserving metadata collected by the browser.

If you look at https://docs.sencha.com/extjs/7.0.0/modern/Ext.Ajax.html#method-request you would have to set isUpload to true and use the form proeprty instead of params, passing a reference to the parent form.

Not getting file data in Extjs Ajax request

1 Answers1