Ext.plugin.extjs.FIleDrop

[mitchellsimoens]

This is a plugin that will turn any element into an element that can accept files dropped from the desktop.

GitHub: https://github.com/mitchellsimoens/E...extjs.FileDrop

In this repo, there is an example usage. Pretty simple. If you don't specify the 'el' config on the plugin, it will default to the owning component's el.

To get file source, add listener to the owning component for the "read" event. This has two parameters, the owning component and an event. The source is under event.target.result . It may not be that easy for all files but for images this works.

[Steffen Hiller]

hehe, nice.

But how do I send the file with a form?

So, I have:

<form>
<input type="text" name="some_option">
<input type="file">
</form>

The user can either select a file with the default functionality or drop it somewhere in the app.

The examples i've found so far just talk about files, not about forms.

Thanks.

[mitchellsimoens]

Problem lies that I think there is strong security on the file input field. You can access the source of the file so you may have to use hidden fields and display it with checkboxes maybe. I will see if I can set the file input field's value but I doubt it.

[Steffen Hiller]

Yeah, you can't set the value.

Actually forget the file input field for a second. If a user drops a file, I just hide it.

But, how can I drop a file and send it together with other form variables? Ideas?
An Ajax request would be totally fine.

[mitchellsimoens]

Was gonna work with CheckboxGroup but you cannot add Checkboxes in PR3. Got an error and don't have the time to dig into why.

Are you going to allow any file uploaded or just images?

[Steffen Hiller]

What would the checkbox be for?

Just csv-files.

[mitchellsimoens]

What would the checkbox be for?

Just trying to figure nice UI way of handling uploads. I know you were saying you want an upload button but was hoping for a nice demo.

Just csv-files.

So pretty much text files. That should be pretty easy!

[Steffen Hiller]

Oh ok, well, just code is fine for me.

If you just could point me to the way I can submit an Ext JS 4 form with the dropped file, that'd be awesome.
Haven't done much with the File API yet.

Don't worry about a cool demo for now. :-P

[mitchellsimoens]

You can get the source of a text file by:

var getText = function(e) {
    var encoded = e.target.result,
        result  = encoded.split(","),
        text    = atob(result[1]);

    return text;
}

new Ext.Panel({
    ...
    listeners : {
        read     : function(cmp, e, file) {
            var text = getText(e);
            console.log(text);
            //do whatever here
        }
    },
    ...
});

Tested on a TXT and JS file. The FileReader encodes the file automatically so you have to decode the string it returns.

[Steffen Hiller]

Sounds good!

Actually the File API is pretty awesome for my case, since the client wants a preview of the first few rows before he uploads it.

So thanks a ton!!