PDA

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



Pages : [1] 2 3 4

jsakalos
11 Mar 2008, 5:48 AM
Hi all,

this is my first beta release of FileTreePanel for Ext 2.x (http://filetree.extjs.eu). Despite it looks very similar if not identical to Ext 1.x implementation, it is different, more structured and offers more (or different) configuration options which deserves an explanation.

The whole toy consists of 5 relatively independent classes that can be used also outside of FileTreePanel component. Starting from bottom up, they are:


Ext.ux.FileUploader:
This class is responsible for file uploads and has no UI. It has to have configured a store with some mandatory and some optional fields that contains mainly references to file input elements that hold file names to upload. It feature two modes of upload:

Single upload mode takes all inputs from store, creates one form, appends inputs to it and uploads files in one single request.
Multiple upload mode creates one form for one input and uploads each file in its own request. Other features:
extends Ext.util.Observable
start/stop all or individual uploads
set path to upload to
full set of events, both for individual files and whole upload
upload progress support (not working for more than one file with PHP uploadprogress backend)
client/server communication specification is same as for my Ext 1.x versionExt.ux.UploadPanel:
Provides user interface to the above uploader with a couple of buttons, DataView to display the upload queue and status of files and mainly the store used by both DataView and FileUploader. UploadPanel was designed to fit to a menu therefore it is small and narrow by design. Other features:
extends Ext.Panel
add files to queue, queue display
remove files from queue one-by-one or all at once
UI to stop whole upload or individual files
icons for many file types
icons for status of files Ext.ux.BrowseButton by loeppky: (http://extjs.com/forum/showthread.php?t=29032)
This class was not written by me, I just used it because it is good and working and because loeppky promised support and debugging if necessary.



Ext.ux.FileTreeMenu:
It is (context) menu for FileTreePanel that contains UploadPanel for file uploads and other items for basic file operations such as:
various open modes
create folder
rename file/folder
delete file/folder
upload file
reload/expand/collapse of tree nodesExt.ux.FileTreePanel:
This server file tree UI that integrates all things together. Features:
extends Ext.tree.TreePanel
file type icons for many file types
inline editing of file/folder names
drag & drop operations
context sensitive context menu
optional top toolbar in addition to context menu (especially good for Opera users) Overall status:
The code, though beta, is in very good condition, it is fully documented and commented and jslinted. Of course, I haven't had enough time to test everything so some bugs can pop up. I'm counting with your interest, support and bug reporting to help me to find and fix them. As majority of you perhaps already know, I'm not neither interested nor skilled enough to find IE bugs and workarounds for them, however, if you find IE specific bugs and workarounds for them, I will include them in the main code if they will be enclosed in Ext.isIE conditional blocks.

Features planned for 1.0 release are all implemented except the progress information I'm not quite sure about. The problem is mainly on server side so if some of you know how to implement better progress information for Apache/PHP@Linux I'll be only glad to hear from you.

The whole FileTreePanel package is now downloadable in 3 compressed formats: bz2, tar.gz and zip. Server side scripts, as for 1.x version, are not included in packages. You can write your own per specification I've published or you can contact me via PM or skype.

Enjoy!

Note: You may need to adjust paths in filetree.css if your icons do not show correctly.

-------------- original post bellow -------------
Hi all.

I've reached one step in porting my FileTree to Ext 2.0, minor but important one, and that is Ext.ux.form.FileField form field.

This will become part of UploadForm (or something similar) and UploadForm will become part of FileTree.

Take a look at it here (http://filetree.extjs.eu) and let me know what do you think.

Thanks,

newc_k
11 Mar 2008, 8:40 AM
Very nice
But,Why is it necessary to include ext-all-debug.js?

jsakalos
11 Mar 2008, 9:15 AM
Because "In Progress" === not finished === likely to be debugged === include debug version of Ext.

;) ;) ;)

loeppky
12 Mar 2008, 9:52 AM
jsakalos: with MaximGB's ideas/help, I have implemented a Ext.ux.form.BrowseButton extension (http://extjs.com/forum/showthread.php?t=29032) for doing the CSS hackery of placing an input file element over an Ext.Button. It works with all the Windows browsers (IE6/7, FF2, Safari 3). I don't have a Mac to test with unfortunately. It covers almost the entirety of the Ext.Button and it prevents the input file from overlapping other buttons. I think you could integrate it very easily into your Ext.ux.form.FileField.

Actually, MaximGB and I were just recently in discussion about using creating a Ext.ux.form.BrowseField that would use Ext.ux.form.BrowseButton, but it looks like that's unnecessary now :)

jsakalos
12 Mar 2008, 1:24 PM
Yeah, I know. However, I need a bit more to it such as store for multiple files, custom fields, etc.

loeppky
12 Mar 2008, 3:00 PM
jsakalos: in your Ext.ux.form.FormField class, you can call detachInputFile method on the Ext.ux.form.BrowseButton to get the inputFileEl. Your Ext.ux.form.FormField class would then manage these file input elements and take care of displaying them to a user in your stylized way. detachInputFile will by default create a new inputFileEl to mask the BrowseButton as soon as the previous one is "detached".

Does this help your use case? Or maybe there's something I'm not understanding...

loeppky
12 Mar 2008, 4:48 PM
jsakaolos: I updated post #2 (http://extjs.com/forum/showthread.php?p=136247#post136247) of the Ext.ux.form.BrowseButton thread with a link to a sample of BrowseButton online: http://loeppky.com/steven/code/samples/BrowseButton/. This sample displays and manages the files that were selected for upload.

jsakalos
12 Mar 2008, 5:12 PM
Thanks, I take a deeper look as you've done great job on button look and cross-browser compatibility.

It's perfect that you've added demo, especially the demo mode as it shows ho buttons are done.

One question: If I decide to use your code in my application, what is license?

loeppky
12 Mar 2008, 8:58 PM
jsakalos: glad you like the demo. I hadn't thought about licensing. I'll get back to you by tomorrow. Obviously, I'm not trying to do any of this for profit, so what would you recommend?

jsakalos
13 Mar 2008, 3:29 AM
jsakalos: glad you like the demo. I hadn't thought about licensing. I'll get back to you by tomorrow. Obviously, I'm not trying to do any of this for profit, so what would you recommend?
Ext is licensed under LGPL what very shortly means:



* Commercial use is permitted to the extent
* that the code/component(s) do NOT become part of another Open Source or Commercially
* licensed development library or toolkit without explicit permission.
*
* License details: http://www.gnu.org/licenses/lgpl.html


If somebody cannot or does not want to be bound by LGPL he can buy a commercial license. I'd say this is workable setup, however, final decision is yours.

BTW, I'm going to use your BrowseButton for my upcoming UploadPanel and FileTree. I works very well so far, you've done great job!

jsakalos
13 Mar 2008, 6:37 AM
Hi loeppky,

you can see your BrowseButton in action here: http://filetree.extjs.eu

I found some issues, don't know yet if it's because of my misconfiguration or bugs:



BrowseButton doesn't open file dialog in Opera neither Winblow$ nor Linux version
When it is in bbar (menu button at the top-left corner) it doesn't seem to work reliably in IE7 after adding several files - even after I've removed doctype
Works perfect in Firefox

Issues 1 and 2 are of no importance for me as I force my users to use Firefox but they can matter for others.

You can download zip here (http://filetree.extjs.eu/filetree.zip).

loeppky
13 Mar 2008, 10:47 AM
Concerning licensing, I talked with MaximGB, and we agree on wanting people to use extensions like BrowseButton without any restrictions. Do you foresee any issues with just saying it's part of the public domain (http://en.wikipedia.org/wiki/Public_domain), or at the maximum giving it a BSD style license (http://en.wikipedia.org/wiki/BSD_license)?

Concerning the issues you discovered, thanks for letting me know. Specifically:
I could get Opera to work with BrowseButton if the button was explicitly created and added to the Panel's button bar through "button" config. I have updated the browser compatibility in the post to report this.
I tried to verify the IE7 issue. I added 20 files with no problem. How many files were you adding when it started to break for you?
Yay for Firefox!
Your FileField/Filetree is looking awesome. Nice work. I'm digging it.

jsakalos
13 Mar 2008, 11:14 AM
No I see no problem if you license it as public domain if it's fine with you.

Re issues: Ok, I'll let 'em be for now I just want to make sure that if I release FileTree I can address you for support on anything users will find on BrowseButton, agree?

Thanks for your interest, stay tuned (btw, look at it now...).

loeppky
13 Mar 2008, 11:45 AM
Game on and you bet, I will certainly do my best to address any issues you or any other users find with BrowseButton.

jsakalos
16 Mar 2008, 6:06 PM
Hi all,

Beta 1 is out. See first post (http://extjs.com/forum/showthread.php?p=136513).

Enjoy!

esoteric
17 Mar 2008, 10:43 AM
Great extension, this is such a great tool, thanks for the hard work and the awesome extension.

jsakalos
17 Mar 2008, 10:51 AM
Great extension, this is such a great tool, thanks for the hard work and the awesome extension.

Thank you, I'm glad you like it.
:) :) :)

george.antoniadis
17 Mar 2008, 11:58 AM
OMG Saki you ROCK my world!!! ^_^

lobo-tuerto
17 Mar 2008, 11:31 PM
I just took a look at the demo and it is excellent!

Thank you for your hard work :)

When I right-click an element in your FileTreePanel it shows a context menu, but also shows the Firefox right-click menu. I don't know how easy or if is it even advisable to supress the Firefox right-click menu, what do you think?

franckxx
18 Mar 2008, 12:51 AM
Hi Saki,

I it possible for u to send the filetree.php ?
Whe need it for make it workable.

Thx a lot for share great code ;-)

jsakalos
18 Mar 2008, 2:22 AM
I just took a look at the demo and it is excellent!

Thank you for your hard work :)

When I right-click an element in your FileTreePanel it shows a context menu, but also shows the Firefox right-click menu. I don't know how easy or if is it even advisable to supress the Firefox right-click menu, what do you think?


Hmmm,

I stop the contextmenu event so it shouldn't propagate nor default action should be taken. Which version of FF? I've tested 2.0.0.12 both on Linux and Windows and there is no browser context menu displayed in addition to FileTreePanel context menu. I haven't tested on Mac, I don't have one around.

Do you have any screenshot of it?

lobo-tuerto
18 Mar 2008, 1:32 PM
Sure, here they are.

If you need me to try something, just tell me, I'll be happy to assist you.

BTW I'm using FF 2.0.0.12 (spanish version) in Ubuntu 7.10.

Mozilla/5.0 (X11; U; Linux i686; es-AR; rv:1.8.1.12) Gecko/20080207 Ubuntu/7.10 (gutsy) Firefox/2.0.0.12

jsakalos
18 Mar 2008, 1:56 PM
Hmmm,

funny part of it is that it must be browser dependent as you connect to the same page as I do (http://filetree.extjs.eu). I run Firefox 2.0.0.12@openSUSE-10.3+updates and I've never got that default browser context menu.

Try to clear cache, try Seamonkey (same engine as FF), try English version, ....

Could it be that Spanish version?

jsakalos
18 Mar 2008, 2:14 PM
Try that context menu now - I'm returning false from event handler now and I've put additional listener on tree.el that cancels the event.

Ctrl+Reload please...

lobo-tuerto
18 Mar 2008, 2:18 PM
Tried it a few minutes ago with the English version, and it didn't pop the context menu, hard to know if you had already modified it heh.

And yes, it is working as expected now in my spanish Firefox, thanks a lot :)

danvega
19 Mar 2008, 5:43 AM
First off I just want to say congrats on a great user extension. I think is going to help many people out including myself. I am having one issue though. When the tree loader runs I see a request run and it posts the following information.

cmd get
node ynode-44
path ext/air

