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(){
    Ext.Ajax.request({
    url: "https://10.200.11.222:8443/rest/xyz/logs/abcd/upload"
    , method: 'POST'
    , isUpload: true
    , form: 'fileBrowseFieldId'
    //, form: fileBrowseField
    , headers: {
    'Content-Type' : 'application/octet-stream'
    , 'Content-Disposition' : "attachment;filename='ab12.log'"
    }
    , success: function (response) {
    console.log(response);
    }
    , failure: function (response) {
    console.log(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, https://docs.sencha.com/extjs/4.2.2/#!/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!


    Regards,
    Jai

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    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.
    https://docs.sencha.com/extjs/4.2.2/...thod-hasUpload

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
  •