Threaded View

  1. #1
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    43
    Vote Rating
    0
    Answers
    2
    bjnelson62 is on a distinguished road

      0  

    Default Answered: Upload binary file using form.submit()

    Answered: Upload binary file using form.submit()


    I've got a form that has combo and filefield controls. When the user clicks Upload, the following code is executed:

    Code:
                            form.submit({
                                url: myUrl,
                                headers: {'Content-Type':'multipart/mixed; charset=UTF-8'},
                                params: {
                                    metadata: {'version' : '2.8.1.RELEASE'},
                                },
                                waitMsg: 'Uploading your image....',
                                success: function(form, action) {
                                    VFABRIC.util.StatusBarWrapper.setGoodStatus('Successfully uploaded file: ' + action.result.file);
                                },
                                failure: function(form, action) {
                                    switch (action.failureType) {
                                        case Ext.form.action.Action.CLIENT_INVALID:
                                            VFABRIC.util.StatusBarWrapper.setErrorStatus('Form fields may not be submitted with invalid values');
                                            break;
                                        case Ext.form.action.Action.CONNECT_FAILURE:
                                            VFABRIC.util.StatusBarWrapper.setErrorStatus('Ajax communication failed');
                                            break;
                                        case Ext.form.action.Action.SERVER_INVALID:
                                            VFABRIC.util.StatusBarWrapper.setErrorStatus(VFABRIC.util.AjaxWrapper.getServerErrorMsgs(action.response));
                                            break;
                                    }
                                    me.up('window').destroy();
                                },
                            });
    The server is unhappy, because it wants a metadata field. I tried to specify it in the code above, but obviously I'm not doing it correctly. Here's how the request should look:


    POST /<product name>/v1/installation-images/
    Content-Type: multipart/mixed; boundary=6o2knFse3p53ty9dmcQvWAIx1zInP11uCfbm
    --6o2knFse3p53ty9dmcQvWAIx1zInP11uCfbm
    Content-Disposition: form-data; name="metadata"
    Content-Type: application/json;charset=UTF-8

    {"version":"2.7.0.RELEASE"}
    --6o2knFse3p53ty9dmcQvWAIx1zInP11uCfbm
    Content-Disposition: form-data; name="data"; filename="installation-image.zip"
    Content-Type: application/octet-stream
    Content-Length: 7340032

    <binary data>
    --6o2knFse3p53ty9dmcQvWAIx1zInP11uCfbm--


    Any ideas as to how I could structure the request to make the server happy? I know how the request should look, but I don't know how to achieve that look through the ExtJs library.

    Is this even possible? I thought of using the Ext.Ajax() class directly, but then I run into the problem of not knowing the filename because the browser won't report it to the filefield control.

    Thank you,

    Brian

  2. So far as I know, there's no way to do this in ExtJS. I found some comments that indicate request headers are ignored on a file upload, and that was my experience too.

    So instead I resorted to calling XMLHttpRequest. Also, I used FormData to add in the version metadata.

    But I respectfully submit that anytime a customer has to go outside your framework to do something, you've failed. I know, I've worked on SCM systems in the past.

    Brian

Thread Participants: 1