When I do an upload I don't see any information being passed through firebug. I was able to dumb the form contents but still cant find the name of the file being passed. I need to handle the deletes / and upload methods. I am writing this in CF but if you could provide your php example for filetree.php I could probably figure it out.

Thanks Again for your great work!

Dan

jsakalos
19 Mar 2008, 6:04 AM
Have you seen FileTreePanel Client-Server Interface Specification (http://aariadne.com/filetree)?

Just to explain: You cannot upload files with Ajax, therefore, uploads are handled by creating a hidden form (file input(s) appended to it), a hidden iframe and then the form is submitted traditional way with its target set to hidden iframe.

That is reason why you don't see any request/response in Firebug console.

danvega
19 Mar 2008, 12:15 PM
If I set a url to handle the file operations like so. The form still posts itself to filetree.cfm right? If so how do I know what the name of the form filed so I can upload the contents. I hope this makes sense. Your document was very helpful to get every other operation working ,this is last piece of the puzzle for me!


Thanks again.



<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
Ext.onReady(function(){

Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
Ext.state.Manager.setProvider(new Ext.state.CookieProvider);

treepanel = new Ext.ux.FileTreePanel({
width:500,
height:400,
id:"ftp",
title:"Directory Browser",
renderTo:"treepanel",
rootPath:"ext",
rootText:"Root",
topMenu:true,
autoScroll:true,
url:"filetree.cfm",
singleUpload:false,
enableProgress:false
});

});
</script>

jsakalos
19 Mar 2008, 12:27 PM
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

jsakalos
19 Mar 2008, 2:28 PM
Hi all!

I've added destroy stuff, hopefully haven't broken anything - please test and let me know.

Cheers,

fallenone
20 Mar 2008, 10:20 AM
I just want to say this a grey plugin! And is going to work perfectly for a project I'm doing! And I just have a couple questions. How do u populate the tree I see its calling a Php file but what does the code look like. I tried searching around Gor it but couldn't find anything. An example would be great also I was wondering how extensible this was ie. File types and what not.like for images leave it as open on new browser window bit if its something else then open a new tab? I'm new to Ext so I'm trying to figure stuff out and haven't had a chance to fully look at your code. Any help would be much appreciated!

jsakalos
20 Mar 2008, 12:53 PM
Re PHP - this is client side forum so I haven't included PHP files on purpose. PHP is only one of the server languages that can be used for this purpose. I have publishe Client/Server Communication Specification (http://aariadne.com/filetree) instead that you can use to write your server backend.

Filetypes icons used are defined in css file that you can change to your liking.

Also, you have 4 open modes one of them you can set as default.

The full source code is included in download just open it in your favorite editor. Also, the source code is fully documented with description of configuration variables and is heavily commented. You're welcome to read it.

danvega
20 Mar 2008, 5:50 PM
First off thanks for all your help. I got everything working so If anyone needs it here is my filetree.cfm page.



<cfswitch expression="#form.cmd#">

<cfcase value="get">
<cfdirectory action="list" directory="#ExpandPath('.')#\#form.path#" name="directoryListing">
[<cfoutput query="directoryListing">{text:"#name#",disable:false,leaf:<cfif type EQ "Dir">false<cfelse>true</cfif>}<cfif currentRow NEQ recordCount>,</cfif></cfoutput>]
</cfcase>

<cfcase value="delete">
<cftry>
<cffile action="delete" file="#ExpandPath('.')#\#form.file#">
{"success":true}
<cfabort>
<cfcatch type="any">
<cfoutput>{"success":false,"error":"#cfcatch.message#"}</cfoutput>
</cfcatch>
</cftry>
</cfcase>

<cfcase value="rename">
<cftry>
<cffile action="rename" source="#ExpandPath('.')#\#form.oldname#" destination="#ExpandPath('.')#\#form.oldname#">
{"success":true}
<cfabort>
<cfcatch type="any">
<cfoutput>{"success":false,"error":"Cannot rename file #form.oldname# to #form.newname#"}</cfoutput>
</cfcatch>
</cftry>
</cfcase>

<cfcase value="newdir">
<cftry>
<cfdirectory action="create" directory="#ExpandPath('.')#\#form.dir#">
{"success":true}
<cfabort>
<cfcatch type="any">
<cfoutput>{"success":false,"error":"Cannot create directory: #form.dir#"}</cfoutput>
</cfcatch>
</cftry>
</cfcase>

<cfcase value="upload">
<cfset pos = listContains(form.fieldnames,"EXT")>
<cfset input = listGetAt(form.fieldnames,pos)>
<cftry>
<cffile action="upload" destination="#ExpandPath('.')#\#form.path#\" filefield="form.#input#">
{"success":true}
<cfabort>
<cfcatch type="any">
<cfoutput>{"success":false,"errors":{"#input#":"#cfcatch.message#"}}</cfoutput>
</cfcatch>
</cftry>
</cfcase>

</cfswitch>

danvega
20 Mar 2008, 5:53 PM
Also something I noticed. When I first load the page the icons for images are the generic leaf icon. If I go and rename them but keep the same extension it turns to the correct image icon. Maybe i have something wrong on my end but I thought I would throw it out there.

Again, great work...

jsakalos
20 Mar 2008, 6:11 PM
I'd bet it something at your site as I cannot observe this behavior on demo page.

jsakalos
20 Mar 2008, 6:14 PM
I know nothing about cfm but I don't see there any part that would make paths safe. Some intruder can throw path like "../../../../../" or "/ etc / passwd" to your script.

madrabaz
21 Mar 2008, 3:53 AM
Hi saki,
thanks for this greeat extension,
I think I found some issues;

When move the file (actualy rename) folders do not refresh. I mean if I move file x from folder A to folder B, After the rename(move) operation file x seen booth folder A and B
When file upload Ext.ux.FileUploader class sends unnecessary 'dir' parameter
Ext.ux.FileUploader line 79


baseParams:{cmd:'upload',dir:'.'}


And a question
when we use _POST['UPLOAD_IDENTIFIER'] parameter (upload progress?)

regards,

jsakalos
21 Mar 2008, 4:59 AM
Thank you for pointing out the "double file" issue, I'll take a look at it.

dir parameter is very important as it says where to upload. Without it you could upload only to the tree root and then you would need to move uploaded file(s) manually. Now, if you open context menu on, let's say, Folder A and then upload, dir is set to "./Folder A" and file is uploaded directly there.

UPLOAD_IDENTIFIER, yes, it's for upload progress. You can safely ignore it serverside if you don't need/want upload progress.

madrabaz
21 Mar 2008, 5:14 AM
dir parameter is very important as it says where to upload. Without it you could upload only to the tree root and then you would need to move uploaded file(s) manually. Now, if you open context menu on, let's say, Folder A and then upload, dir is set to "./Folder A" and file is uploaded directly there.

But FileTreePanel also sends 'path' which show exact upload directory.:-/


Array
(
[UPLOAD_IDENTIFIER] => 6362778439
[MAX_FILE_SIZE] => 524288
[path] => images/pages/3
[cmd] => upload
[dir] => .
)

jsakalos
21 Mar 2008, 5:32 AM
FileTreePanel doesn't send anything. All client/server communication is done by FileUploader.

Do you have any problem these posted values? Do they conflict with your application? Does it somehow breaks your application? Any recommended patch?

jsakalos
21 Mar 2008, 5:35 AM
Oh, I see what you mean. It is base directory on server. path is relative to it.

madrabaz
21 Mar 2008, 5:37 AM
No,
I just want to know, 'dir' param has a special role, or not ?
If it gets some benefit, I changed my server side script

jsakalos
21 Mar 2008, 5:41 AM
We're probably posting too fast... ;)

The absolute path on server is composed of 1) server defined root, e.g. /data/files/ 2) dir that can point deeper into that server root 3) path that is relative to dir:



/data/files/[dir]/[path]

madrabaz
21 Mar 2008, 6:33 AM
Base traslation file and turkish translation for FileTree
You can append FileTree translation to ext translation file.

