Results 1 to 6 of 6

Thread: Sending FormData in an Ajax request

  1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    111
    Answers
    5

    Default Sending FormData in an Ajax request

    I have the following FormData object that I want to send in an Ajax request,

    Code:
    var form = document.createElement("form");
    var fd = new FormData(form);
    
    
    fd.append("extraData", JSON.stringify({
        sessionId:item.sessionId,
        answerId:item.answerId,
        questionId:item.questionId,
        scriptId:item.scriptId,
        fileName:item.name
    }));
    
    
    var binaryImg = atob(base64Str);
    var length = binaryImg.length;
    var ab = new ArrayBuffer(length);
    var ua = new Uint8Array(ab);
    for (var j = 0; j < length; j++) {
        ua[j] = binaryImg.charCodeAt(j);
    }
    var blob = new Blob([ab], {type:type});
    fd.append(item.name, blob);
    I've tried sending it like this, but it just sends the string "[object FormData]"

    Code:
    Ext.Ajax.request({
        url:cls.Config.saveFile(),
        method:"POST",
        params:fd,
        failure:function(response, request) {
            cls.messagequeue.MessageQueue.addToQueue(request);
            cls.messagequeue.MessageQueue.runQueue();
        }
    });
    How can I send this FormData object using Sencha? Currently I am sending the object like this,

    Code:
    var xhr = new XMLHttpRequest();
    xhr.open('POST', cls.Config.saveFile(), true);
    xhr.send(fd);
    jQuery has a configuration called processData. Does Sencha have something similar?

    Code:
    var fd = new FormData(document.getElementById("fileinfo"));
    fd.append("CustomField", "This is some extra data");
    $.ajax({
        url: "stash.php",
        type: "POST",
        data: fd,
        processData: false,  // tell jQuery not to process the data
        contentType: false   // tell jQuery not to set contentType
    });
    Thanks!

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,451
    Answers
    3997

    Default

    Code:
    Ext.Ajax.request({
        method:"POST",
        params: {
            foo : 'bar',
            bar : 'foo'
        }
    });
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Feb 2011
    Posts
    111
    Answers
    5

    Default

    Quote Originally Posted by mitchellsimoens View Post
    Code:
    Ext.Ajax.request({
        method:"POST",
        params: {
            foo : 'bar',
            bar : 'foo'
        }
    });
    I tried,

    Code:
    Ext.Ajax.request({
        method:"POST",
        params: {
            FormData:fd
        }
    });
    but it still turns it into "[object FormData]"

    I need something like the ajax class in jQuery http://api.jquery.com/jQuery.ajax/

    processData (default: true)
    Type: Boolean
    By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data, set this option to false.

  4. #4
    Sencha Premium Member
    Join Date
    Jul 2013
    Posts
    1

    Default

    Try:

    Code:
    Ext.Ajax.request({
        method: 'POST',
        rawData: fd,
    });
    I just sifted through the ST2.2 and ST2.3 code to find this, so it should work in both.

  5. #5
    Sencha User
    Join Date
    Nov 2013
    Location
    Chennai
    Posts
    15
    Answers
    2

    Default How to send a form data using Ext.ajax request

    I also facing the same problem . Any help appreciated !! Please reply ASAP

    BR
    Alhuck

  6. #6
    Sencha User
    Join Date
    Feb 2011
    Location
    Düsseldorf, Germany
    Posts
    597
    Answers
    35

    Default

    I know this is an old post, but in case you are coming here for an answer, please look here:




    Code:
           data = options.data || options.rawData || options.binaryData || options.xmlData || jsonData || null;
            if (jsonData && !Ext.isPrimitive(jsonData)) {
                data = Ext.encode(data);
            }
    
    
            // Check for binary data. Transform if needed
            if (options.binaryData) {
                if (!Ext.isArray(options.binaryData) && !(options.binaryData instanceof Blob)) {
                    Ext.Logger.warn("Binary submission data must be an array of byte values or a Blob! Instead got " + typeof(options.binaryData));
                }
            }
    This tells you that you can use

    - data
    - rawData
    - binaryData
    - xmlData
    - jsonData

    inside your Ext.Ajax.request() to send data autotransformed.

    To check the current result of the different types you can go to touch/src/data/Connection.js
    • Kurt001

    Code Review | Send PM


    Need to include a test case use:
    https://fiddle.sencha.com/#home

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •