View Full Version : Ext.plugin.extjs.FIleDrop

15 Mar 2011, 10:27 AM
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/Ext.plugin.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
15 Mar 2011, 10:35 AM
hehe, nice. :)

But how do I send the file with a form?

So, I have:

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

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. :)

15 Mar 2011, 10:46 AM
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
15 Mar 2011, 10:48 AM
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.

15 Mar 2011, 11:33 AM
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
15 Mar 2011, 11:34 AM
What would the checkbox be for?

Just csv-files.

15 Mar 2011, 11:39 AM
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
15 Mar 2011, 11:42 AM
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

15 Mar 2011, 12:11 PM
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);
//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
15 Mar 2011, 12:14 PM
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!! :)

15 Mar 2011, 12:18 PM
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

Steffen Hiller
15 Mar 2011, 12:22 PM
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.

22 Apr 2011, 6:14 AM
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?

22 Apr 2011, 6:16 AM
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.

22 Apr 2011, 6:18 AM
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.

22 Apr 2011, 6:24 AM
This plugin uses the File API, think you need to do some research first.

26 Sep 2012, 1:16 AM
Hi mitchellsimoens! I love this plugin and I use it for my project.
What do you think about adding this:

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

readType : "DataURL",
clickable: true,

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

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);

onFileSelected: function(e) {

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

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.

19 Oct 2012, 10:55 PM

28 Nov 2012, 2:21 PM
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.

28 Nov 2012, 6:51 PM
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?

29 Nov 2012, 1:14 PM
I used xmlhttprequest to send the files to my server, the code looked like this:

load : function(cmp, e, file) {
console.log("Done Reading");
var formData = new FormData();
var xhr = new XMLHttpRequest();

var onProgress = function(e) {
if (e.lengthComputable) {
var percentComplete = (e.loaded/e.total)*100;

var onReady = function(e) {
// ready state

var onError = function(err) {
// something went wrong with upload

formData.append('files', file);
xhr.open('post', '/upload', true);
xhr.addEventListener('error', onError, false);
xhr.addEventListener('progress', onProgress, false);
xhr.addEventListener('readystatechange', onReady, false);


The chrome debugger says the upload was cancelled but all files arrive in full on server side (maybe it says cancelled from lack of response?)
I'm using node.js server side if anyone is interested the code there uses formidable and looks like this:

var form = new formidable.IncomingForm();
form.uploadDir = __dirname + '/testUpload';
form.encoding = 'utf-8';
form.keepExtensions = true;

form.hash = false;
form.on('fileBegin', function(field, file) {
file.path = form.uploadDir + '/' + file.name;
console.log("File Upload Started");
form.addListener('file', function(name, file) {
form.addListener('end', function() {

form.parse(req, function(err, fields, files) {
if (err) {


24 Sep 2014, 10:50 AM
I am trying to learn extjs framework
I am trying to install your plugin, but a reseived error
Uncaught TypeError: undefined is not a function main.js:3
Ext.onReady(function() {
var panel = new Ext.Panel({
renderTo : Ext.getBody(),
width : 400,
height : 400,
html : "Test",
title : "File Droppable",
plugins : [
{ ptype : "filedrop" }
listeners : {
dragover : function(cmp, e) {
drop : function(cmp, e) {

what can I do incorrect.

27 Sep 2014, 4:53 AM
I'm using node.js server side if anyone is interested the code there uses formidable and looks like this: Maybe try http://github.com/mscdex/busboy ?

21 Nov 2014, 6:17 AM
Hi ..

I am uploading multiple files which are selected at a time using this code,I am trying to add files multiple times to upload all at once, but only one file(i.e latest file) is getting upload to the server .

xtype: 'form',
id: 'fhdb-form',
bodyPadding: 10,
bodyStyle: 'background:#FFF;',
style: 'border-left:1px solid #dddfe0;',
width: '15%',
items: [{
xtype: 'filefield',
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
name: 'files',
id: 'fhdb-file',
buttonOnly: true,
buttonText: 'Add Files',

listeners: {
afterrender: function(cmp) {
multiple: 'multiple'
change: function(cmp, value) {

var form = Ext.getCmp('fhdb-form').getForm();
if (form.isValid()) {
url: ..,
waitMsg: 'Uploading yourFile...',
headers: {
'Accept': 'application/json'
success: function(conn, response, options, eOpts) {