English Translation (Base)
[CODE]
/**
* FileTree Translation : English en_US
*
* @author Ing. Jozef Sak

fallenone
21 Mar 2008, 9:25 AM
thanks for the fast response! sorry i was such a noob and didn't look for that before posting! thanks for all your help and your code/documentation is GREAT!!! making it really easy to add menu items and other code bits thanks a bunch!

danvega
21 Mar 2008, 11:14 AM
I am trying to create a file browser (for learning purposes) using your FileTree and a grid. I have to quick questions. I am updating the grid when a node is clicked if it is a directory. I am wondering if there is a way to expand a directory on single click instead of double click. Second Is there an event for all of the actions like afterUpload,afterRename etc.. so that I know to fire a refresh to my grid? Here is my code, thanks for all your help



<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
Ext.onReady(function(){

Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
Ext.state.Manager.setProvider(new Ext.state.CookieProvider);

//data source
var ds = new Ext.data.JsonStore({
url: "directorylist.cfm",
root: 'data',
id: 'NAME',
fields:["NAME","DATELASTMODIFIED","SIZE","TYPE"],
autoLoad:true
});

//column model
var cm = new Ext.grid.ColumnModel([
{header: "NAME", sortable: true, dataIndex: 'NAME'},
{header: "DATELASTMODIFIED", sortable: true, dataIndex: 'DATELASTMODIFIED'},
{header: "SIZE", sortable: true, dataIndex: 'SIZE'},
{header: "TYPE", sortable: true, dataIndex: 'TYPE'}
]);

//data grid
dg = new Ext.grid.GridPanel({
id:"filebrowser",
ds:ds,
cm:cm,
region:"center",
loadMask:true,
viewConfig:{
autoFill:true,
forceFit:true
}
});

treepanel = new Ext.ux.FileTreePanel({
width:250,
id:'ftp',
region:"west",
collapsible:true,
rootPath:'ext',
rootText:"Ext",
autoScroll:true,
url:"filetree.cfm",
singleUpload:false,
enableProgress:false
});

win = new Ext.Window({
id:"container",
title:"File Browser",
renderTo:Ext.getBody(),
width:800,
height:500,
modal:true,
layout:"border",
items:[treepanel,dg]
});

win.show();

treepanel.addListener("click",function(node,e){
if(!node.isLeaf()){
ds.load({params:{path:node.getPath("text")}});
}
});

});
</script>

jsakalos
21 Mar 2008, 11:29 AM
Hi madrabaz,

thank you very much for contributing Turkish translation and for your other contributions to the Ext community too. You have inspired me to put a language selector on demo page so you can now see FileTreePanel in action also in Turkish language. I have also put your translation into FileTreePanel download package.

Should any change or correction be needed just notify me. (Open is Open also in Turkish?)

jsakalos
21 Mar 2008, 11:36 AM
Hi Dan,

all events that apply to tree and tree node apply also FileTreePanel. These events are documented in Ext docs. In addition to these there are FileTreePanel specific events that are documented in the source of FileTreePanel and other classes.

To examine all events that FileTreePanel fires and their order navigate to the demo page and in Firebug console type:


Ext.util.Observable.capture(Ext.getCmp('ftp'), function(e) {console.info(e)})

madrabaz
22 Mar 2008, 3:30 AM
Should any change or correction be needed just notify me. (Open is Open also in Turkish?)
Oh I missed the translate it, corrected

Dumbledore
22 Mar 2008, 5:36 AM
can someone explain how to send extra fields?

I try baseParms but it doesn

jsakalos
22 Mar 2008, 6:40 AM
basePrams are one level down on FileUploader class. I'm anyway thinking about the best way to propagate these configs from upper level (FileTreePanel or UploadPanel) down to menu and uploader. uploader is public property of UploadPanel after it is created.

I'm thinking about best way of propagating config options to lower levels at config time and also at runtime.

Dumbledore
22 Mar 2008, 7:14 AM
why not also use baseParams and add this to the baseParams of the FileUploader Class?

Bye, Dumbledore

jsakalos
22 Mar 2008, 7:16 AM
Yeah, I mean you would specify baseParams for UploadPanel or FileTreePanel and they would be propagated down to uploader.

I'll take a look at it later today.

jsakalos
23 Mar 2008, 2:37 PM
baseParams are now propagated from upper levels (FileTreePanel and UploadPanel) to FileUploader. Try it out please.

fallenone
24 Mar 2008, 12:23 AM
to be honest im not sure if this is the right place to post this and im sorry if its not but when i use just the filetree widget everything displays correctly but when i put it together with a layout it shows the images but there messed up and i think its something with the css.
see pagedisp.png attatched.
im not to familiar with ext and the themes so im not sure if that has something to do it but using firebug i can mouse over the css and it will load the correct image in the pop up but if you look at the html portion and the src it doesn't have the correct path? but if i copy and paste all the imports and everything and only have the filetree widget it works. and the messed up display file and the one that works with just the filetree widget are in the same location?if this is in the wrong location im terribly sorry! any help would be much appreciated!
the firebugoutput1 displays the styls and the 2 displays the html output of firebug after inspecting the image

jsakalos
24 Mar 2008, 1:40 AM
Check if Ext.BLANK_IMAGE_URL is correct. It should point to blank image on your server. You can check also other image/css paths.

BTW, This problem is not FileTreePanel specific so you could get faster help if you posted in Help forum.

jay@moduscreate.com
24 Mar 2008, 8:54 AM
Saki,

that is hot! :D

Dumbledore
24 Mar 2008, 10:13 AM
Saki,

baseParams works great! Thanks!

Bye, Dumbledore

fallenone
24 Mar 2008, 1:11 PM
hey thanks a lot sorry to post in the wrong area! I meant to remove it this morning I just fixed my dumb mistake.

mlim1972
24 Mar 2008, 7:29 PM
Saki,
THX for the great extension... I just tried the baseParams and it works on the following ops:
1. cmd:get (although I just see "path" param name and not "cmd" in the request)
2. File upload

but not in:
1. Rename files / folders
2. Moving folders around (which seems to be the same as Rename folder but to a diff. path)
3. Delete files / folders

Dumbledore
24 Mar 2008, 10:11 PM
i am not a great translator, but perhaps someone find it usefull:

[CODE]/**
* FileTree Translation : German de_DE.UTF-8
*
* @author Ing. Jozef Sak

jsakalos
25 Mar 2008, 12:21 AM
Thank you very much for contribution of this translation.

I have corrected the Delete Key translation but some texts are still too long for context menu/upload panel. Is it possible to use some shorter synonyms?

You can see it on demo page.

RacingTomcat
25 Mar 2008, 8:48 AM
Hi Saki,

again I have to say you're doing a great job with this extension.
I am loving it and its working great for me this far.

Now I have the following question:

I want to change the root node of the tree by buttonclick, or ajax response...
Is there any chance to do this, maybe a with a simple function .setRootNode() or something like that?

Best regards
Alexander

jsakalos
25 Mar 2008, 9:59 AM
As it has been discussed a couple of posts back, the server absolute path is composed of:



[server configured root]/[dir]/[path]


and path is root path + child path. Now, dir is defined in uploader (it would really deserve some function of tree panel to set it from upper level) but you can set path easily:



filetree.root.attributes.path = 'your new path'
filetree.root.setText('your new root text')


Anyway, I'll implement something in this direction.

mlim1972
25 Mar 2008, 7:35 PM
Saki,
This extension is awesome... Just what I needed... While using FileTreePanel, is there a way to pass the events to UploadPanel and FileUploader? Might need to pass event the same way as done with baseParams. Also, baseParams are not used for all commands/actions as mentioned on my previous post.

pravin_bluebird
25 Mar 2008, 8:45 PM
Hello all,
I want some help.

I want to show the number of bytes uploded and number of bytes left to be uploded while uploading a file.....
I search a lot but didn't get any useful help..So i send you a private message with the hope that i can get at least a way to how can i go ahead.....

Any help will be greatly appreciated ..

Regards

Dumbledore
25 Mar 2008, 10:33 PM
I have corrected the Delete Key translation but some texts are still too long for context menu/upload panel. Is it possible to use some shorter synonyms?


hmm... for uploadFiletext you can use :

[CODE]uploadFileText:'Datei

jsakalos
26 Mar 2008, 3:43 AM
I have corrected uploadFileText as you suggest. For others I don't know either, if there are no good synonyms german users can set width of context menu - not too universal but should work

jsakalos
26 Mar 2008, 3:46 AM
Saki,
This extension is awesome... Just what I needed... While using FileTreePanel, is there a way to pass the events to UploadPanel and FileUploader? Might need to pass event the same way as done with baseParams. Also, baseParams are not used for all commands/actions as mentioned on my previous post.

Well, I'm not getting what you mean by "pass events to...". Events are "fired by". Also, baseParams are used only for client/server communication so they are used only by FileUploader. FileTreeMenu, UploadPanel and FileTreePanel do not communicate with server

jsakalos
26 Mar 2008, 4:20 AM
Hello all,
I want some help.

I want to show the number of bytes uploded and number of bytes left to be uploded while uploading a file.....
I search a lot but didn't get any useful help..So i send you a private message with the hope that i can get at least a way to how can i go ahead.....

Any help will be greatly appreciated ..

Regards

FileUploader has configurable progress monitoring that requests these values from the server and if they are delivered it updates the underlying record and fires progress event. However, current PECL extension uploadprogress is not thread safe so if you upload more than one file each in its own request (singleUpload:false, which is default) it doesn't work.

You could use another upload handler serverside, e.g. some of the perl cgi uploaders, but I haven't found any that would be suitable for FileTreePanel. If you find one, let me know.

Thorsten
26 Mar 2008, 5:05 AM
Hello,

first of all thank you for this very nice extension. Your work (not only on this extension) has helped me a lot (for functionality and for understanding :) )

I have run into a problem with the BrowseButton in the uploadPanel. I post this here, because the "standalone" BrowseButton works for me outside the uploadPanel (for exampel in a toolbar, created 'via xtype') .

I think the Problem is, that the DIV with the underlying INPUT is not following the mouse. A click on the created button only opens a dialog when clicked in the very upper left corner of the button.
Here is the code for my Panel. It is placed in a cardlayout which is in the centerRegion of a borderlayout:


...
pagesCard = new Ext.Panel({
id: 'pagesCard-2',
title: 'Pages:',
layout: 'absolute',
iconCls: 'icon-upload',
items: [{
x: 50,
y: 50,
width: 400,
height: 250,
xtype: 'uploadpanel',
buttonsAt: 'tbar',
id:'upPanel',
url: 'procesPages.php',
maxFileSize: 1048576
}]
});

...


Thank you in advance for you help,
kind regards,
Thorsten.

edit:
-------------------
I could reproduce this Problem with FF 2, IE 6, 7

jsakalos
26 Mar 2008, 5:45 AM
Notify please also the author of the BrowseButton to take a look.

loeppky
26 Mar 2008, 8:26 AM
Thorsten: Is it possible for you to post this issue with BrowseButton online somewhere? I don't have a lot of bandwidth at the moment, so it help me out if I didn't have to set up an example scenario.

Another thing: the BrowseButton class has a debug config option. If you set it to true, it won't make the button transparent, thus enabling you to see what's going on better. You'll have to modify Saki's code so that when it instantiates the BrowseButton, debug is set to true.

Thorsten
26 Mar 2008, 9:12 AM
Thank you both for the fast replys.

I will setup a little test site this evening and will post the url here. I will also try to activate the debug mode.... I allready tried "debug: true" as conifg option, but wasnt thinking of add this to the uploadPanel code....

Greetings,
Thorsten.

Thorsten
27 Mar 2008, 12:07 AM
Good Morning,

I have set up a samall testsite under http://ext.thsch.net.
On this page the debug mode of the BrowseButton is turned on.

During doing this I have found out one more thing:
If the card with the UploadPanel is rendered as first (visible) item of the cardPanel the BrowseButton works fine. If it is not the first visible item, the div with the INPUT covers only the upper left of the "ExtButton".

You can switch between the both scenarios via the link in the eastPanel.

edit:
---------------------
...so i tried defferedRender: ture and false, but this didn

loeppky
27 Mar 2008, 1:59 AM
Thorsten: thanks a lot for setting up this example sight. This demonstrates the issue excellently. The issue is actually that the overlay div is sized incorrectly. It's positioned in the right place, just has a small height and width. As soon as I change these heights and widths, it looks great. I will look into this more tomorrow when I am up for good verses being paged in the middle of the night for work :).

loeppky
27 Mar 2008, 2:41 AM
Thorsten: I can get this to work by setting defferedRender to true. Your centerCardPanel instance variable needs to have the following:



layout : 'card',
layoutConfig : {
deferredRender : true
}


How does this work for you?

jsakalos
27 Mar 2008, 2:44 AM
Correct spelling of the option is: deferredRender ;)

Thorsten
27 Mar 2008, 3:06 AM
This is working...Thank You!

I tried deferredRender as direct config Option of the Panel, without having in mind, that it is an config Option of the layout, NOT of the Panel itself.

Again an perfect example for "Read the documentation carefully!".... :"> Sorry...

Only thing i had to alter in my code after this, was an doLayout() after every change of the cards..

Thank you both for your help,
Thorsten

madrabaz
27 Mar 2008, 5:08 PM
Hi saki,
I found an issue

Issue : Even enableOpen is set to false, double click to or press enter on a file/leaf still opens the file.

Patch:


--- filetree\js\Ext.ux.FileTreePanel.js 2008-03-24 02:04:28.000000000 +0200
+++ Ext\ux\filetree\Ext.ux.FileTreePanel.js 2008-03-28 03:03:20.281250000 +0200
@@ -1235,4 +1235,7 @@
,openNode:function(node, mode) {

+ if(!this.enableOpen){
+ return;
+ }
mode = mode || this.openMode;

jsakalos
27 Mar 2008, 5:55 PM
Yes, you're right. Thank you for debugging. Patch is implemented.

lagos.tout
28 Mar 2008, 4:45 AM
Hi,

I'm using Saki's File Upload component for the first time and keep getting an error thrown every time i rollover the 'Add' button. The error is :

[Exception... "'Permission denied to get property HTMLInputElement.nodeType' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "<unknown>" data: no]

Has anyone else experienced this?
Thanks.
LT

jsakalos
28 Mar 2008, 4:50 AM
FileUploader is user extension and technically there is no Premium Help provided for it. Also, I is better to post in original thread as this is closely watched by me so you're most likely to get fast responses.

Do you want me to merge this thread there?

Now to the question, do you have a showcase? It looks like some element is missing or some id collision but it is difficult to zero in on the problem w/o reproducing it locally.

spectrus
28 Mar 2008, 9:18 AM
Is it just me or does the browse button disappear (or rather shrink to a few pixels' width) once you click on either "remove all" or simply remove any file from the list when viewing the demo (http://filetree.extjs.eu/) in IE 7?

Attached is a screenshot of what it looks like with mouse is over the region where the button is supposed to be.

loeppky
28 Mar 2008, 9:38 AM
spectrus: this occurs with IE7 for me as well. Let's see if Saki knows what's going on.

jsakalos
28 Mar 2008, 9:39 AM
Hey community!

Calling for help. I'm very bad in hunting for IE bugs. Please help me to find this one.

Thank you.

spectrus
28 Mar 2008, 9:55 AM
How DOES one usually hunt for ExtJS bugs in IE? I tried the DebugBar, but it can't do half the things Firebug can, it's essentially useles...

I'd love to hear some sort of "best practices" for this.

jsakalos
28 Mar 2008, 9:55 AM
It's only IE7, IE6 works fine.

jsakalos
28 Mar 2008, 9:56 AM
How DOES one usually hunt for ExtJS bugs in IE? I tried the DebugBar, but it can't do half the things Firebug can, it's essentially useles...

I'd love to hear some sort of "best practices" for this.

For me it was always just hint/trial/error|success method. World would be much nicer w/o M$.

lagos.tout
28 Mar 2008, 10:55 AM
Hi, Saki.

Yes, please move the thread. Sorry for the mis-post.
BTW, after a good night's sleep I found what the problem was:
Instead of::

<script type="text/javascript" src="/com/extJS/ext-2.0.2/adapter/ext/ext-base.js"></script>

I had::

<script type="text/javascript" src="/com/extJS/ext-2.0.2/adapter/jquery/ext-jquery-adapter.js"></script>

It's still a mystery to me why that would cause a problem,though. Let me know if you can't duplicate the error by changing the adapter reference, in case you want to follow up on this yourself. Also, I noticed that the error only occurred when the mouse moved slowly enough between the add button and the window panel's top-bar. It's source seemed to be the tiny between the button and the window's top-bar. Hope that helps.

Thanks for all your great work and plugins, and help on the forums.

LT

jsakalos
28 Mar 2008, 11:17 AM
It's only IE7, IE6 works fine.

No, IE6 also exhibits this behavior. It is after add a file and then Remove All.

stever
28 Mar 2008, 11:44 AM
How DOES one usually hunt for ExtJS bugs in IE? I tried the DebugBar, but it can't do half the things Firebug can, it's essentially useles...

I'd love to hear some sort of "best practices" for this.

There is the IE Developer Toolbar for CSS type stuff (not Firebug by any stretch of the imagination), and there is Visual Studio 2008 Web Developer Express for JS debugging (which is far better than Firebug). Both are free, and available from M$.

spectrus
28 Mar 2008, 12:06 PM
there is Visual Studio 2008 Web Developer Express for JS debugging (which is far better than Firebug).

Far better? Wow, will have to try that one, then.

Thanks!

stever
28 Mar 2008, 12:11 PM
Far better? Wow, will have to try that one, then.


You get access to local variables for every scope in a call stack. And it hardly slows IE down. Of course, IE is never all that fast, but at least it doesn't slow it down (much).

spectrus
28 Mar 2008, 12:16 PM
Everyone else is doing it, so why not? ;)

Russian Translation for FileTree
[CODE]
/**
* FileTree Translation : Russian ru_RU.UTF-16
*
* @author Ing. Jozef Sak

jsakalos
28 Mar 2008, 12:42 PM
Thank you for translation, it's on demo page you can take a look.

endlichstudent
29 Mar 2008, 6:20 AM
find a bug
cenario
rename file xy.jpg to a
move folder a to same dir where file a is

im trying to make my own filetree.php... but its sooo much work :( does anyone have this file to shoorten debuging for me?

madrabaz
29 Mar 2008, 6:38 AM
find a bug
cenario
rename file xy.jpg to a
move folder a to same dir where file a is

im trying to make my own filetree.php... but its sooo much work :( does anyone have this file to shoorten debuging for me?
I tried this but I did not see any bug!
What's the problem?

madrabaz
29 Mar 2008, 6:57 AM
Hi saki,
Is there a reason to call move operation as a rename.


Root
|- x.txt
|- y.txt
|- dir
|- x.txt

I know renaming file root/x.txt to root/dir/x.txt means move root/x.txt to directory root/dir and if directory root/dir contains file which is named as x.txt, move operation deletes existing root/dir/x.txt before moves root/x.txt.

But consider this; renaming root/dir/x.txt to root/dir/y.txt is not a valid operation but it deletes root/dir/y.txt and then renames root/dir/x.txt.

endlichstudent
29 Mar 2008, 6:58 AM
sry for my bad english in forward :D

but it is a bug...

k i try to explain
1. create a new folder named aaa
2. create a new folder named bbb
3. move folder bbb to aaa
aaa
|__bbb
4. move a file named bbb to folder aaa
->bug
Cannot rename file root/aaa/3.png to root/aaa/bbb

is it clear now ^^?

jsakalos
29 Mar 2008, 7:34 AM
There is a cleanup process running periodically on the demo server. This process deletes uploaded files. It was maybe run while you were playing with it. Try again.

jsakalos
29 Mar 2008, 7:38 AM
But consider this; renaming root/dir/x.txt to root/dir/y.txt is not a valid operation


Hmm, what's invalid on that operation? (Please, keep in mind that I don't use Window$, I'm pure Linux guy.)

For me: rename === move

endlichstudent
29 Mar 2008, 8:13 AM
sry but it dows not work :(

try yourself
http://filetree.extjs.eu/
in folder aaa is a file named 65FD5712.jpg
try to rename that file to aaa

same error in windows :/ not just linux :p

PLEASE provide me with progress.php and filetree.php :(

endlichstudent
29 Mar 2008, 11:24 AM
k SRY is not a bug

in linux/windows u cant create a file/dir with the same name if it is in the same directory oO
i think this is funny ^^ and buggy by os because of file isn't folder

endlichstudent
29 Mar 2008, 12:04 PM
k found something related to this

create folder root/bbb
create folder /root/aaa/bbb
move folder /root/aaa/bbb

it askes you for overwrite
you say yes
it overwrites correctly but it does not reload /root/aaa so you can do this again but than with a failure that /root/aaa/bbb does not exist

because it is /root/bbb

jsakalos
29 Mar 2008, 12:09 PM
I'll take a look at that no-refresh problem.

endlichstudent
30 Mar 2008, 5:18 PM
@saki
1.
is it possible to mark files enabled in a folder that is disabled?
are you going to make an option in the menu for disabling folder/pics... how do you make this like reading rights of each file/folder by serverside.

2.
is it possible to add an overwrite function while trying to upload of an existing file. i handle that as an error, so that the original file would not be overwritten by default but better would be to have the option of overwritting so i think ^^

regards kriss ^^

jsakalos
30 Mar 2008, 6:19 PM
@saki
1.
is it possible to mark files enabled in a folder that is disabled?
are you going to make an option in the menu for disabling folder/pics... how do you make this like reading rights of each file/folder by serverside.

It is server OS dependent: e.g. setfacl -m u:wwwrun:rw [filename] for Linux with file acl installed.



2.
is it possible to add an overwrite function while trying to upload of an existing file. i handle that as an error, so that the original file would not be overwritten by default but better would be to have the option of overwritting so i think ^^

regards kriss ^^You can return: {"success":false, "error":"File with the same name already exits."} or you just overwrite it - it's server configuration business.

endlichstudent
31 Mar 2008, 4:48 AM
It is server OS dependent: e.g. setfacl -m u:wwwrun:rw [filename] for Linux with file acl installed.
i thought about to make this user depended, for rights like allow group/user view/move something like a rightsmanagemnt, so that a user can have his own folder in the root but not shown for others depending on the rights of each file/folder like a windows share :D. i think this is quite LOT of work ^^ i will try this ^^



You can return: {"success":false, "error":"File with the same name already exits."} or you just overwrite it - it's server configuration business.
i set {"success":false, "errors":"error":"File with the same name already exits."}
but im think about to make a funtion by clicking on the failure icon if the files already exist, so that you do not have to upload again, because some files might be big files... by clicking on that icon it should ask you for renaming ^^ i dont know if this possible but i will give this i try :D

jsakalos
31 Mar 2008, 7:52 AM
Ok, let us know when you have something finished.

endlichstudent
31 Mar 2008, 9:36 AM
but i think i will need a LOT of help :D ... maybe in a week^^

endlichstudent
31 Mar 2008, 3:58 PM
guess what saki :) i told you i will test that filebrowser :)

1.
translating issue in german
Wollen Sie wirklich : l

jsakalos
31 Mar 2008, 4:17 PM
Go ahead and correct the German translation. You'll find sources a couple of posts back. I don't speak German anyway...

nileshgund
1 Apr 2008, 5:17 AM
Hi all,

this is my first beta release of FileTreePanel for Ext 2.x (http://filetree.extjs.eu). Despite it looks very similar if not identical to Ext 1.x implementation, it is different, more structured and offers more (or different) configuration options which deserves an explanation.

The whole toy consists of 5 relatively independent classes that can be used also outside of FileTreePanel component. Starting from bottom up, they are:


Ext.ux.FileUploader:
This class is responsible for file uploads and has no UI. It has to have configured a store with some mandatory and some optional fields that contains mainly references to file input elements that hold file names to upload. It feature two modes of upload:

Single upload mode takes all inputs from store, creates one form, appends inputs to it and uploads files in one single request.
Multiple upload mode creates one form for one input and uploads each file in its own request. Other features:
extends Ext.util.Observable
start/stop all or individual uploads
set path to upload to
full set of events, both for individual files and whole upload
upload progress support (not working for more than one file with PHP uploadprogress backend)
client/server communication specification is same as for my Ext 1.x version

Ext.ux.UploadPanel:
Provides user interface to the above uploader with a couple of buttons, DataView to display the upload queue and status of files and mainly the store used by both DataView and FileUploader. UploadPanel was designed to fit to a menu therefore it is small and narrow by design. Other features:
extends Ext.Panel
add files to queue, queue display
remove files from queue one-by-one or all at once
UI to stop whole upload or individual files
icons for many file types
icons for status of files

Ext.ux.BrowseButton by loeppky: (http://extjs.com/forum/showthread.php?t=29032)
This class was not written by me, I just used it because it is good and working and because loeppky promised support and debugging if necessary.



Ext.ux.FileTreeMenu:
It is (context) menu for FileTreePanel that contains UploadPanel for file uploads and other items for basic file operations such as:
various open modes
create folder
rename file/folder
delete file/folder
upload file
reload/expand/collapse of tree nodes

Ext.ux.FileTreePanel:
This server file tree UI that integrates all things together. Features:
extends Ext.tree.TreePanel
file type icons for many file types
inline editing of file/folder names
drag & drop operations
context sensitive context menu
optional top toolbar in addition to context menu (especially good for Opera users)

Overall status:
The code, though beta, is in very good condition, it is fully documented and commented and jslinted. Of course, I haven't had enough time to test everything so some bugs can pop up. I'm counting with your interest, support and bug reporting to help me to find and fix them. As majority of you perhaps already know, I'm not neither interested nor skilled enough to find IE bugs and workarounds for them, however, if you find IE specific bugs and workarounds for them, I will include them in the main code if they will be enclosed in Ext.isIE conditional blocks.

Features planned for 1.0 release are all implemented except the progress information I'm not quite sure about. The problem is mainly on server side so if some of you know how to implement better progress information for Apache/PHP@Linux I'll be only glad to hear from you.

The whole FileTreePanel package is now downloadable in 3 compressed formats: bz2, tar.gz and zip. Server side scripts, as for 1.x version, are not included in packages. You can write your own per specification I've published or you can contact me via PM or skype.

Enjoy!



-------------- original post bellow -------------
Hi all.

I've reached one step in porting my FileTree to Ext 2.0, minor but important one, and that is Ext.ux.form.FileField form field.

This will become part of UploadForm (or something similar) and UploadForm will become part of FileTree.

Take a look at it here (http://filetree.extjs.eu) and let me know what do you think.

Thanks,

is filetree.zip contains all files ? its not working with ext2.0.2 .. and even locale file for en_US missing

jsakalos
1 Apr 2008, 5:19 AM
en_US doesn't need any locale file as the original texts are written in en_US. What exactly doesn't work?

cmendez21
1 Apr 2008, 9:23 PM
HI saki

Heres's the Spanish (Mexico and LatinoAmerica) translation hoping you include this also in the zip package.

:D


[HTML]
/**
* FileTree Translation : Spanish es_ES
*
* @author Ing. Jozef Sak

mlim1972
1 Apr 2008, 10:03 PM
Saki,
I played a little more with the UX and here are some issues and wishlist I'd like to share:
1. I don't get the cmd:get in the server side when getting listing... I just get the base params together with the 'path' variable.
2. Can you add events for the cmd:get ? like before/get/failure, etc...
3. Can the FileTreePanel relay the UploadPanel events?
4. It will be nice to have some (public) methods to add more items to the Menu list. So, that we can pass the icon, action, server command, etc... Just a thought to be able to add more items to the context menu.

This UX is great! thx again for this nice UX.

jsakalos
2 Apr 2008, 3:18 AM
HI saki

Heres's the Spanish (Mexico and LatinoAmerica) translation hoping you include this also in the zip package.

:D



Thank you very much for Spanish translation. It's on demo page (http://filetree.extjs.eu), you can see it in action.

jsakalos
2 Apr 2008, 3:19 AM
Saki,
I played a little more with the UX and here are some issues and wishlist I'd like to share:
1. I don't get the cmd:get in the server side when getting listing... I just get the base params together with the 'path' variable.
2. Can you add events for the cmd:get ? like before/get/failure, etc...
3. Can the FileTreePanel relay the UploadPanel events?
4. It will be nice to have some (public) methods to add more items to the Menu list. So, that we can pass the icon, action, server command, etc... Just a thought to be able to add more items to the context menu.

This UX is great! thx again for this nice UX.
I'll take a look soon and I'll let you know.

scroll
2 Apr 2008, 6:01 AM
hi,

Can you post a filetree.php sample, just to have a guide ?
...and how and where do i define the tree root?

regards,

jsakalos
2 Apr 2008, 8:24 AM
I provide complete PHP backend, same as demo page is served by, on an individual basis for a donation and w/o any support, questions or warranty.

These links should help you to write your own PHP backend if that is not an option for you:

http://www.php.net/manual/en/features.file-upload.php
http://filetree.extjs.eu

spectrus
2 Apr 2008, 11:44 AM
Hello,

Trying to use the UploadPanel for a slightly different purpose: parsing Excel files, i.e. user adds a file to the list and when 'upload' is clicked file is processed on the server. What I can't figure out is how to catch the AJAX response, since I want to show the user a grid with all the data from the spreadsheet(s). I think it's just a matter of attaching a listener (and I see the 'allfinished' event in the FileUploader), but attach it to what? All I ever do in my code is declare the upload panel, without ever touching the FileUploader:


{
xtype:'uploadpanel'
,buttonsAt:'tbar'
,id:'card-0'
,url:'php/filetree.php'
,path:'root'
,maxFileSize:1048576
,maxLength:28
,singleUpload:true
}

Any tips?

Thanks in advance!

spectrus
2 Apr 2008, 12:40 PM
Well, it seems that attaching a 'allfinished' listener directly to the uploadpanel seems to work, and inside it I have acces to the FileUploader object.

Still not sure what I could do with it to get to the response from the server side, though...

jsakalos
2 Apr 2008, 1:10 PM
You will need to extend/override FileUploader processSuccess/Failure methods where the raw response is available.

cmendez21
2 Apr 2008, 6:54 PM
Hi SAKI :)

after 28 straight hours and i've gotten the upload to work but almost everything works fine except the download function. :s

I have created a script which downloads the file if its called externally and works
but when i use it in the tree panel i got this error ** in Firefox (firebug) , also i tried in you demo page and i get the same error is it a bug ??

the response i use after the the download code it's or maybe i dont know how to handle the response (as a matter of fact it hasn't to be a response code cause the invisible form which passes the parameters submits and then get erased )

So meanwhile i suspend ( // ) the download button from the JS file

The error occurs when i press the ok button from the dialog that appears to save the download

** Error
[Exception... "Component returned failure code: 0x80004002 (NS_NOINTERFACE) [nsIInterfaceRequestor.getInterface]" nsresult: "0x80004002 (NS_NOINTERFACE)" location: "JS frame :: file:///C:/Program%20Files/Mozilla%20Firefox/components/nsHelperAppDlg.js :: anonymous :: line 147" data: no]
file:///C:/Program%20Files/Mozilla%20Firefox/components/nsHelperAppDlg.js
Line 147



Also a sugestion:
1.- it be nice if we could tell which types of file can upload (i mean i can in the php file but to restrict access from the tree panel )
2.- To handle more paths cause i've testing in a estructure like this

FOLDER APP
|------>Ext
|------>Libs
|------>Libs----->filetree
|-----imgsfolder
|------>imgs
index.htm

so if i go backwards filetree with folder imgs the parameters it passes are erased int he path ../../imgs/
but if i use imgsfolder it works fine

3.- the progress php does it have any real function right for the moment?

jsakalos
2 Apr 2008, 7:25 PM
1) you do not need anything special for download - it is one of the open modes. The only point is that server need to return correct headers and data.

2.1) I'll take a look if it is possible with standard html input, or it can be limited by UploadPanel code.
2.2) I'm not quite sure what you mean. rootVisible:false? Try, I haven't.

3) Yes, but due to the limitation of pecl uploadprogress extension it works (on demo page) only if you upload single file. It would also work if you had singleUpload:true where you upload files all in one form.

mlim1972
2 Apr 2008, 7:52 PM
I'll take a look soon and I'll let you know.

Looking closely at the 'cmd:get' not coming to the server, I added a line to make it go to the server:


// create loader
if(!this.loader) {
this.loader = new Ext.tree.TreeLoader({
url:this.url
,baseParams:{cmd:'get'}
,listeners:{
beforeload:{scope:this, fn:function(loader, node) {
loader.baseParams.path = this.getPath(node);
loader.baseParams.cmd = 'get';
}}
}
});
}

jsakalos
3 Apr 2008, 2:57 AM
That shouldn't be necessary. I've tested demo page and haven't found any problems. Any precise steps to reproduce?

cmendez21
3 Apr 2008, 5:27 AM
Hi Saki, Check this out

http://extjs.com/forum/showthread.php?t=31329

I made a custom mod for the file tree panel so i can link a hiddenfield and div tag to the file tree panel (jpg, gif, png and bmp ) files only

jsakalos
3 Apr 2008, 6:24 AM
Perfect! I like it very much. =D>=D>=D>

Have you tried to hide root? And, I still don't know how to limit extensions...

cmendez21
3 Apr 2008, 8:24 AM
No still haven't test hiding the root :">

And the limit of extensions are controlled in the PHP file however i haven't investigated how

But as i'm incorporating this to my application in the Help files i tell the users (limited extensions jpg, etc..) so they cant complain :))

jsakalos
3 Apr 2008, 12:09 PM
I'm mainly interested in that hidden root...

dotchris
4 Apr 2008, 1:21 PM
Is there anyway to have it auto refresh the tree when a file is uploaded through the panel?

jsakalos
4 Apr 2008, 2:37 PM
Tree is auto refreshed. On the demo page, the panel is separate and not linked to tree but if you upload via tree's context menu the branch you uploaded into is refreshed.

dotchris
4 Apr 2008, 8:03 PM
Is there anyway way to link them? I currently have it setup similar to your demo only as a panel and not floating. I know there is a refresh command in the code of your tree any idea how to access that outside of the code itself?

jsakalos
5 Apr 2008, 3:16 AM
Listen to allfinished event of UploadPanel and refresh the tree from the handler.

cmendez21
5 Apr 2008, 10:22 AM
Hi SAKI, i've tested rootVisible : false and works fine :D

But look the image how it looks the file panel inside an accordion, i set layout of item to FIT but it makes some padding inside the body

:-? do i have to change some CSS ?

dotchris
5 Apr 2008, 10:59 AM
May I make a suggestion with your icons in the trees.

I would recommend CSS sprites. CSS Sprites would allow the user to load 1 image file or multi depending on type of file like docs, images, etc that have all the images and you call them by background position. Yahoo uses this technique on their homepage and in some places extjs uses it.

There is a very good tool for this at:

http://www.csssprites.com/

Also, a nice write up at:

http://www.alistapart.com/articles/sprites

I have used it in many projects that rely heavy on icons.

jsakalos
5 Apr 2008, 12:35 PM
May I make a suggestion with your icons in the trees.

I would recommend CSS sprites. CSS Sprites would allow the user to load 1 image file or multi depending on type of file like docs, images, etc that have all the images and you call them by background position. Yahoo uses this technique on their homepage and in some places extjs uses it.

There is a very good tool for this at:

http://www.csssprites.com/

Also, a nice write up at:

http://www.alistapart.com/articles/sprites

I have used it in many projects that rely heavy on icons.
Do you mean file type icons? I so, make please sprites and css rules and contribute it to the community. It will be very welcome.

jsakalos
5 Apr 2008, 12:36 PM
Hi SAKI, i've tested rootVisible : false and works fine :D

But look the image how it looks the file panel inside an accordion, i set layout of item to FIT but it makes some padding inside the body

:-? do i have to change some CSS ?
I'm doing nothing with panel margins, do I? Looks like either parent body padding or panel margin. But from were...? Try to find out with Firebug please.

And, I'm very glad that rootVisible:false works. :)

issomesmo
5 Apr 2008, 5:26 PM
i've done that. what should do i do to refresh the filetreepanel?
//uppanel -> uploadpanel
var u = Ext.getCmp('uppanel');
u.on('allfinished', function(event, target) {
//webUploadFiles -> FileTreePanel
var FileTreePanel = Ext.getCmp('webUploadFiles').getContextMenu();
});

issomesmo
5 Apr 2008, 5:51 PM
the error response..is not working....even the example in your page...
i tried with {"success":false,"error":"asdasd"} and {"success":false,"errors":["extFileGeneratedName":"error message"]}

dotchris
5 Apr 2008, 7:38 PM
Do you mean file type icons? I so, make please sprites and css rules and contribute it to the community. It will be very welcome.
I will work a bit on this in my free time. I would be glad to share. Any chance I can get a example on the listening method you mentioned earlier. I am fairly new to JS and EXTJS but am learning as fast as possible. Example would help greatly.

jsakalos
5 Apr 2008, 7:40 PM
i've done that. what should do i do to refresh the filetreepanel?
//uppanel -> uploadpanel
var u = Ext.getCmp('uppanel');
u.on('allfinished', function(event, target) {
//webUploadFiles -> FileTreePanel
var FileTreePanel = Ext.getCmp('webUploadFiles').getContextMenu();
});
You need to find the node you want to reload and then node.reload().

jsakalos
5 Apr 2008, 7:47 PM
the error response..is not working....even the example in your page...
i tried with {"success":false,"error":"asdasd"} and {"success":false,"errors":["extFileGeneratedName":"error message"]}
What does it mean "is not working"? I have just tried it on demo page and it worked as expected. See attached image.

jsakalos
5 Apr 2008, 7:50 PM
I will work a bit on this in my free time. I would be glad to share. Any chance I can get a example on the listening method you mentioned earlier. I am fairly new to JS and EXTJS but am learning as fast as possible. Example would help greatly.
What listener do you mean? I'm losing track among all these posts...

dotchris
5 Apr 2008, 8:24 PM
Listen to allfinished event of UploadPanel and refresh the tree from the handler.

This one. I need to have my tree updated when a upload is completed. They are setup like the filetree in a sidebar and the uploadpanel in the main content area.

jsakalos
6 Apr 2008, 1:56 AM
Once again, tree node you upload to refreshes automatically if you use embedded context menu. If you use separate upload panel then something like this:


uppanel.on('allfinished', function() {
// find node you've uploaded to
node.reload();
});

issomesmo
6 Apr 2008, 4:19 AM
What does it mean "is not working"? I have just tried it on demo page and it worked as expected. See attached image.
i know it looks right..but if i use error... it says unknown error and do not catch the error message.... and if i use errors...it does not decode the json message...yesterday at your site it wasnt catching the error message and showing unknown error....what should be the the json format for a single file/multiple files when it throws an error?

issomesmo
6 Apr 2008, 4:50 AM
i got it to work well...took a look at the json response today and i could figure out...
{"success":false,"errors":{"extName":"ErroMsg"}}
thank you.

dotchris
6 Apr 2008, 10:48 AM
Once again, tree node you upload to refreshes automatically if you use embedded context menu. If you use separate upload panel then something like this:


uppanel.on('allfinished', function() {
// find node you've uploaded to
node.reload();
});



I guess my issue is figuring out the node. I have everything in the root of the tree and its loaded via json outputted by my php backend. I need the tree updated when the uploads are finished. Sorry for being a pain.

my tree code:

var treepanel = new Ext.ux.FileTreePanel({width:232,height:270,id:'ftp',
title:'Your Uploaded Documents',renderTo:'extTree' ,rootPath:'root',autoScroll:true,rootVisible:true,enableProgress:false,
enableDD:false,enableDelete:false,enableNewDir:false,enableOpen:false,
enableRename:false,enableUpload:false,readOnly:true});my panel code:

var extupload = new Ext.Panel({width: 479,items: [{xtype:'uploadpanel',buttonsAt:'tbar',id:'uppanel',
url:'upload.php?act=receive&nocache=nc47f91acc859f4',
path:'root',enableProgress:false,emptyText: 'No Files in Upload Queue',maxFileSize:10485760}],bodyStyle: 'padding:5px',
title: 'Document Upload (10 MB File Size Limit)'});my allfinished code:


extupload.on('allfinished', function() {
var cmp = Ext.getCmp('treepanel');
var node = cmp.getRootNode();
node.reload();
});

issomesmo
6 Apr 2008, 1:37 PM
you can try this:


extupload.on('allfinished', function(event, target) {
var sm = Ext.getCmp('treepanel').getSelectionModel();

if(sm.getSelectedNode() == null){
var x = sm.tree.root;
x.reload();
}else{
var x = sm.getSelectedNode();
try{
//if a directory is selected
x.reload();
}
catch(e){
//if a file is selected
x.parentNode.reload();
}
}

});

dotchris
6 Apr 2008, 8:39 PM
issomesmo

Thank you. You led me into the right direction ended up using.


var upp = Ext.getCmp('uppanel');
upp.on('allfinished', function() {
var sm = Ext.getCmp('ftp').getSelectionModel();
var x = sm.tree.root;
x.reload();
});

I gave my upload panel a id of uppanel then got it as component in order to work with it. The tree now updates after a upload is completed which is what i needed. I love the ExtJS Community. I plan to contribute once I learn a bit more.

mankz
7 Apr 2008, 4:19 AM
No, IE6 also exhibits this behavior. It is after add a file and then Remove All.

Has this issue been resolved for IE6/IE7? It seems the lines causing this behaviour are (in onRemoveFile callback of UploadPanel):

var wrap = inp.up('em');

if(wrap) {
wrap.remove();
}

As far as I can see, this wrap element will belong to the browsebutton in the toolbar, not the removed input element. When I uncomment these lines all work ok in IE. Will there be a resource leak when these lines are not executed?

jsakalos
7 Apr 2008, 5:36 AM
Yeah, original idea was to prevent mem leaks. You can safely remove lines for now but final solution is to be provided by loeppky, the author of the BrowseButton.

blow
10 Apr 2008, 11:15 AM
Hi There,

I like all your extensions. :) Keep on the good work.

I just started with ext, and to be honest.. i'm having a hard time, grounding it :)
I've seen several people made translations for you. So to get my face in a good light:) I've added a dutch translation for you. Hope i can ask you some questions from time to time.

Thanks in advance.

[PHP]
/**
* FileTree Translation : English en_US
*
* @author Ing. Jozef Sak

jsakalos
10 Apr 2008, 1:39 PM
Thank you very much. Files are uploaded so you can see your translation in action.

Good luck mastering Ext!

hileon
13 Apr 2008, 7:24 PM
great work, I think it is useful everywhere.

mankz
13 Apr 2008, 10:42 PM
@jsakalos

what's the purpose of this line in FileUploader.js (in uploadFile callback)

// todo:delete after devel
this.getIframe.defer(100, this, [record]);

Just curious... :)

jsakalos
14 Apr 2008, 2:19 AM
I don't know either... ;) Most likely I was testing the functionality of getIframe function there....

mankz
14 Apr 2008, 4:24 AM
I have a problem (IE6/7 specific of course). The browser loading indicator never stops loading after all files have been uploaded. Might be confusing for the end user... I have no idea why this happens nor how to force the indicator to stop/reset. See attached image, anyone seen this in IE?

jsakalos
14 Apr 2008, 5:27 AM
No idea... As you may already know, I do not use M$ "products", know little about 'em and have little debug tools for 'em.

Anyway, I have some other domains links on my demo page (digg.com, adsense, ...) could it be trying to access them?

mankz
14 Apr 2008, 5:32 AM
Unlucky for me, my client only uses IE :(...

This error can be reproduced locally on my server as well, checked it in Fiddler and all server responses seems ok. It seems IE thinks there is an ongoing request which never times out.

jsakalos
14 Apr 2008, 5:35 AM
I'm clueless then... I force my clients to use Firefox as I specify it as "System Requirement" to run my applications. They can use IE for whatever else, though.

cblin
15 Apr 2008, 5:18 AM
[CODE]
/**
* FileTree Translation : french fr_FR
*
* @author Tennaxia
* @translator christophe blin
* @license FileTree Translation file is licensed under the terms of
* the Open Source LGPL 3.0 license. Commercial use is permitted to the extent
* that the code/component(s) do NOT become part of another Open Source or Commercially
* licensed development library or toolkit without explicit permission.
*
* License details: http://www.gnu.org/licenses/lgpl.html
*/
if(Ext.ux.FileUploader){
Ext.apply(Ext.ux.FileUploader.prototype, {
jsonErrorText:'Impossible de lire la r

jsakalos
15 Apr 2008, 5:44 AM
Thank you very much - uploaded, you can check it on the demo page: http://filetree.extjs.eu

cblin
15 Apr 2008, 5:46 AM
there was a mistake that I jsut corrected in the previous post for overwriteText

jsakalos
15 Apr 2008, 6:00 AM
Uploaded, check if it is OK now. (Refresh browser's cache)

cblin
15 Apr 2008, 6:05 AM
I do not know how to trigger this message on the screen but it should be ok.

You are really fast !

The only problem is that the size of the window is initially too small for french translations (the X icon is cut at the half)

I use width:200 instead of width:180 but this is just a detail

Thanks for this super great extension !

cblin
15 Apr 2008, 10:31 AM
Hi,

is it possible to improve the allfinished event so that :
1/ we know why the method was called (i.e like the operation param of Store.update)
2/ we have access to the JSON response (or whatever server information given)

my use case is to update the store of a select in the page when a singleUpload is successful :
* when the upload is successfull, the returned response has an array UPLOAD_IDENTIFIER => id
* from this UPLOAD_IDENTIFIER, I can get back the record of the store, and so the filename
* I then upload a Select.store to add a record with value=id and display=filename
* I clear the store of the fileuploader for next time

ATM, I have the following code but I am unable to fill my todo :(:


listeners: {
'allfinished': function(this_) {
var records = this_.store.queryBy(function(r){return 'done' == r.get('state');});
records.each(function(r) {
//TODO: update the attachment_store so that the select now have r available
this_.store.remove(r);
});
}
}

cmendez21
15 Apr 2008, 11:19 AM
HI SAKI
Just reporting a bad behavior problem :D

If you set monitorresize:true to the container (panel, viewport etc) and one if this includes the treefile panel this one hides the branches of the tree (images to expand collapse) and all the items appear at the same level

Please anyone avoid this property IE6, IE7 and FF ;)

jsakalos
15 Apr 2008, 12:04 PM
Does this happen also to basic tree panel? 'Cause I'm doing nothing to rendering; just content (nodes) is important.

jsakalos
15 Apr 2008, 12:15 PM
Re 1: I don't quite get it... This event is fired when all uploads are finished and all records have updated state
Re 2: json response is also contained in store as it is either {success:true}, or {success:false, error:'msg'}. msg is already extracted an put to error field of the store.

Do you have some specific signature what you need in mind?

cblin
15 Apr 2008, 11:59 PM
Re 2: json response is also contained in store as it is either {success:true}, or {success:false, error:'msg'}. msg is already extracted an put to error field of the store.

Do you have some specific signature what you need in mind?

I'd like to be able to return something like {success:true, "infos":{"ext-gen524":{id:"uuid"}, "ext-gen525":{id:"uuid2}}} and then the infos will be stored in each record (in an new infos field for example)

then I can do panel.store.queryBy(function(r){return 'done' == r.get('state');}).each(function(r) {
var id = r.get('infos').id;
var name = r.get('shortName');
myselect.store.add({'value':id, 'text':name})
})

the problem is that only the error mode is able to add a server info to the record and I'd like to do the same in success mode

cblin
16 Apr 2008, 12:58 AM
note about the previous post : of course the infos need to be processed in failure too as some files may have succeed

siebertm
16 Apr 2008, 1:08 AM
i have a problem with the uploadpanel in safari 3.0 and 3.1.
add file(s) and then remove them via the remova all button (or programmatically via removeAll()) and you'll see the add button is gone.

this kinda sucks :)

jsakalos
16 Apr 2008, 2:42 AM
I'd like to be able to return something like {success:true, "infos":{"ext-gen524":{id:"uuid"}, "ext-gen525":{id:"uuid2}}} and then the infos will be stored in each record (in an new infos field for example)

then I can do panel.store.queryBy(function(r){return 'done' == r.get('state');}).each(function(r) {
var id = r.get('infos').id;
var name = r.get('shortName');
myselect.store.add({'value':id, 'text':name})
})

the problem is that only the error mode is able to add a server info to the record and I'd like to do the same in success mode
Hmm, uploaded files are uniquely defined by their store records, anyway, I'll think about adding and extraInfo field....

jsakalos
16 Apr 2008, 2:43 AM
i have a problem with the uploadpanel in safari 3.0 and 3.1.
add file(s) and then remove them via the remova all button (or programmatically via removeAll()) and you'll see the add button is gone.

this kinda sucks :)
I'd say it can be BrowseButton problem. Can you notify the author of it?

cblin
16 Apr 2008, 10:49 AM
UploadPanel.js
,{name:'error', type:'text', system:true}
,{name:'progressId', type:'int', system:true}
,{name:'error', type:'text', system:true}
+ ,{name:'extraInfo', type:'text', system:true}
,{name:'progressId', type:'int', system:true}

FileUploader.js
,processSuccess:function(options, response, o) {
var record = false;

// all files uploadded ok
if(this.singleUpload) {
this.store.each(function(r) {
+ var i = o.extraInfos && o.extraInfos[r.id] ? o.extraInfos[r.id] : "";
r.set('state', 'done');
r.set('error', '');
+ r.set('extraInfo', i);
r.commit();
});
}
else {
record = options.record;
+ var i = o.extraInfos && o.extraInfos[record.id] ? o.extraInfos[record.id] : "";
record.set('state', 'done');
record.set('error', '');
+ record.set('extraInfo', i);
record.commit();
}

this.deleteForm(options.form, record);

} // eo processSuccess

,processFailure:function(options, response, error) {
var record = options.record;
var records;

// singleUpload - all files uploaded in one form
if(this.singleUpload) {
// some files may have been successful
records = this.store.queryBy(function(r){return 'done' !== r.get('state');});
records.each(function(record) {
+ var i = error.extraInfos && error.extraInfos[record.id] ? error.extraInfos[record.id] : "";
var e = error.errors ? error.errors[record.id] : this.unknownErrorText;
if(e) {
record.set('state', 'failed');
record.set('error', e);
+ record.set('extraInfo', i);
Ext.getBody().appendChild(record.get('input'));
}
else {
record.set('state', 'done');
record.set('error', '');
+ record.set('extraInfo', i);
}
record.commit();
}, this);

this.deleteForm(options.form);
}
// 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);
+ record.set('extraInfo', error.extraInfos && error.extraInfos[record.id] ? error.extraInfos[record.id] : "");
}
else if(error) {
record.set('error', error);
+ record.set('extraInfo', "");
}
else if(response && response.responseText) {
record.set('error', response.responseText);
+ record.set('extraInfo', "");
}
else {
record.set('error', this.unknownErrorText);
+ record.set('extraInfo', "");
}
record.set('state', 'failed');
record.commit();
}
} // eof processFailure

