1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    3
    Vote Rating
    0
    Rulikkk is on a distinguished road

      0  

    Default Ext js forms, models and file uploads

    Ext js forms, models and file uploads


    I would like to clarify how do ext 4 models correlate to form panels. Suppose I have a model, e.g. "User", which has a REST proxy attached.When I want to modify user parameters, i use form's


    loadRecord( Ext.data.Model record ) : Ext.form.Basic

    method, to set form's field values.After modification, I call "updateRecord" method, to send changes from form to loaded model, and then use model's "save" method, to send changes to server. This works quite well, and seems to fit Ext MVC concepts.


    Question
    But, the question is: how should I conform to MVC, in case I need to upload file, while modifying user's data (e.g. avatar). According to what I learned from docs, I should switch to using form's "submit" method to send updated data so server, including the file.In this case, I see several drawbacks:
    • The original model, loaded to the form, will not be updated.
    • If I update the model (using "updateRecord", or other way), the model will stay in dirty state, however, changes have already been sent to server.
    • The same proxy configuration should be applied to form, as to model, so that I would not need to change server side.
    Is this a correct way of implementing file-upload through ext forms? Is there any way to do this using model.save method, to be more MVC-stylish?

  2. #2
    Sencha User
    Join Date
    Sep 2011
    Posts
    1
    Vote Rating
    0
    goblue is on a distinguished road

      0  

    Default


    Would you be able to update your model in the success callback function of the submit action?

  3. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    3
    Vote Rating
    0
    Rulikkk is on a distinguished road

      0  

    Default


    This is possible, but the model will become dirty in that case, which is not correct, because it is actually saved...

  4. #4
    Sencha User
    Join Date
    Mar 2010
    Posts
    12
    Vote Rating
    0
    dwr is on a distinguished road

      0  

    Default


    i have same issue with my app. mvc + fileupload produce dirty workarounds.
    any suggestion on this topic for an easy clean solution? the best would be to have image data posted with the record on save(). submitted data can be either rest or multipart post.

  5. #5
    Sencha User
    Join Date
    Apr 2012
    Posts
    3
    Vote Rating
    0
    Rulikkk is on a distinguished road

      0  

    Default


    Quote Originally Posted by dwr View Post
    i have same issue with my app. mvc + fileupload produce dirty workarounds.
    any suggestion on this topic for an easy clean solution? the best would be to have image data posted with the record on save(). submitted data can be either rest or multipart post.
    As far as I found out, it is impossible to save file as an ajax post. What is done in Ext is a hidden iframe with file field, which is then posted to server. I believe the best solution is to save model data with save() method, which would call ajax post, and after that post file to server (2 requests).

    On server side it is required to process incoming data and check wether it has file or not. In case it has a file, note that ext expects reply with content-type = text/html.

  6. #6
    Sencha User
    Join Date
    Mar 2010
    Posts
    12
    Vote Rating
    0
    dwr is on a distinguished road

      0  

    Default


    Quote Originally Posted by Rulikkk View Post
    As far as I found out, it is impossible to save file as an ajax post. What is done in Ext is a hidden iframe with file field, which is then posted to server. I believe the best solution is to save model data with save() method, which would call ajax post, and after that post file to server (2 requests).

    On server side it is required to process incoming data and check wether it has file or not. In case it has a file, note that ext expects reply with content-type = text/html.
    Thanks for quick reply.

    thats exactly what i am doing now. 2 calls upload of file on success event of save() call.

  7. #7
    Sencha User
    Join Date
    May 2010
    Posts
    20
    Vote Rating
    0
    FidoX is on a distinguished road

      0  

    Default


    With the File API of HTML5 now, we can use the XMLHttpRequest to upload files. As simple as:


    Code:
    var ajax = new XMLHttpRequest();
    ajax.open("POST", "server_url");
    ajax.send(formData);

    Even we can receive upload progress with:
    Code:
    ajax.upload.addEventListener("progress", uploadProgress, false);

    It is available in the major browsers. Im working on a rewrite of Ext.data.Connection to use it with standard BasicForm and remove the iframes. Seems it is not so complex, When I have something that works I will share.


    Greetings.

  8. #8
    Sencha User
    Join Date
    Mar 2010
    Posts
    12
    Vote Rating
    0
    dwr is on a distinguished road

      0  

    Default


    Thanks for reply.
    looking forward for your data.connection mod

  9. #9
    Sencha User
    Join Date
    May 2010
    Posts
    20
    Vote Rating
    0
    FidoX is on a distinguished road

      0  

    Default


    Well, here it is:

    https://bitbucket.org/fidox/snippets/src/master/extjs/Connection.js

    B
    asically override the request method of standard Connection to remove the form by iframe and add a event listener to the XMLHttpRequest. It is only a test to confirm that it works. And it is but I not sure this could be use in production.

    You can use it simply by adding that file into your index html, and then use the form as always:

    Code:
    form.submit({
        url: 'url',
       progress: function(evt) {
          console.log(evt);
       },
       success: function(form, o) {
       },
       failure: function(form, action) {
       }
    });
    * note the progress callback.
    In the Ext.form.Panel I have a xtype: 'filefield' with no special configurations. Things TODO:
    1.- Fallback to the iframes if the browser does not support this feature.
    2.- install the progress listener only for upload requests.


    I have used the extjs 4.0 code, but for 4.1 could be even more easy. In that case I think I could do that without modifying the request method. Anyway this code should work in 4.1 as is.

Thread Participants: 3

Tags for this Thread