Ext.plugin.extjs.FIleDrop

Hope I get to see screenshots at least ;)

Working on progress events. Seems Firefox sends them but Webkit not. Good times when you have a little free time

Hmm, not sure if I'm allowed to share screenshots, but I will report back if I do anything fancy code-wise. :)

I'll ignore progress stuff for now. I think client uses Chrome anyway, and Chrome shows progress for uploads by default on the bottom left.

I need to upload any kind of file so it would be great to be able to do an extjs form submit. Anyone know how to do this?

Quote:

---

Originally Posted by bobmanc

I need to upload any kind of file so it would be great to be able to do an extjs form submit. Anyone know how to do this?

---

Using this plugin or just a file upload field? If file upload field then please create a new thread in the help section.

Using this plugin. I am able to upload through a form so that part is all set. The question is how do I grab the file from the plugin and somehow insert it into the form and submit it. Thanks.

This plugin uses the File API, think you need to do some research first.

Hi mitchellsimoens! I love this plugin and I use it for my project.
What do you think about adding this:

Code:

---

Ext.define("Ext.plugin.extjs.FileDrop", {
    extend  : "Ext.AbstractPlugin",
    alias    : "plugin.filedrop",


    readType : "DataURL",
    clickable: true,

    init : function(cmp) {
        var me = this;


        cmp.addEvents({
            fileselected: true,
            dragover  : true,
...

initFileDrop: function(cmp) {
        var me = this,
            el = me.el || cmp.getEl();


        el.on("dragover", me.onDragOver, me);
        el.on("drop", me.onDrop, me);
        if (me.clickable) {
            var file = document.createElement('input');
            file.setAttribute('type', 'file');
            file.setAttribute('title', 'Upload file');
            file.style.width = file.style.height = '100%';
            file.style.position = 'absolute';
            file.style.left = file.style.top = file.style.opacity = '0';
            file = new Ext.Element(file);
            file.on("change", me.onFileSelected, me);
            el.appendChild(file);
        }
    },

onFileSelected: function(e) {
        e.stopEvent();

        var cmp = this.cmp,
            files = e.target.files,
            file,
            numFiles = files.length,
            i = 0;
        cmp.fireEvent("fileselected", cmp, e);
        for (; i < numFiles; i++) {
            file = files[i];
            this.readFile(file);
        }
    },

---

To allow users set clickable - show select file dialog on click over component using this plugin, because in some browsers (safari on MacOS) this plugin didn't works.

Up

Thank you for this, it works like a charm but I'm still learning and need a little help submitting multiple files with a form.
all I want to do is take the dropped files and submit them to a url.

sorry if this seems really basic but if you could help I would be very appreciative because I've been at this for quite a while.

I've been looking at the docs for a long time. I just wanted to clarify, I want to send the dropped files to a specified url with a form as a multi file post. Being that you can't change the value of a filefield xtype, how is this done?