jsakalos
16 Apr 2008, 1:06 PM
Looks good, I'd only wouldn't put extraInfo inside of error object, it may be misleading...

cblin
17 Apr 2008, 6:17 AM
having the extraInfo in the error allows me to do post processing on errors.

For example, let us say that I want to display the error in another part of my application but with more details than in the UploadPanel, I can use extraInfo (without touching the error msg that is working well in UpoadPanel)

mschaefer
17 Apr 2008, 9:13 AM
This is a great extension. I use the FileUploadPanel with a Java backend (Apache commons fileupload). Works like a charm, especially with streaming on server side.

Now I'd like to see the progress in the upload panel. Is this fully implemented? Can anybody help on the form of the JSON needed as a reply to the progress request? My skills with JS are limited, so I'm having trouble working it out from the code.

jsakalos
17 Apr 2008, 9:21 AM
Progress is implemented client side but it is pain in the ass server side, at least PHP. If you return progress info then it is displayed in panel. On demo page, if you upload only one file, it works.

mschaefer
17 Apr 2008, 10:32 AM
HI saki, thanks for the quick reply. Yep, got the JSON response from progress.php on your demo site with Firebug. But,... I don't see any visual feedback in the panel or the tree... Am I missing something?

jsakalos
17 Apr 2008, 11:00 AM
There should be very little colored progress bar and tooltip shows %done. I hadn't go further into this (to making it nices) as PHP cannot send progress for simultaneously uploaded files.

