Results 1 to 2 of 2

Thread: Uploading a file selected by filefield using ExtJS Ajax Request

  1. #1

    Default Uploading a file selected by filefield using ExtJS Ajax Request

    Hi All,
    This is my first question on sencha forums

    I am using ExtJS 4.2.2 (I can upgrade to a better version if necessary for this).

    I created a file form field using:

    fileBrowseField = Ext.create('Ext.form.field.File', {
    id: 'fileBrowseFieldId'
    ... });

    Using the browse button, I select a file from my file system. Now, I want to attach this form in a POST request and send to an API that processes the file.

    I create a separate button in the page, clicking which, sends the POST request with the file:

    uploadButton = Ext.create('Ext.button.Button', {
    text: 'Upload'
    , handler: function(){
    url: ""
    , method: 'POST'
    , isUpload: true
    , form: 'fileBrowseFieldId'
    //, form: fileBrowseField
    , headers: {
    'Content-Type' : 'application/octet-stream'
    , 'Content-Disposition' : "attachment;filename='ab12.log'"
    , success: function (response) {
    , failure: function (response) {

    If I put the entire fileBrowseField object in form, I get this error:

    > Uncaught TypeError: c.setAttribute is not a function

    If I use the formField's id instead, I get this error:

    > ext-all.js:18 Uncaught TypeError: b.submit is not a function

    Can someone tell me what I'm doing wrong? I used the extjs documentation,!/api/Ext.Ajax

    Clearly, I have not understood the correct implementation and how to synchronize a form field component with an ajax call. I am using the ajax call to pass the necessary headers also, Content-Type and Content-Disposition.

    Apologies, if I have not formatted something correctly or made this too long. Thanks!


  2. #2
    Sencha User
    Join Date
    Feb 2013


    Have you seen this part of the docs for the file field?
    IMPORTANT: File uploads are not performed using normal 'Ajax' techniques; see the description for Ext.form.Basic.hasUpload for details.

Similar Threads

  1. Extjs: filefield - Fake path, while uploading a file
    By madhu.vistex in forum Ext: Q&A
    Replies: 3
    Last Post: 16 Dec 2013, 9:03 PM
  2. Replies: 1
    Last Post: 23 Oct 2013, 9:19 AM
  3. Replies: 5
    Last Post: 4 Sep 2013, 12:52 AM

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