View Full Version : [Beta 1] Saki's FileTree for Ext 2.0

Pages : 1 2 3 [4]

13 Oct 2009, 8:35 AM
I see the confusion - I was basing my changes off the ux code from the Ext 3.0.2 build. Here is the full file including those changes.

* Ext JS Library 3.0.2
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license

* @class Ext.ux.form.FileUploadField
* @extends Ext.form.TextField
* Creates a file upload field.
* @xtype fileuploadfield
Ext.ux.form.FileUploadField = Ext.extend(Ext.form.TextField, {
* @cfg {String} buttonText The button text to display on the upload button (defaults to
* 'Browse...'). Note that if you supply a value for {@link #buttonCfg}, the buttonCfg.text
* value will be used instead if available.
buttonText: 'Browse...',
* @cfg {Boolean} buttonOnly True to display the file upload field as a button with no visible
* text field (defaults to false). If true, all inherited TextField members will still be available.
buttonOnly: false,
* @cfg {Number} buttonOffset The number of pixels of space reserved between the button and the text field
* (defaults to 3). Note that this only applies if {@link #buttonOnly} = false.
buttonOffset: 3,
* @cfg {Object} buttonCfg A standard {@link Ext.Button} config object.

// private
readOnly: true,

* @hide
* @method autoSize
autoSize: Ext.emptyFn,

// private
initComponent: function(){

* @event fileselected
* Fires when the underlying file input field's value has changed from the user
* selecting a new file from the system file selection dialog.
* @param {Ext.ux.form.FileUploadField} this
* @param {String} value The file value returned by the underlying file input field

// private
onRender : function(ct, position){
Ext.ux.form.FileUploadField.superclass.onRender.call(this, ct, position);

this.wrap = this.el.wrap({cls:'x-form-field-wrap x-form-file-wrap'});

var btnCfg = Ext.applyIf(this.buttonCfg || {}, {
text: this.buttonText
this.button = new Ext.Button(Ext.apply(btnCfg, {
renderTo: this.wrap,
cls: 'x-form-file-btn' //+ (btnCfg.iconCls ? ' x-btn-icon' : '')


this.resizeEl = this.positionEl = this.wrap;

bindListeners: function(){
scope: this,
mouseenter: function() {
mouseleave: function(){
mousedown: function(){
mouseup: function(){
change: function(){
var v = this.fileInput.dom.value;
this.fireEvent('fileselected', this, v);

createFileInput : function() {
this.fileInput = this.wrap.createChild({
id: this.getFileInputId(),
name: this.name||this.getId(),
cls: 'x-form-file',
tag: 'input',
type: 'file',
size: 1

reset : function(){

* Detaches the input file without clearing the value so that it can be used for
* other purposes (e.g. uploading).
* The returned input file has all listeners applied to it by this class removed.
* @return {Ext.Element} the detached input file element.
detachFileInput : function(){
var result = this.fileInput;

this.fileInput = null;
this.id = Ext.id(); //avoid dom conflicts

return result;

* @return {Ext.Element} the input file element
getFileInput: function(){
return this.fileInput;

// private
getFileInputId: function(){
return this.id + '-file';

// private
onResize : function(w, h){
Ext.ux.form.FileUploadField.superclass.onResize.call(this, w, h);


var w = this.wrap.getWidth() - this.button.getEl().getWidth() - this.buttonOffset;

// private
onDestroy: function(){
Ext.destroy(this.fileInput, this.button, this.wrap);

onDisable: function(){

onEnable: function(){


// private
doDisable: function(disabled){
this.fileInput.dom.disabled = disabled;

// private
preFocus : Ext.emptyFn,

// private
alignErrorIcon : function(){
this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);


Ext.reg('fileuploadfield', Ext.ux.form.FileUploadField);

// backwards compat
Ext.form.FileUploadField = Ext.ux.form.FileUploadField;

I don't know if the CSS also changed so let me know and I could post that if necessary.

Stephan Schrade
13 Oct 2009, 10:15 AM
Thanks very much, that was a quick answer :)
I did update my whole project to 3.0.2 now.
(and experienced some issues with statusbar because the location of files did change, but thats another story :-?)

Now it looks like the upload panel works.

But I should know how the server has to react.
As I'm using the upload panel by its own (rather than within the filetree) I can't find any documentation about this.
Perhaps you know an example somewhere (I'm running php on the server).

Many Thanks,

Stephan Schrade
19 Oct 2009, 1:39 AM
I managed to get the whole panelupload running (without filetree) with ExtJs3.0
with all your help here, thanks very much.

May I suggest one extension:
Is it possible to have an event raised at the end of all uploads ?
So that I can make a refresh of the underlying element (in my case a grid).
Otherwise the user may be wondering where alle the files are.

CU Stephan

25 Oct 2009, 10:33 AM
Excellent. The menu.render() actually goes in FileTreePanel.js - after the line (1467)

menu.getItemByCmd('sep-collapse').setVisible(this.enableNewDir || this.enableDelete || this.enableRename);

Now the menu renders - however, the upload panel within the menu is missing. The upload panel shows - but theres no buttons, or anything inside, as if it were blank.

I'll see if I can do some more investigating myself.

I have added the line in red in the UploadPanel.js and it seems to fix it.

,onRender:function() {
// call parent
Ext.ux.UploadPanel.superclass.onRender.apply(this, arguments);
this.getTopToolbar().doLayout(false, true);

// save useful references
var tb = 'tbar' === this.buttonsAt ? this.getTopToolbar() : this.getBottomToolbar();
this.addBtn = Ext.getCmp(tb.items.first().id);
this.uploadBtn = Ext.getCmp(tb.items.itemAt(1).id);
this.removeAllBtn = Ext.getCmp(tb.items.last().id);
} // eo function onRender
// }}}

27 Oct 2009, 6:41 AM
Does this work with ExtJS 3 ?

27 Oct 2009, 3:12 PM
My issue is not really related to Saki's upload panel but anyways... i'm trying to create my own much more simple but a bit specific fileupload panel based on jsakalos code, using Ext.ux.form.FileUploadField instead of Ext.ux.BrowseButton by loeppky. The filebutton has been created before going to a panel's toolbar, something like that:

var fbutton = {
buttonCfg: {
hideLabel: true
,buttonText:'Add file...'
,buttonOnly: true //no textfield
,listeners: {
fileselected: {fn:this.onAddFile, scope:this}
,style: { display: 'none' } //IE hack - can't use visibility b/c IE buffers the space



So the button text and icon appears in the toolbar but looks like it's not the button. Just a label. It has no borders and cursor remain the same instead of being pointer. But it works when you click on it...
Looks like the fileupload css has missing a class for toolbar buttons or maybe it's me who missing how to properly put the fileupload button into the toolbar. Any ideas?
P.S. Ext 2.1

6 Nov 2009, 8:52 AM
I see the confusion - I was basing my changes off the ux code from the Ext 3.0.2 build. Here is the full file including those changes.

I don't know if the CSS also changed so let me know and I could post that if necessary.

Incorporating all of these bits to make this work with Ext 3.0 is almost working for me. If I do not incorporate the FileUploadField, it sort-of works but when I add a file, the window doesn't expand to display the file and it's transfer status. I can upload however. If I try to use FileUploadField, The window ends at the 'Upload file' button. Nothing appears underneath.

I suspect that it's either my FileTreeMenu or my UploadPanel that is missing something. Any suggestions?

6 Nov 2009, 9:12 AM

would you mind sharing the FileUploadField.js and the UploadPanel.js you ended up with? In my case, on Extjs 3.0.0. I do not seem to get that <input type="file"> hidden. I.e. it is still showing up, while the upload panel technically works (i.e. it's all fine but that stupid input field). Is there anything in the style sheets I am missing?


7 Nov 2009, 6:08 AM
Got it fixed: Didn't have fileuploadfield.css. Btw. I believe there is a bug in FileUploader. In FileUploader.uploadCallback, line 581, it says:

// process command failure
else {
this.processFailure(options, response, o);

As o is the decoded response, potentially having the properties error and success, it should actually be

// process command failure
else {
this.processFailure(options, response, o.error);

as processFailure expects the actual error message as its third parameter.


18 Nov 2009, 9:18 PM
Ok, using Ext 3.0.3 and FileUploadField from 3.0.3 with the two added methods, the successful upload JSON response is not being handled properly. The file is uploaded, and the backend is returning '{"success":true}' but uploadCallback just isn't handling it properly. I've thrown some console.log() calls in uploadCallback and I've found that the "If(true === o.success)" winds up false, so it winds up calling processFailure as a command failure.

Any ideas as to what is borked?

19 Nov 2009, 5:06 AM
Could be that 3.0 handles server responses an other way. Check arguments or dig more deep if it doesn't help.

3 Dec 2009, 8:30 AM
Hey Saki,

first of all thank You very much for this and all of Your great extenstions, they helped me a lot =D>

I have a question to your upload panel:

Field names are auto-generated. It doesn't matter for PHP and I'd suppose the same is true for cfm. In my PHP backend I just iterate through all elements of posted $_FILES array each containing one file array; I ignore field names.

Hopefully this can help although it is PHP: http://www.php.net/manual/en/features.file-upload.php

I know you wrote this above some time ago, but is there a possibility to give the file field a own name?

I tried it with "inputFileName" from browse button, but it seems to be overwritten each time.

Thank You

10 Dec 2009, 10:34 PM
I am trying to get uploadpanel working with an IIS6 server, but the command (cmd) "upload" is not being received as either a QueryString or Form variable. All other "cmd" values work. I'm using EXT 2.x. Thanks for any help.

11 Dec 2009, 5:27 AM
@Natalie, it is neither possible nor necessary. You just get an array of upload at the server and you iterate through that array. You can think of it as of numerically indexed array vs text indexed array. You can iterate both of them.

11 Dec 2009, 5:29 AM
@pbaker99, I know nothing about IIS. You can try to change baseParams of FileUploader to give it another cmd so that you can see if "upload" is somehow blocked, or something.

11 Dec 2009, 8:22 AM
Thank you for your reply Saki!

I know the way You explained, but I have a Domino Server. So it is required that the name of the uploadfile field has a specific value.

I wrote my own little upload dialog but it isn't that comfortable and well written as Yours :)
but it works so far ;)

Once again I want to say Thank You for sharing your knowledge and extensions with us!

11 Dec 2009, 9:44 AM
I was not aware of such limitations of Domino. I'll give fields some reasonable names in some of the next version(s).

13 Dec 2009, 1:05 PM
@pbaker99, I know nothing about IIS. You can try to change baseParams of FileUploader to give it another cmd so that you can see if "upload" is somehow blocked, or something.

Thanks Saki! As it turns out, your code works fine -- no changes needed.

For anyone using IIS Server & ASP, IIS treats ContentType = "multipart/form-data" (file uploads) differently than ContentType = "application/x-www-form-urlencoded" (form submits). FileTreePanel commands get, rename, newdir and delete are readily returned using the (IIS/ASP built in) Request.Form object.

But not so with FileTreePanel command upload or any other form field data, including baseParams. With file uploads (when ContentType = "multipart/form-data") form field data must be parsed from the binary content stream. This is non-trivial, but helper code is readily available...

Here's a link to 100% ASP code (written in VBScript by Lewis Moten) that I was able to adapt for server-side use with IIS/ASP and Saki's FileTreePanel file upload: http://www.planetsourcecode.com/vb/scripts/ShowCode.asp?txtCodeId=8525&lngWId=4

I can be reached at pbaker@midlanticdigital.com if anyone wants more info on how I solved the problem.

26 Jan 2010, 3:44 AM
Hello Saki, I wanted to know if you've ported (or rewriting) Ext.ux.FileUploader component, or if you've made some fixes about problems (if he had a problem), reported in my post title "stop upload failing" (24 -09-2009) you can read at the following http://www.extjs.com/forum/showthread.php?t=29090&page=74
or if you had any suggestions about it.
thanks in advance for your help

26 Jan 2010, 4:16 AM
To tell truth, this is not on my radar currently.

26 Jan 2010, 5:36 AM
thanks for the reply, I wanted to know if more forward had plans to redo the component, or know why the developer has added the code for Restore form attributes after doFormUpload
, or you can ask at developer the reason for this choice?
I just want to understand how to move before you change the code
Thanks in advanced for your reply

27 Jan 2010, 2:17 AM
I needed to change that part of the code in that version of Ext (2.2). Try to apply the patch of the above thread author.

FYI, if and when I port this to Ext 3.x, I'll revise all the code removing unnecessary parts and adding new parts. In other words, it will be new uploader. For the time being, just use what works.

2 Feb 2010, 1:52 AM
I had the same problem I solved

// multipleUpload - each file uploaded in it's own form
else {
if (error && 'object' === Ext.type(error)) {
record.set('error', error.errors && error.errors[record.id] ? error.errors[record.id] : this.unknownErrorText);
else if (error) {
record.set('error', error);
else if (response && response.responseText) {
record.set('error', response.responseText);
else {
record.set('error', this.unknownErrorText);
record.set('state', 'failed');
this.deleteForm(options.form,record);/*Add this line remove refence in form*/

and in upload file

, uploadFile: function(record, params) {
// fire beforestart event
if (true !== this.eventsSuspended && false === this.fireEvent('beforefilestart', this, record)) {
// create form for upload
var form = this.createForm(record);
// append input to the form
var inp = record.get('input');
inp.set({ name: inp.id });/*inp.dom.name || */
/*Use appendTo and not append in some case when there's an error input lose value property id form it's not destroy correctly

if you apply only this code seems uploader function every time but i think it's better add this.deleteForm

I dont understand why if you use a form.appendChild(inp); there's an error and if you use directly inp.appendTo(form) there's not an error

this is append childFunction

appendChild: function(el)
el = Ext.get(el);
return this;

I encountered an issue in Chrome when trying to upload because it fails when trying to encode the form during the record.set operation. I think IE also bombs during the encode. I have reported this to ext (http://www.extjs.com/forum/showthread.php?p=395726)

In the meantime, below are my (hack) changes to the FileUploader.js that address both the IE & Chrome issues.

* Replace:

record.set('form', form);

* With:

record.form = form;

* Replace:

record.set('form', null);

* With:

delete record.form;

* Replace:

var form = record.get('form');

* With:

var form = record.form;

If anyone has a better suggestion, please feel free.

12 Feb 2010, 12:14 AM
If you want to use "beforerename" functionality for renaming, oldName and newName aren't supplied with valid values. Inspect file Ext.ux.FileTreePanel.js (http://filetree.extjs.eu/source.php?file=js/Ext.ux.FileTreePanel.js) at line 952.
Regex value shouldn't be /\/[^\\]+$/ but /\/[^\/]+$/ (escaping of backslash instead of slash in the square brackets).
You can test this behavior i.e. on path "Docarchive Root/Your files/Mosor"

12 Feb 2010, 3:19 PM
It would be good idea to add backslash but you shouldn't remove slash. I use Linux servers where backslash is innocent and slash is path separator.

15 Feb 2010, 10:56 AM
It would be good idea to add backslash but you shouldn't remove slash. I use Linux servers where backslash is innocent and slash is path separator.

I mis-expressed myself (or you misunderstood :) ): your code has backslash escaped in the square brackets. Instead of backslash, slash should be put (like it is for stated in start of the expression)

15 Feb 2010, 11:59 AM
Aah, I see. I've looked only inside the brackets before. Yes, you're right.

16 Feb 2010, 7:37 AM
I've made a patch against:


which makes use of "multiple" attribute of <input type="file" tag and File API, introduced in Firefox 3.6, and allows to select multiple files at once at file dialog.
I'd like to share that patch (see attachment).
Patch requires changes of server side to work. I may share example if anyone need it.
To use File API developer must explicitly set the "useFileApi" attribute of UploadPanel instance. The best detection string if we may allow File API or not is probably following condition:

var useFileApi = typeof window.FileReader == 'function';

Disclaimer: implementation is far from perfect, not all possible features implemented. But it works.

16 Feb 2010, 11:54 AM
if and when I port this to Ext 3.x
Any sort of a timeline on this? I really appreciate the high-quality work, but I need to decide whether it's time to upgrade this myself for 3.x after many months of hearing this.

2 Mar 2010, 12:30 AM
After a day of trying to find out mistake. I have made some changes to FileTree extention, so now it works with Extjs 3.0 version.

In file Ext.ux.FileTreeMenu.js

var uploadPanelConfig = {
,buttonsAt:config.buttonsAt || 'tbar'
,singleUpload:config.singleUpload || false
should be replaced with

var uploadPanelConfig = {
,buttonsAt:config.buttonsAt || 'tbar'
,singleUpload:config.singleUpload || false

,new Ext.menu.Adapter(new Ext.ux.UploadPanel(uploadPanelConfig), {

,new Ext.ux.UploadPanel(uploadPanelConfig)
in file Ext.ux.FileTreePanel.js

this.uploadPanel = this.contextmenu.getItemByCmd('upload-panel').component;
replace with

this.uploadPanel = this.contextmenu.getItemByCmd('upload-panel');
in file Ext.ux.FileUploader.js

record.set('form', form);

record.set('form', undefined); // IE fix, without this it throws an exception
record.set('form', form);
in file Ext.ux.form.BrowseButton.js

this.buttonCt = this.el.child('.x-btn-center em');

this.buttonCt = this.el.child('.x-btn-mc em');

style: {
position: 'absolute',
cursor: 'pointer',
right: '0px',
top: '10px'

style: {
position: 'absolute',
cursor: 'pointer',
right: '0px',
top: Ext.isIE ? '10px' :'0px' // Also another IE fix
in file Ext.ux.UploadPanel.js Add line


,onAddFile:function(bb) {

if(true !== this.eventsSuspended && false === this.fireEvent('beforefileadd', this, bb.getInputFile())) {
var inp = bb.detachInputFile();
var fileName = this.getFileName(inp);

// create new record and add it to store
var rec = new this.store.recordType({
,shortName: Ext.util.Format.ellipsis(fileName, this.maxLength)
}, inp.id);




if(true !== this.eventsSuspended) {
this.fireEvent('fileadd', this, this.store, rec);

} // eo onAddFile

PLS help me

The upload listed files aline have the problem.

Sees Attachments

4 Mar 2010, 10:02 PM
The question has solved

17 Mar 2010, 7:38 PM
Hi saki,

As many said already: awesome on the extension! Can't wait to try your next version supporting extjs 3.x.

I all new to the world of extjs and javascript but I'm having a really fun time learning all this.

I've got my server-side code (jsp/java) working for all the functionalities (get, rename, newdir, delete and even upload thanks the great apache FileUpload package) but i'm still missing the file upload progress bar.

I would like to undertand how my servlet is suppose to communicate back to the client side to update the status of the file(s) upload. I'm not asking for any source code but more about what steps/concepts need to be implemented to get it working.

Thanks for the help!

18 Mar 2010, 2:49 AM
I don't know how is java with file uploads but a progress info in PHP is pain in the ass. Most people say that go get progress working it's better to use PERL server-side.

The principle is simple: You start upload and then you periodically fetch the progress info from the server.

18 Mar 2010, 5:39 AM
I don't know how is java with file uploads but a progress info in PHP is pain in the ass. Most people say that go get progress working it's better to use PERL server-side.

The principle is simple: You start upload and then you periodically fetch the progress info from the server.

Maybe in the meantime, how could I get the "In prgress" circle animation while the file is uploading in the upload panel?

Also couple things:

- I'm using IE8 and I'm getting a problem when I add a file to the upload list and remove it before I try to upload it: the "Add" buttons dissapear from the panel.

- I also have the wierd behavior where I need to often click twice on the add button to get the browse dialog to open.

- The ctrl-U event doesn't pop the upload panel. Not big deal since we have it in the context menu but I thought I'd mention it.

Have you experienced with other upload panel extensions?


18 Mar 2010, 6:24 AM
There were some patches back in this thread for IE.

23 Mar 2010, 12:32 PM
Thanks for your great work. Pretty nice extension.

Why don't you create a repository of the code somewhere (bitbucket, github, gitorious, etc), which should make further contributions to it easier.

25 Mar 2010, 7:38 AM
Does anyone have a working example under Ext 2.3 (or even 3.x)? Currently I'm using Ext 2.3 but I cannot make the STOP button work. When I STOP an upload, actually it is not stopped (I can see the bytes still being sent).

How can I stop an upload? This is my problem.


25 Mar 2010, 12:18 PM
Which browser? This may be not fully cross-browser compatible:

,stopIframe:function(iframe) {
if(iframe) {
try {
iframe.remove.defer(250, iframe);
} // eo function stopIframe

2 Apr 2010, 4:47 PM
Any news on a 3.x compatible version?


2 Apr 2010, 10:12 PM
Not started yet, working on new site. Hopefully this month.

11 May 2010, 1:05 AM

I like your FileTree ans would like to have the PHP backend. Could you please contact me under sendmeamailtothis@gmx.de for the donation-information?


20 May 2010, 10:50 AM
Hi everybody!

I managed to build filetree.php file but I really got a problem to return JSON formated data:
What am I supposed to do? For now, my get() method, for instance, only returns the json encoded data.

I'm supposed to deal with headers but since this is my first attempt to deal with extjs I'm a bit lost..

Could someone telle me how to get a correct return? Where and how to use headers?

Thank you!

20 May 2010, 11:45 AM
You can analyze the example with Firebug to see what is sent/received.

20 May 2010, 12:07 PM
This is what I got with firebug:


I got a connection closed.
This is how my get() ends:

header("HTTP/1.1 200 OK");
header("Content-Type: application/json; charset=utf-8");
return json_encode($result);

A var_dump of "json_encode($result);" return what it's supposed to return.

Any idea?

20 May 2010, 12:35 PM
No real idea but try to return content-type:text/html. Files are uploaded with the help of hidden iframes that do not play well with application/json content-type.

20 May 2010, 12:57 PM
Nope... still connection closed.
Would you send me a snippet of get() please? (just header and footer of the function, to see where are the differences)

21 May 2010, 9:18 AM
Now everything is ok: I just had to replace this:

header("HTTP/1.1 200 OK");
header("Content-Type: application/json; charset=utf-8");
return json_encode($result);

with that:

print json_encode($result);

Thanks a lot jsakalos

27 May 2010, 10:42 AM
I'm trying to upload multiple files using 'upload' from FileTreeMenu,I'm able to add files to the Upload Queue but when click on Upload it's not doing anything.
While debugging FileTreeMenu turned out that store obj used for uploading files is been retured null.
May I missing something? Please Help!!!!
I'm using Firebug to debug,but not able to under what is missing.

FYI : I have moved this from the General Forum.


27 May 2010, 12:26 PM
The UX was originally written for 2.x and I haven't tested it on 3.x so the way would be to step through code to find out what's happening in there.

28 May 2010, 1:48 PM
The UX have some problems with 3.x. I did some digging and fixed the extension for 3.x. Tested it with the latest ExtJS version and seem to work ok. Here is the client code with a sample:


Here is backend java code that i tested this with:


2 Jun 2010, 8:24 AM
Thanks Piyush!! Really appreciate your help!!

7 Jun 2010, 8:54 AM
Thx really for this ext3.x compatibilty.

I make a php interpretor ... with some bonus like:
- hidden file
- extension ...

this is hardcoding and not really optimize. I have a problem to get the ext-gen upload for error (not in file/get/post)... a bug?

For the code (I will post a real vers. soon) :


$file_accepted = array("ico","js","png","gif","jpg","jpeg","pdf");

function dd($date) {
return date("d/m/Y H:i:s",$date);

function recursiveDelete($str){
return @unlink($str);
$scan = glob(rtrim($str,'/').'/*');
foreach($scan as $index=>$path){
return @rmdir($str);

if($_POST['cmd']) {
$cmd = $_POST['cmd'];

if($cmd === 'get') {

$rep .= $_POST['path'] . DS;
$dir = opendir($rep);
$array = array();
while ($f = readdir($dir)) {
if($f!='..' && $f!='.') {
if(is_file($rep.$f) && in_array(substr(strrchr($f, '.'), 1),$file_accepted)) {
$ext = substr(strrchr($f, '.'), 1);
$icon = "file-".$ext;
"qtip"=>"<b>Taille : </b>".filesize($rep.$f)." octets<br /><b>Modifié le : </b>".dd(filemtime($rep.$f))
if(is_dir($rep.$f) && $f[0]!= '.') {

echo json_encode($array);
if ($cmd === 'rename') {
if($_POST['newname'] && $_POST['oldname']) {
$newname = $_POST['newname'];
$oldname = $_POST['oldname'];
rename($oldname, $newname);
echo '{"success":true}';
} else {
echo '{"success":false,"errors":"Impossible de renommer"}';
if ($cmd === 'newdir') {
if($_POST['dir']) {
$dir = $_POST['dir'];
echo '{"success":true}';
} else {
echo '{"success":false,"errors":"Impossible de créer le dossier"}';
if ($cmd === 'delete') {
if($_POST['file']) {
$file = $_POST['file'];
echo '{"success":true}';
} else {
echo '{"success":false,"errors":"Impossible de supprimer le dossier"}';

if ($cmd === 'upload') {
if($_POST['path']) {
$path = $_POST['path'];

$uploaddir = $path. DS;
$uploadfile = $uploaddir . basename($_FILES['x-filename']['name']);

if($_FILES['x-filename'] && in_array(substr(strrchr($_FILES['x-filename']['name'], '.'), 1),$file_accepted)) {
if (move_uploaded_file($_FILES['x-filename']['tmp_name'], $uploadfile)) {
echo '{"success":true}';
} else {
echo '{"success":false,"errors":{"ext-gen65":"File uggfggegdgdfgdggdfggdfpload error."}}';
// Here, where is the ext-gen var? I make some print_r with no result :'(, firebug show nothing...


if you use the code... be carefull

14 Jun 2010, 12:26 AM
Hi, thanks again for this plugin...

replying to cybervirax, for the field ID used by response (in case of error) I made this change:

File: Ext.ux.FileUploader.js

// append input to the form
var inp = record.get('input');
inp.set({name: "x-filename"});

// append input to the form
var inp = record.get('input');
//inp.set({name: "x-filename"});
form.appendChild(inp);For server-side part (PHP), I used this:

foreach( $_FILES as $k=>$v ) {
$myFileName = $v['name'];
$myTempName = $v['tmp_name'];
$myFileSize = $v['size'];
$inputID = $k;
[...] // error
$resp['success'] = false;
$resp['errors'][$inputID] = "error during upload";
echo json_encode( $resp );
the response will be, for example:

{"success":false,"errors":{"ext-gen327":"error during upload"}}

How to make a callback after files are uploaded successfully?
Ok, I reply to myself :):
using ".on( "allfinished" ) event seems to work

3 Jul 2010, 11:19 AM
I'd like to use the progress feature for the Upload, and I've noticed that as the file
is uploaded, requests are made to the server for a file progress.php.

I have uploadprogress installed in the PHP server, but just wondered what to return?

Looking on the web in general on this it seems a bit of a mystery - does anyone have
like a small bit of php that would work with the tree control. I'm assuming that the
php script calls upload_progress in some way, and then returns a JSON packet, or
is there something else I need to do?



3 Jul 2010, 2:09 PM
PHP upload progress is pain in the a.. I'd probably use PERL or another language to implement a bullet proof upload progress indication.

4 Jul 2010, 1:27 AM
Ouch - unfortunately my server side is all PHP so its not really possible. Also I'm much
more confident with PHP.

4 Jul 2010, 2:00 PM
Me too - I've made it working once but the whole solution is very vulnerable. I believe that there must be a perl uploader so you wouldn't need to code it yourself in perl. Also, everything else can stay PHP; you can also access the uploaded file with PHP - only the uploader itself could be PERL (or python, whatever that provides a decent upload progress).

12 Aug 2010, 6:05 AM
When I create a new file it fires a newfile event AND a rename event.
I'm using the latest version of Ext.

The rename event fails because the newfile event has already actioned.

Has anyone else had this issue?

I'm hoping there will be a new beta - it's a fantastic component.

10 Sep 2010, 11:39 AM
I'm trying to use your UploadPanel to upload images to server.
I initialize the Panel like this:

items: [{
xtype: 'uploadpanel',
maxFileSize: 10000000,
url: "/orders/services/utils/uploadimage?product="+this.ownerCt.ownerCt.product.data.id
On server side I write java-code:
@RequestMapping(value = "/utils/uploadimage", method= RequestMethod.POST)
public void uploadImage(@RequestParam MultipartFile image, @RequestParam ProductPrototype product) throws IOException{
Java says that the request doesn't have parameter "image".
What can I do to fix this error?

13 Sep 2010, 12:39 PM
No idea. I don't use Java at server, I use LAMP servers.

25 Sep 2010, 9:33 PM
Help me. I tried running the file tree pane for Ext 2.0. Without success. can not decode JSON upload error, does not create or manipulate files and folders
Can not manipulate it.? Did I do the site? Who can I run a successful guide is not Filetreepanel Ext.
Thanks a lot
Demo: http://dark9k.byethost17.com/file/
my english is not very good.

26 Sep 2010, 12:24 AM
It looks like server-side error. There are also some cross-domain call attempts:

Unsafe JavaScript attempt to access frame with URL http://custom404error.com/?keywords=house%20now%20sell%20tempe/pagenotfound from frame with URL http://dark9k.byethost17.com/file/filetree.html. Domains, protocols and ports must match.

26 Sep 2010, 4:55 AM
It looks like server-side error. There are also some cross-domain call attempts:

Unsafe JavaScript attempt to access frame with URL http://custom404error.com/?keywords=house%20now%20sell%20tempe/pagenotfound from frame with URL http://dark9k.byethost17.com/file/filetree.html. Domains, protocols and ports must match.

Thanks. Add to my question. You can demo a php functions for handling rename the folder to create filetree.php are not. I do not understand much. Hope you help do.Thanks

26 Sep 2010, 7:03 AM
Sorry, I have no clue what are you asking. I've tried your link and have answered that it is probable a server-side error. If you want the backend, see http://www.sencha.com/forum/showthread.php?29090-Beta-1-Saki-s-FileTree-for-Ext-2.0&p=147056

28 Sep 2010, 2:30 PM
Hi Saki,
I need to save one image to database, so I believe is necessary upload it to server first,
but I no have clue how do it with extJs, I've downloaded the FileTree plugin,but I can't find any
documentation or guide about How use it...
Help please !!!

Thanks advance

3 Nov 2010, 5:44 AM
Hi Saki,

I've been integrating filetreepanel into tree-grid and Multiselect.

Are you interested in going down this route and working together?

4 Nov 2010, 12:08 AM
@erlinis, there is a complete example of filetree together with client/server interface specs at http://filetree.extjs.eu

@adam, I have some plans regarding filetree but I currently work on another project so I could tackle it early next year.

4 Nov 2010, 12:11 AM
do you like the idea of using tree-grid with it?

30 Dec 2010, 5:26 AM
Hi Saki,

thanks for the extension it's awesome, however and maybe i missed the solution but this thread is so big i cant look through all pages :D

i noticed the "detached" uploadPanel has only "root" stated as it's path parameter, but the upload panel present in the context menu does send the whole path root/folderA/folderB/.

WHy is this different and how does one fix this, i tried several things but cant seem to get the path from the treepanel into the uploadpanel....

kind regards

31 Dec 2010, 2:37 AM
The path is set by FileTree depending on which node you right-click. There's getPath method that is called with the right-clicked node as the argument that returns the correct path.

21 Jan 2011, 12:17 PM

Here is a question for you.

I previously used part of the tree code to download server side file (similar to the right-click/Open/Download option), but as some of the export information is large I added a progress bar. This worked fine in version 2.2 and I am just upgrading.

var progressMessage = Ext.MessageBox.wait("Export to "+ item.exportFormat + " in progress",
"Grid Export")
var callback = function() {


Ext.EventManager.removeListener(frame, 'load', callback, this);
setTimeout(function () {

}, 200);
setTimeout(function () {
}, 220);


Ext.EventManager.on(frame, 'load', callback, this);


The problem I have is that the callback does not seem to be called.
Even if I put an alert in, the code never seems to pass into the callback. I cannot see it either in the debugger (firefox or chrome).
Obviously the concern is that also it is not clearing the iframe.

Does anyone have any ideas what has changed to break this?
Thanks in advance

13 Apr 2011, 11:23 PM
Link is broken.. can't download the package..

Also, is this compatbile with ExtJs 3.3.1?

14 Apr 2011, 12:16 AM
U can download the complete files working for Extjs 3.x @http://subversion.assembla.com/svn/cUpdFUAIer35s0eJe5cbLr/trunk/filetreesample/ see piyushjain7 post on page 20 (http://www.sencha.com/forum/showthread.php?29090-Beta-1-Saki-s-FileTree-for-Ext-2.0&p=472234&viewfull=1#post472234).

14 Apr 2011, 1:59 AM
I've fixed the download link

3 May 2011, 8:08 PM

I'm looking for any tools for building TreePanel configuration. It not necessary for me to manipulate with files or folders - only abstract nodes. Is it possible using this application (which allowed create,delete,drag & drop nodes) save configuration of TreePanel in external file?

6 May 2011, 2:14 AM
I haven nothing that saves a tree config in an external file but I have RemoteTree extension that could serve a good basis for that. See http://remotetree.extjs.eu

6 May 2011, 2:24 AM
Has anyone got FileTree working in Ext4?

9 May 2011, 3:24 PM
Hi Saki,

I'm using an Ext.ux.UploadPanel with singleUpload:true and enableProgress:false, and Ext 2.3. If there's an error, I return something like this:

{"success":false,"errors":{"ext-gen817":"Upload failed"}}

The uploadCallback method notices the value of "success", and calls processFailure. This contains the following code:

// some files may have been successful
records = this.store.queryBy(function(r){
var state = r.get('state');
return 'done' !== state && 'uploading' !== state;

So it ignores the responses for files where state is "uploading". But that seems to be the state for all files I'm currently in the process of uploading. So it doesn't find my error message. As a result, the icon next to the file keeps spinning, instead of showing the error icon.

Am I missing something? I don't see where it would change the state to anything but "uploading". If I remove this check, it seems to work.


13 Jun 2011, 12:25 AM
Hi Saki,
Firstly awesome job you are doing and what Ext can do.

I am very new to Ext and have stumbled across your site.

I have managed to struggle through with the FileTree extension i downloaded on page filetree.extjs.eu. When i look in the server logs they mention filetree.php. I cannot find this anywhere, is there something i am doing wrong?

Also reading this blog it looks like there is a newer version and also Ext 4 is available. Could you recommend where i find the latest working version and what version of Ext i should use.

Also maybe a naive question, but does filetree populate the tree automatically from the server, or do i have to write something to populate it?


6 Jul 2011, 3:14 AM
First, well done Saki!

How can I automatically send the file to the server, when I add the file to the queue, without pressing the transfer button ?

7 Feb 2012, 12:10 AM
Hello, Saki.
Thank you for the wonderful extension, it works nicely, but I have a problem. I need to show some loaded files in UploadPanel manually (not by clicking 'Add' button).
I tried to loadData in UploadPanel's store, they even are shown in the list.
But the delete button is not displayed (cursor hand still shows when moved onto place where it has to be). When I add another file (using 'Add' button) and click on 'Remove all' button, JS error occurs, seems like store data needs 'input' elements. Looking to source of UploadPanel, I found that store's data's input elements are got from FileUploadField. How should I configure input field for data for initial load? Or may be there is a more correct way than loadData to UploadPanel's store?

15 Nov 2012, 5:09 AM
Has anyone got FileTree working in Ext4?
I have. Always wanted to post it here, there is no time yet.

18 Nov 2012, 11:13 PM
need this for extjs4 :)

19 Nov 2012, 8:26 AM
+1 for posting extjs 4 version.

19 Dec 2012, 1:58 AM
Here is the working example


24 Dec 2012, 4:20 AM
Note: it works with chrome, nothing appears when run with a firefox browser.

could you please let us see the codes for this? thanks!:)

24 Dec 2012, 10:43 PM
Note: it works with chrome, nothing appears when run with a firefox browser.

Correction: it does appear on a firebox browser as well, but takes longer! ;)