mschaefer
17 Apr 2008, 11:44 AM
Thanks Saki, saw it now (the light grey got a bit lost on my screen). I'll try and put together the Java backend (should also be possible for multiple files). I'll post on success (or for some more questions if I may).

jsakalos
17 Apr 2008, 1:45 PM
Sure, I'm curious.

harirama
17 Apr 2008, 2:01 PM
Saki,

First of all thanks very much for this excellent set of components.

I am designing a FileGrid component as a complement. The FileGrid would display a listing of files and attributes beside a FileTree which would only contain directories. My intent is to simulate a file explorer in Windows.

Creating the layout and FileGrid connection to the FileTree and Server is easy enough, however integrating the FileTreeMenu is more difficult.

I have reviewed the source code, and the FileTreeMenu UI seems like it can be reused, but the client-server interaction is embedded in the FileTree component.

Ideally the FileTreeMenu would be abstracted from the FileTree and then we could implement a unified toolbar and context menus. I haven't used Actions in ExtJS, but this seems like a great candidate.

Saki, any suggestions as to how to proceed?

jsakalos
17 Apr 2008, 4:47 PM
Nothing at the moment - I won't have time before the end of weekend to take a deeper look at it. Anyway, your idea sound very good - I'll look at that direction.

danvega
17 Apr 2008, 5:51 PM
I am having a problem getting the filetype icons to show. Here is my directory structure >

