CODEWITHSUNDEEP
c#file-uploadextjsextjs4
Armance
Armance

Reputation: 5390

ExtJS4 File upload - How the get my file content not just the location

I know how to create a form that browses and selects a file, that's not my question. What I need is to get the content of the selected file, to send it to a server and proccess it. For now I only can get the file location.

I think it will be better if I get my file on client side (extjs), then send it to server, but I have no idea how to do this.

{
    xtype: 'fileuploadfield',
    hideLabel: true,
    emptyText: 'Select a file to upload...',
    id: 'upfile',
    //name:'file',
    width: 220
},
buttons:
[
    {
        text: 'Upload',
        handler: function () {
            obj.Import(Ext.getCmp('upfile').getValue())
        }
    }
]

Import(...) is my server function. I need to give it the file not only its path!!

Thank you in advance for your time

Upvotes: 0

Views: 5394

Answers (2)

Abdel Raoof Olakara
Abdel Raoof Olakara

Reputation: 19353

What you are doing Ext.getCmp('upfile').getValue() is clearly passing the file location to Import method. How do you expect the file content then? In order to upload a file, you need to submit a ExtJS form. You can do something like this:

handler: function() {

        form.submit({
                url: '/Gallery/Upload',
                waitMsg: 'Uploading your file...',
                success: function(form, action) {
                    alert('File form done!');
                }
            });
        }
    }

And on server side:

   public void ProcessRequest(HttpContext context)
{
    HttpPostedFile fileupload = context.Request.Files["file"];

    // process your fileupload...

    context.Response.ContentType = "text/plain";
    context.Response.Write("Ok");
}

Update: You need to uncomment the name property of your fileuploadfield.

Upvotes: 0

Krzysztof
Krzysztof

Reputation: 16140

AFAIK Ext doesn't use HTML5 File API, so getting file content on JS side isn't straightforward. Probably simplest way to achieve that is to create custom handler. Eg:

{
    xtype: 'fileuploadfield',
    hideLabel: true,
    emptyText: 'Select a file to upload...',
    id: 'upfile',
    //name:'file',
    width: 220
},
buttons:
[
    {
        text: 'Upload',
        handler: function () {
            var file = Ext.getCmp('upfile').getEl().down('input[type=file]').dom.files[0]; // fibasic is fileuploadfield
            var reader = new FileReader();
            reader.onload = (function(theFile) {
                return function(e) {
                    obj.Import(e.target.result);
                };
            })(file);
            reader.readAsBinaryString(file);
        }
    }
]

Upvotes: 6

Related Questions