FiletreeExample
-css
*filetype.css
*filetree.css
*icons.css
-ext
-img
-js
index.cfm

Here is the code, it seems all of the icons in ext directory show up but not the filetype icons, do i need to set something? The css files point to ../img/



<html>
<head>
<title>Filetree Example</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="css/icons.css">
<link rel="stylesheet" type="text/css" href="css/filetree.css">
<link href="css/filetype.css" rel="stylesheet" type="text/css" >
<link rel="shortcut icon" href="img/extjs.ico">

<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="js/Ext.ux.form.BrowseButton.js"></script>
<script type="text/javascript" src="js/Ext.ux.FileUploader.js"></script>
<script type="text/javascript" src="js/Ext.ux.UploadPanel.js"></script>
<script type="text/javascript" src="js/Ext.ux.FileTreeMenu.js"></script>
<script type="text/javascript" src="js/Ext.ux.FileTreePanel.js"></script>

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = "ext/resources/images/default/s.gif";
Ext.onReady(function(){

Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
Ext.state.Manager.setProvider(new Ext.state.CookieProvider);


treepanel = new Ext.ux.FileTreePanel({
width:300,
height:400,
id:'ftp',
title:'Directory Browser',
renderTo:'treepanel',
rootPath:'ext',
rootText:"ExtJS",
topMenu:true,
autoScroll:true,
url:"filetree.cfm",
singleUpload:false,
enableProgress:false
});

treepanel.addListener("click",function(node,e){
console.log(node + e);
console.log(node.isLeaf());

});

});
</script>
</head>

<body>

<div id="treepanel">&nbsp;</div>

</body>
</html>

jsakalos
17 Apr 2008, 6:20 PM
You do not include filetype.css.

danvega
17 Apr 2008, 6:34 PM
I took that include out and it still showing up with the default icon.

mschaefer
18 Apr 2008, 12:21 AM
Hm, I'd like to display the progress of the upload of multiple files. But the progress requests I receive on the server side always contain the same UPLOAD_IDENTIFIER and APC_UPLOAD_PROGRESS. Now, maybe the identifier is not meant to be for the individual file, but for the overall upload process, but as I understand the JSON reply should be something like

{"time_start":"1208506564","time_last":"1208506584",
"speed_average":"28436","speed_last":"15357",
"bytes_uploaded":"568729","bytes_total":"602259",
"files_uploaded":"0","est_sec":"1","success":true}

So how would we distinguish the files?

jsakalos
18 Apr 2008, 2:17 AM
I took that include out and it still showing up with the default icon.
Check icon paths inside of filetype.css. Check also in Firebug if you can see icon images.

mschaefer
18 Apr 2008, 4:06 AM
Concerning upload progress: Only the progress of the last file added is ever queried.

I think the trouble might be, that during the iteration below, the params.APC_UPLOAD_PROGRESS is overwritten. Anyway, this is just a wild guess...

records.each(function r) {
o.params[this.progressIdName] = r.get('progressId');
o.params.APC_UPLOAD_PROGRESS = o.params[this.progressIdName];
o.record = r;
(function() {
Ext.Ajax.request(o);
}).defer(250);
}, this};

harirama
18 Apr 2008, 5:20 AM
Saki,

Thanks for thinking about this, I have some ideas regarding this and further review of the code makes me think that replicating the functionality wouldn't be too hard, but it wouldn't be a clean solution that I would feel would add to the component for the community.

If you can suggest a structure for this I will be happy to take a first stab at the code.

mschaefer
18 Apr 2008, 6:33 AM
Safari 3.1 on Mac OS 10.5.2
---------------------------
1. When uploading a few files altogether about 5 MB in size FileUploader sometimes fails with the jsonErrorText, which is no surprise, since the responseText contains

<pre style="word-wrap: break-word; white-space: pre-wrap;">{'success':true}</pre>

Be assured, the server only answered with the JSON part of the text and content type is set to "text/html;charset=UTF-8".

2. Under the same conditions, I sometimes get a socket timeout, when reading Safari's form post.

3. I'm using the YUI history manager, which is based on a hidden iframe and form field to keep it's state. It keeps a listener on this iframe. Now, under the conditions described above, sometimes this listener gets triggered.

None of these problems occur with FF.

Firefox 2.0.0.13 on Mac OS 10.5.2
---------------------------------

Everything seems fine but for one odd behaviour:
When I upload multiple files Firefox sort of holds back all progress ajax request, until all but the last file uploads are completed. This problem does not occur with Safari.

Anyone any ideas??

jsakalos
18 Apr 2008, 7:13 AM
1. Seems like server adds that tags. It mustn't
2. No idea, some safari/os setting?
3. I don't know, I don't use YUI history manager.

mschaefer
18 Apr 2008, 7:23 AM
Hi Saki, thanks for the reply.

1. The server doesn't add the tag, it's the browser, like it would do when it receives text/plain.
2. Ok, let's asume it's a Safari bug. Shouldn't be OS since FF works just fine on it.
3. But I assume you're listening on the iframes for the file upload forms. Any idea, if any other iframes could be affected?

Any idea on the FF issue mentioned above?

jsakalos
18 Apr 2008, 7:37 AM
I do not listen to iframe directly - it's done by underlying Ext. I haven't studied the source to that detail I could honestly answer yes or no.

mschaefer
18 Apr 2008, 8:26 AM
Ok, two things remain, which are most likely bugs in FileUploader:

- When the response to the upload returns to fast, FileUploader keeps requesting the progress
- Only the progress of the last file is ever requested (see my post from 12:06 today)

jsakalos
18 Apr 2008, 8:33 AM
I'll take a look early next week - I have not time before that.

mschaefer
18 Apr 2008, 8:36 AM
Thank you, Saki. Enjoy your weekend.

Workaround for the Safari problems described earlier: singleUpload:true

danvega
19 Apr 2008, 11:47 AM
Saki,
I took your advice and checked out the paths in the filetype.css file. I also noticed that the images are not showing up if I go to net>images in firebug. Any help with this puzzle would be great. Here is an example of one path.

.file-txt {
background-image: url(../img/icons/mime/txt.png) ! important;
}

I have a directory structure like so

css
filetype.css
ext
img
+icons
+mime
+silk
js
-FileTreeMenu.js
-FielTreePanel.js
-FileUploader.js

index.cfm

mschaefer
20 Apr 2008, 1:47 AM
Dan, maybe you misunderstood Saki when he said


You do not include filetype.css.

cause you answered


I took that include out and it still showing up with the default icon.

I think you have to include filetype.css. Saki might have overseen it in your code.

jsakalos
20 Apr 2008, 8:33 AM
Better wording: You have to include filetype.css and rules therein have to point to correct path.

jove4015
22 Apr 2008, 8:58 AM
You rock Saki, this looks great! Can't wait to switch over from my cheap hacked 1.1 version :-)

danvega
23 Apr 2008, 6:06 PM
Thanks for all your help guys. This is really weird, the icon for say a pdf or image does not show but if I rename the image the correct image appears, any ideas?

bomka
23 Apr 2008, 9:53 PM
Saki,
Kudos for such a great plug-in. I just had one question, is there anyway to pass in the URL (e.g. filetree.php) during instantiation of the FileTreePlugin. Currently I changed the URL within the FileTreePanel.js to make it work, but obviously besides being a hack, it won't allow me to create multiple such panels on the page.
thanks a lot.

jsakalos
24 Apr 2008, 12:19 AM
Sure, pass it as configuration option: new FileTreePanel({url:'yoururl.php', ...}). There are more urls that you may want to change and all are documented in the comments in the code.

jsakalos
24 Apr 2008, 12:20 AM
Thanks for all your help guys. This is really weird, the icon for say a pdf or image does not show but if I rename the image the correct image appears, any ideas?

Check css, path to images and path to Ext.BLANK_IMAGE_URL.

danvega
24 Apr 2008, 4:12 AM
This is the path in my index.cfm

Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';

All of my paths have stayed the same from your example

css
img
ext

I have not changed any of the css files.

bomka
24 Apr 2008, 8:52 AM
Sure, pass it as configuration option: new FileTreePanel({url:'yoururl.php', ...}). There are more urls that you may want to change and all are documented in the comments in the code.

Saki,
Here's what I have in filetree.js (reverted back all changes in FileTreePanel.js). However, it seems like none of these config values are overriding the default ones e.g. I still get "Tree Root" as root text when it displays. Also, it still tries to contact the default url (filetree.php)

I probably need to override more URLs for each command, but I am still trying to get the initial files.
Am I missing something trivial? thanks again for your help.

var treepanel = new Ext.ux.FileTreePanel({
height:400
,autoWidth:true
,id:'ftp'
,title:'FileTreePanel'
,renderTo:'treepanel'
,rootText: 'My Files'
,rootPath:'root'
,topMenu:true
,autoScroll:true
,url:'http://localhost:3000/photos/children'
,enableProgress:false
// ,baseParams:{additional:'haha'}
// ,singleUpload:true
});

EDIT: I also ran the Firebug debugger and when it goes in the initComponent method the initialConfig object is missing all these overrides (strangely though it has autoScroll, autoWidth, enableProgress, height, id, renderTo, rootPath, title, topMenu set to proper values, but no sign of any other override config variables).

cmendez21
24 Apr 2008, 9:38 AM
Bomka

the reason for override text settings its cause the strings are in locale files
change it there the text you want or before each new panel different text for
the file tree panel use the code in the locale files

And overriding configs for the tree component should be not problem at all, the tree file panel extends tree so its possible

bomka
24 Apr 2008, 10:09 AM
Bomka

the reason for override text settings its cause the strings are in locale files
change it there the text you want or before each new panel different text for
the file tree panel use the code in the locale files

And overriding configs for the tree component should be not problem at all, the tree file panel extends tree so its possible

thanks cmendez21. However, I am not using any locale file, since the default should be English. Also, I looked at the locale files and don't see anything specific to URL or rootText. Not sure if that's what you meant though.

bomka
24 Apr 2008, 10:47 AM
Bomka

the reason for override text settings its cause the strings are in locale files
change it there the text you want or before each new panel different text for
the file tree panel use the code in the locale files

And overriding configs for the tree component should be not problem at all, the tree file panel extends tree so its possible

Never mind. My bad. I wasn't actually using filetree.js and had all the code copied out to my application (Rails). Obviously, any change to filetree.js wasn't reflected. Sorry about that. The changes to config variables work now.
thanks.

jsakalos
24 Apr 2008, 5:22 PM
Are you running an old cached version of filetree.js? I've tested it right now and url does get passed from config to components.

jsakalos
24 Apr 2008, 5:23 PM
Sorry, I've posted before reading the previous post. Anyway, we both came to same conclusion.

mschaefer
25 Apr 2008, 10:49 PM
Saki, any news on this issues?



- When the response to the upload returns to fast, FileUploader keeps requesting the progress
- Only the progress of the last file is ever requested (see my post from 12:06 today)

cuteleaf
26 Apr 2008, 6:13 AM
great work!


in windows,
and how to set "rootPath"


like this ? rootPath:'E:/xxxx/xxx/'

but i can't open the leaf file by dblclick the node

cuteleaf
26 Apr 2008, 6:48 PM
in windows,if you set rootPath:'E:/xxxx/xxx/'
and you dblclick leaf node (e.g. 'a.gif')
then getPath will return 'E:/xxxx/xxx/a.gif'
the bowser will return err

jsakalos
27 Apr 2008, 4:53 AM
rootPath must be relative. It is the server job to find out absolute path. As a rule of thumb: never, never, never put any absolute paths to the client code.

jsakalos
27 Apr 2008, 4:54 AM
Saki, any news on this issues?
Sorry, not yet. ...had a bunch of stupid but urgent and important other things to do. Stay tuned...

cblin
28 Apr 2008, 7:30 AM
Hi,

this is a feedback by my users about a screen which uses the UploadPanel :



I thought that the green icon on the right of a queued file means that I can upload each file separately


IMHO, this is a very valid feedback (but minor I conceed) : the icon of ux-up-icon-queued should be page_white_delete.png (found in silk icons) instead of page_white_get.png because the red cross clearly means that clicking that icon will delete the file from the queue.

jsakalos
28 Apr 2008, 9:59 AM
Yeah, users are always source of "wisdom"... Thanks god, icon change is very easy - just css. I'll take a look at it...

esoteric
28 Apr 2008, 2:40 PM
Saki, it seems that the "concurrent" boolean option in FileUploader doesn't work. All files still get uploaded at the same time. Anyone else run into this problem? Thanks!

And thank you for your great extension.

jsakalos
28 Apr 2008, 4:10 PM
This option is not implemented. It was just an idea that it could work that way but it works this way if you set singleUpload:true. So there is no need for this option in fact. The only benefit would be that you could see individual files completion/failure.

esoteric
28 Apr 2008, 5:35 PM
I have tried setting singleUpload: true but all the files still upload at the same time when I click the upload button.

jsakalos
29 Apr 2008, 3:22 AM
Yes, they do but in single request, e.i. one after the other. Is that what you want?

esoteric
29 Apr 2008, 5:44 AM
oh I see, so all the files go in a single post to the server, but all the spinners fire off and then the progress request kicks in? I am following you now.

I was thinking it work like one file got uploaded as a request, once that finished, the next file uploaded in a single request, etc etc ...

I am using your components as a part of an FTP application I am writing right now. Thats my reasoning.

jsakalos
29 Apr 2008, 7:17 AM
Exactly!

So is a kind of "sequential" upload needed in your case?

esoteric
29 Apr 2008, 7:35 AM
Yes very much so. Even if one fails I still want the next one to upload, just have the icon turn to the error icon you already use. :)

jsakalos
29 Apr 2008, 8:11 AM
This already works with both singleUpload:true and singleUpload:false.

esoteric
29 Apr 2008, 8:17 AM
Perhaps I am completely misunderstanding, but when I add multiple files to the UploadPanel via the add button, they all show up as a list, then when I click the Upload button each file's spinner starts and when I look at Firebug and my server, I see mutiple connections at the same time.

The way I have been testing this is with large files 10+ mb so I know it takes more then a couple seconds to upload.

I have tried the singleUpload: true, and singleUpload: false.

My understanding is that singleUpload: true is that only one file gets posted per form submit and singleUpload: false is all the files in the queue get submited in a single form submit.

Just to be clear, I am curious about having this:

1. FileOne.xml -> begins upload, when finished, whether failed or success, go to next.
2. FileTwo.xml -> then as each file gets upload each spinner starts, and shows success or error icon.
3. FileThree.xml ..
4. FileFour.xml ..
5. FileFive.xml -> until the last file gets uploaded.

jsakalos
29 Apr 2008, 9:20 AM
singleUpload:true = one form with many file inputs posted and uploaded in one request.
singleUpload:false = many forms each with one file input uploaded in many requests.

esoteric
29 Apr 2008, 10:05 AM
singleUpload: false <-- perfect, however I want to make the requests dependent on the request ahead of it. So lets say an option of "simultaneousTransfers: 2", two will upload at the same time, when one finishes the next starts, or if it was set to 1, then only one will upload, once a finished status is returned, the next starts.

jsakalos
29 Apr 2008, 10:14 AM
That is that concurrent:false that is not implemented. Still wondering why it's needed...

esoteric
29 Apr 2008, 10:25 AM
Well I am wanting this app to behave more like an FTP client you see in the world and to give the owner of the app the potential to restrict the amount of files uploaded at one time.

If you look at Filezilla for example you can queue files up and then set how many concurrent connections and then as one finishes the next starts.

I mean I can modify the code to do this I suppose, now that I have seen that concurrent is not implemented, before though I thought it was a bug that it wasn't working or a work in progress.

esoteric
29 Apr 2008, 5:51 PM
Any more thoughts Saki? Or how to go about implementing this? :)

Thanks.

jsakalos
29 Apr 2008, 9:25 PM
I'll go into this anyway as I need to move filetree from beta phase to stable version. Now, I have some other things to do but I think that it will be feasible in 2-3 weeks...

esoteric
30 Apr 2008, 3:34 AM
That would be wonderful. I am willing to test anything you come up with, thanks Saki.

bomka
30 Apr 2008, 7:09 AM
Saki,
I am writing an application where my files are in DB. So, the relationship between files/folders in maintained in the DB. I was able to successfully retrieve tree data, based on a parent node that's passed in. But, for other commands (newdir, upload etc), I am wondering if there any way to also pass the ID of the files/folders to the server? Currently, I get "path" or "dir" and my server side logic doesn't have the "path" the way filetreepanel passes it (I don't store the entire path of a file/folder in DB). So, before deciding to make the server side change to store that, I was wondering if FileTreePanel could also additionally pass me the appropriate ID e.g. parent of new dir to add/

Any advice/suggestion is much appreciated. thanks a lot.

jsakalos
30 Apr 2008, 9:07 AM
Once I thought that I'll put files to DB too but it has proven that is was not very lucky approach in my case. I ended up with having files in normal filesystem and all additional info is in DB (description, MD5 sum, etc...). If you can change your setup I'd be for this.

If you cannot..., hmmm, not easy w/o overriding some routines... FileTreePanel was designed to work with filesystem...

Maybe it would do if you override loader beforeload plus action methods (delete, rename, ....)

bomka
2 May 2008, 5:58 AM
Thanks Saki. Maybe I'll start with saving the entire path of a file as a DB column. This way, I can easily lookup the file/folder based on that column.

bomka
4 May 2008, 10:08 AM
Saki,
I was able to mimic the new folder creation on the server side (in DB ). The server now returns a JSON {"success":true} and creates the folder.
On the client side, the new folder name stays and gets a + icon. However, when I click on the +, I get the top level Folder again. It seems like the "node" being passed back isn't the same ID as the folder that was created (I get ynode-300 as the node value). Is there any way to get the new "get" request come with the newly created ID? thanks.

jsakalos
4 May 2008, 10:14 AM
I ignore ids of nodes in the FileTreePanel whatsoever. The attribute that matters is path. Anyway, you can hook on an event and process the received id yourself if necessary.

Another important attribute is leaf. Leaf cannot have children, node (folder) can have children.

sirioz10
6 May 2008, 11:55 PM
Hi Saki,
I noticed that the fireFinishEvents of the Ext.ux.FileUploader does not return the server's response.
I think that could be useful, for example in cases where the server assigns an id to the uploaded file:



,fireFinishEvents:function(options,o) {
if(true !== this.eventsSuspended && this.singleUpload) {
this.stopProgress();
this.fireEvent('singlefilefinished', this, o);
}
if(true !== this.eventsSuspended && !this.singleUpload) {
this.fireEvent('filefinished', this, options && options.record, o);
}
if(true !== this.eventsSuspended && !this.singleUpload && 0 === this.upCount) {
this.stopProgress();
this.fireEvent('allfinished', this);
}
}


where 'o' is json response from server and 'singlefilefinished' is a specific event for singleUpload mode.

Regards
Fausto

jsakalos
7 May 2008, 1:30 AM
This could be problem only if you use singleUpload:true, do you? This event was meant only to let upper levels know that there is no upload in progress. You should listen to filefinished event for individual files and extract server data form passed arguments.

sirioz10
7 May 2008, 5:50 AM
This could be problem only if you use singleUpload:true, do you? This event was meant only to let upper levels know that there is no upload in progress. You should listen to filefinished event for individual files and extract server data form passed arguments.

Yes, I use FileUploader as component in another class, with singleUpload:true.
So I have to listen to allfinished event, the only that is fired, and, at this point,I can't retrive data from server.




In any case, I can be wrong, but the response from the server can be accessed only during the 'progress' event, (not sure that in filefinished event can be retrived the uploadCallback response.responseText/json).

bomka
7 May 2008, 7:45 AM
Thanks, i got that to work. Another question I have is that i am planning to use FileTreePanel to display some other DB data as well. But, I need to override the display mechanism, i.e. if someone clicks on "New Customer", for example, it should display a Modal screen that allows users to enter various information.
So, basically my question is can still have FileTreePanel, use its' context menu, but provide my own handler functions? thanks.


I ignore ids of nodes in the FileTreePanel whatsoever. The attribute that matters is path. Anyway, you can hook on an event and process the received id yourself if necessary.

Another important attribute is leaf. Leaf cannot have children, node (folder) can have children.