PDA

View Full Version : [Ver. 1.0-beta3] Ext.ux.FileTreePanel



Pages : [1] 2

jsakalos
8 Jul 2007, 7:37 AM
Hi all,

I'm writing an extension of Ext.tree.TreePanel with php backend and json data transfer that would handle basic file operations:

upload
rename
delete
create folder
moveI'd just like to ask if you'd be interested in that and if should I publish it when workable.

[Pre-alpha] Only upload, delete and new folder work. FB debugger is started on some errors. See Live Demo Page (http://aariadne.com/filetree).
[alpha1] All basic file operations work. See Live Demo Page (http://aariadne.com/filetree).
[Ver. 1.0-beta1] Tree behaves quite well; some improvements still needed . See http://extjs.com/forum/showthread.php?t=8894&p=45473
[Ver. 1.0-beta2] The new extension Ext.ux.UploadForm (http://extjs.com/forum/showthread.php?t=9305) is integrated into the FileTreePanel.
[Ver. 1.0-beta3] Feature complete version, last beta before RC.

UPDATE: Version for Ext 2.x is available here. (http://extjs.com/forum/showthread.php?t=29090)

8 Jul 2007, 8:23 AM
No need to question, just publish when complete.

genius551v
8 Jul 2007, 8:35 AM
of course!

potdarko
8 Jul 2007, 8:44 AM
You must spread some Reputation around before giving it to jsakalos again.

:D

jsakalos
8 Jul 2007, 12:48 PM
OK, I've made it public; see FileTree Live Demo Page (http://aariadne.com/filetree). The code is pre-alpha so do not expect any miracles as do expect some bugs.

Only upload, delete and new folder functions work so far and FB debugger is started on some errors.

Nevertheless, it can give you first feel and touch.

Enjoy,

DigitalSkyline
9 Jul 2007, 8:30 AM
Saki,
Not trying to be a downer but isn't this pretty easy without an extension? Just using Tree and context menus... I guess I'm just wondering what makes this unique?

jsakalos
9 Jul 2007, 9:00 AM
Saki,
Not trying to be a downer but isn't this pretty easy without an extension? Just using Tree and context menus... I guess I'm just wondering what makes this unique?

I'm not trying to do anything unique, I'm trying to do something reusable.

DigitalSkyline
9 Jul 2007, 9:15 AM
That cool... I may be able to help if you need it I've written a whole file management app in Ext already (not in PHP, but the client-side stuff might be useful). I'm always interested in seeing how others approach the same problems so please don't be discouarged - share and share alike :)

jsakalos
9 Jul 2007, 9:42 AM
...I've written a whole file management app in Ext already...

Do you have a link to a live demo?

jsakalos
10 Jul 2007, 11:08 AM
Hi all,

I've just uploaded alpha1 version (http://aariadne.com/filetree). All file operations should work including drag & drop file/folder moves. Can sometimes behave oddly.

I tell you, it's quite a task to keep client tree and real server filesystem in sync...:-?

Any advices, ideas or bug reports are welcome.

Cheers,

DigitalSkyline
10 Jul 2007, 12:57 PM
Saki,
There's a few things I'm still working on so its not live atm. As soon as I can I'll get you an account so you can give it a test drive.

As to how I'm keeping the server in sync, I don't think the way I do it will be relevant because the files are all tracked in MSSQL with various metadata and every time a file is moved/deleted etc., the database has to be updated making a lot of server-side code necessary. Its a part of our CMS so this extra data is needed to track changes, dependancies, security etc. - its not a generic file browser.

jsakalos
10 Jul 2007, 1:15 PM
Saki,
There's a few things I'm still working on so its not live atm. As soon as I can I'll get you an account so you can give it a test drive.

As to how I'm keeping the server in sync, I don't think the way I do it will be relevant because the files are all tracked in MSSQL with various metadata and every time a file is moved/deleted etc., the database has to be updated making a lot of server-side code necessary. Its a part of our CMS so this extra data is needed to track changes, dependancies, security etc. - its not a generic file browser.

I see.

About syncing: first I thought that each change will first modify the underlying serverside filesystem and then relevant part of the tree will be reloaded, then I started to experiment with reducing reloads and now it seems that I'll return back to the original idea of reload-on-change.

What do you think? Or somebody else has experiences and ideas?

dolittle
10 Jul 2007, 1:24 PM
I love it.

My thoughts:

- Empty folders contain (+) mark and only when you click try to open it, it disappear.
I think they should not contain the (+) or try to open at all.
- When right clicking somewhere inside the window nothing happens unless you click on a folder or a file and then you get the context menu.
Wouldn`t it be more intuitive to allow to create folders even when not clicking on a folder and to attach the event to the parent node of the node in the same row where the click occurred.

Thanks

jsakalos
10 Jul 2007, 2:03 PM
Thanks for your input.


I love it.
... I'm very glad :)



My thoughts:

- Empty folders contain (+) mark and only when you click try to open it, it disappear.
I think they should not contain the (+) or try to open at all.This is quite problem for loaded nodes as on each click of parent only the first level of children are loaded e.i. at this point it's not known if the directory is empty or not. Sure it could be tested by server but it increases number of file operations and consequent delays.

Should be quite easy for new folders as we know that they're empty at the moment of creation .

Not sweeping it under carpet but giving it low priority. Sorry. ;)



- When right clicking somewhere inside the window nothing happens unless you click on a folder or a file and then you get the context menu.
Wouldn`t it be more intuitive to allow to create folders even when not clicking on a folder and to attach the event to the parent node of the node in the same row where the click occurred.

ThanksI'll see what can be done about this. I hang on Ext.tree.TreePanel contextmenu event and it fires as you describe. Should it be very annoying also for others I would override relevant part of the TreePanel.

DigitalSkyline
10 Jul 2007, 2:21 PM
I see.

About syncing: first I thought that each change will first modify the underlying serverside filesystem and then relevant part of the tree will be reloaded, then I started to experiment with reducing reloads and now it seems that I'll return back to the original idea of reload-on-change.

What do you think? Or somebody else has experiences and ideas?

I do a reload on the tree whenever a new file is added, but not when a file/folder is renamed or deleted. I suppose a reload would be not be needed when you move a file, unless the folder is not pre-loaded. I'm not sure I agree with how you open/load the folder when dragged over, perhaps if you only loaded it after the drop, some of this overhead could be reduced?

In this case a file could not be moved to a sub-folder of a closed folder without manually expanding the folder first. Then, it should not be necessary to do a reload... just a thought.

jsakalos
11 Jul 2007, 8:36 AM
Hi all,

I've just uploaded version 1.0-beta1 (http://aariadne.com/filetree) of the FileTreePanel.

I've finally found out the best way of syncing client tree with server filesystem. All operations except file upload now require only one server round trip even in the case of error.

Erroneous operations rollbacks are handled on client returning the tree to the state before operation.

Next, the file mime type icons now change immediately after successful file renames.

All the tree behaves quite well, however, I plan to polish the behavior even more.

Give it a try,

JeffBurr
11 Jul 2007, 12:09 PM
Another fantastic implementation!

Would you be willing to share the PHP code that you use on the server?

jsakalos
11 Jul 2007, 12:17 PM
Another fantastic implementation!

Would you be willing to share the PHP code that you use on the server?

Thanks Jeff,

I'm not decided yet as this is client side world but what I do for sure is the detailed interface specification. I mean, what is sent from client and what is the expected server response.

trbs
11 Jul 2007, 12:40 PM
nice work jozef :)

jsakalos
11 Jul 2007, 12:41 PM
Hi all,

I've started to implement key map for handling the file tree operations. Currently F2 = edit and delete work. For the development purposes I've disabled links on leafs - when you click a leaf now it only gets selected. Anyway I think that link should open only on doubleclick.

Can anybody tell me some default keys and their respective functions to implement in addition to F2 and delete (maybe F5 to reload node)?

Thanks,

jsakalos
11 Jul 2007, 12:43 PM
nice work jozef :)

Thanks trbs,

seemed to be a one-afternoon job but there is a lot of things to implement to turn generic tree to file tree with server side filesystem. :-?

But it's working out nice...

benny00
12 Jul 2007, 2:47 AM
Hi Saki!
Did you see this ajaxian.co post?
http://ajaxian.com/archives/ext-file-tree-widget
Not even ready, but popular already! :)
Congrats and keep up the good work!

jsakalos
12 Jul 2007, 3:02 AM
Hi Saki!
Did you see this ajaxian.co post?
http://ajaxian.com/archives/ext-file-tree-widget
Not even ready, but popular already! :)
Congrats and keep up the good work!

Yes benny00,

I've sent 'em info on this. So they like it. :D

ReyBango
12 Jul 2007, 6:32 AM
Great job Saki:

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

hgcphoenix
12 Jul 2007, 6:51 AM
Excellent work and perfect timing too !

I created a file manager to work with an existing file storage package from the toolkit that we use (OpenACS).

I may use your file tree panel to replace the treepanel I have there.

Please have a look :http://www.solutiongrove.info/companya/files/

Login : coa
Password : 123

Thank you so much for making an effort to make it reusable. Once again, great work !

12 Jul 2007, 7:16 AM
Saki, did you notice the bug with the form fileupload option too?

is this why you set the form upload parms manually instead of using the config Options?

// set proper enctype of the upload form
Ext.fly(this.uploadForm.id).set({enctype:'multipart/form-data'}

jsakalos
12 Jul 2007, 8:51 AM
Saki, did you notice the bug with the form fileupload option too?

is this why you set the form upload parms manually instead of using the config Options?

// set proper enctype of the upload form
Ext.fly(this.uploadForm.id).set({enctype:'multipart/form-data'}

I couldn't find another method of how set enctype of the form. We could consider the above as a workaround.

12 Jul 2007, 11:14 AM
Excellent work and perfect timing too !

I created a file manager to work with an existing file storage package from the toolkit that we use (OpenACS).

I may use your file tree panel to replace the treepanel I have there.

Please have a look :http://www.solutiongrove.info/companya/files/

Login : coa
Password : 123

Thank you so much for making an effort to make it reusable. Once again, great work !



that site is beautiful. I'm reverse engineering your usage of swfupload.

jsakalos
12 Jul 2007, 2:59 PM
Hi all,

I've implemented three open modes for leaf nodes (files):




popup - this is default, doubleclick or Enter triggers, also in open submenu
this window - accessible through open submenu (or can be configured as default)
new window - accessible through open submenu (or can be configured as default)


Let me know what do you think about it and if/what functionality are you missing.

gnaegi
12 Jul 2007, 9:40 PM
Hi Saki

Thanks very much for sharing this great file browser, I was about to write the same and I'm glad that you've already done it!

But I have a problem in Safari: SyntaxError - Parse error on line 163 in filetree.js

I have no problem with extjs TreePanel in Safari in general, so it must be something in your code.



uploadForm.on({
actioncomplete: {
fn: function(form, action) {
window.status = "File Uploaded"
}}
, actionfailed: {
fn: function(form, action) {
debugger;
}}
});


I'm no JS speciallist, but isn't either a variable assignment or a function call needed at the 'debugger;' line?


Another thing: I implemented a TreePanelState that stores the users current TreePanel expansions in a client cookie and reopens them when visiting the tree another time. In most situations I like this behaviour even for file browsing. Very often over a certain period of time I work on the same files and I think it is nice when the system knows where you left...

So if you wan't to integreate it into your code, here it is:

http://extjs.com/forum/attachment.php?attachmentid=925&d=1184144029
and
http://extjs.com/forum/showthread.php?p=45770

Feel free to modify it so that it fits your FileTreePanel.

Cheers
Florian

hgcphoenix
13 Jul 2007, 1:19 AM
hey djliquidice,

Thanks. I'm using a variation of swfupload called Revision 5.2.
This link might help.
http://linebyline.blogspot.com/2007/05/swfupload-revision-52-release.html

Best,

Hamilton

analyzerx
13 Jul 2007, 1:34 AM
This is starting to seem more and more promising! :)
Congrats once more saki.

I'd really like to get my hands on the php so I can test a few things like adding file extension filtering, drag and dropping files on other elements or even forms and stuff like that.

Even tinymce integration? ;)

This could be extremely useful in SO many situations.

jsakalos
13 Jul 2007, 3:27 AM
Hi Saki

Thanks very much for sharing this great file browser, I was about to write the same and I'm glad that you've already done it!

But I have a problem in Safari: SyntaxError - Parse error on line 163 in filetree.js

Do you get this error on demo page? I have tested on beta Safari for windows and it works. The fragments you qoute have been there a week ago but they don't get executed anymore. If you have downloaded files from demo page and it's problem on your local installation keep in mind that I haven't released the code yet. Not for serious use statement is written on FileTree wiki page (http://extjs.com/learn/Extension:FileTree). There are two reasons for this statement:



code is not yet in production version state
the FileTree extension will be dual licensed LGPL/Commercial



Another thing: I implemented a TreePanelState that stores the users current TreePanel expansions in a client cookie and reopens them when visiting the tree another time. In most situations I like this behaviour even for file browsing. Very often over a certain period of time I work on the same files and I think it is nice when the system knows where you left...

Feel free to modify it so that it fits your FileTreePanel.

Cheers
FlorianIs this in a form of ux (User Extension)? That would be best as these two would make very useful pair. If not, the best would be if you would (re)write is as ux as then it could be used also for another types of trees.

JorisA
14 Jul 2007, 1:39 AM
Hi,
looks great so far. small suggestion: It might be better to disable all actions for read only folders. (so disable dragging, show red cross when dropping, disable context menu, etc)

jsakalos
14 Jul 2007, 8:21 AM
Hi,
looks great so far. small suggestion: It might be better to disable all actions for read only folders. (so disable dragging, show red cross when dropping, disable context menu, etc)

Good idea JorisA,

I was a bit busy with my new extension Ext.ux.UploadForm (http://extjs.com/forum/showthread.php?t=9305) but I'll implement your advise soon.

Thanks,

jsakalos
14 Jul 2007, 1:15 PM
Hi all,

I've just uploaded ver. beta2 (http://aariadne.com/filetree) in which is integrated new UploadForm extension (http://extjs.com/forum/showthread.php?t=9305).

Enjoy,

JorisA
14 Jul 2007, 3:09 PM
WOW I really like the new upload form.

Tiny suggestion again: when uploading, lock the context menu and show some progress indicator, if possible per file. (donno if you are uploading all at the same time)

jsakalos
14 Jul 2007, 3:14 PM
WOW I really like the new upload form.

Tiny suggestion again: when uploading, lock the context menu and show some progress indicator, if possible per file. (donno if you are uploading all at the same time)

The progress indicator would be ideal. Unfortunately, I don't know how to do it. The system of upload is to submit form where php on server processes it.

Does anybody know how the progress indicator(s) could be done?

trbs
14 Jul 2007, 3:45 PM
The progress indicator would be ideal. Unfortunately, I don't know how to do it. The system of upload is to submit form where php on server processes it.

Does anybody know how the progress indicator(s) could be done?

Progress indicators are notoriously hard to make, specially if you want to do it right.

There are the 2 basis options; do it server side or do it client side. Client side will mean either Flash or Java Applets (maybe your own plugin/extention? but that will be hell to code in IE most likely). Server side means you'll have to do what many people did before us :) create a direct handler in your webserver to stream the upload to a temporary place and offer some way of communicating with the client the status and size of the upload. (search around there like 100 implementations of this, maybe the best starting place is mod_progressindicator in lighttpd)

However handling it server side is not portable at all :( If you using a framework it's going to be a hard to implement a direct upload method. And most likely 80% of the users will have to write that part them selfs because of there specific use cases. I don't know if the direct upload is even possible on Microsoft platforms. But it is on Unix at least with Apache and Lighttpd.

I think i don't have to get into why we wouldn't want Flash or Java Applets in our Extjs apps :)

So until someone comes up with a good spec to handle this from JavaScript (and we've waited 10 years until it's support cross browser) it's most likely going to be a choice of the lesser evil here... :(

My personal favorite is this one: Create a dummy progress bar, which scrolls back and forwards without any notion on how much is completed.

This is very easy to do, and will keep users busy :)

jsakalos
14 Jul 2007, 4:12 PM
Progress indicators are notoriously hard to make, specially if you want to do it right.


My personal favorite is this one: Create a dummy progress bar, which scrolls back and forwards without any notion on how much is completed.

This is very easy to do, and will keep users busy :)


YES !
That's IT!
Thanks,

jsakalos
14 Jul 2007, 4:13 PM
Hi,
looks great so far. small suggestion: It might be better to disable all actions for read only folders. (so disable dragging, show red cross when dropping, disable context menu, etc)

Hi JorisA,

except of dragging this is implemented.

Cheers,

jsakalos
14 Jul 2007, 4:39 PM
Hi trbs,

I've done that dummy uploading indicator.

Thanks for tip,

JorisA
14 Jul 2007, 11:36 PM
Unfortunately there is no way in php to get raw access to the upload handle. It can be done with cgi though.
A dummy progress bar would be good, maybe with an easy hook so people can implement their own progress stuff depending on what serverside code they use.

As I noted before in my previous post. You can also upload files one by one. I think this shouldn't take significantly more time, and at least gives a rough indication when uploading more files. (maybe replace the filetype icon with a loading one on the current ones, ticks on finished ones)

jsakalos
15 Jul 2007, 12:58 AM
Unfortunately there is no way in php to get raw access to the upload handle. It can be done with cgi though.
A dummy progress bar would be good, maybe with an easy hook so people can implement their own progress stuff depending on what serverside code they use.


This could be done. Do you know what information is sent from the server while uploading?


As I noted before in my previous post. You can also upload files one by one. I think this shouldn't take significantly more time, and at least gives a rough indication when uploading more files. (maybe replace the filetype icon with a loading one on the current ones, ticks on finished ones)

Uploading files one by one would require almost complete re-design of this extension and probably also re-writing upload logic of Ext. This seems too much for me right now.

Of course, any ideas how to do it simple way are welcome.

JorisA
15 Jul 2007, 2:04 AM
The server doenst send anything back until the whole request is received. A common workaround is calling giving the form a unique id, and refresh a progress script every xx sec.

So you could add a config param progressUrl, and progressRefreshTime. If these params are set, your script should do a request to this url, which then sends back a json with status info. (time remaining etc)


There is an extension for php wich makes this possible:
http://blog.joshuaeichorn.com/archives/2005/05/01/ajax-file-upload-progress/

And using cgi its possible as well as far as I know.

albertyips
15 Jul 2007, 10:37 AM
Hi all,

I've implemented three open modes for leaf nodes (files):




popup - this is default, doubleclick or Enter triggers, also in open submenu
this window - accessible through open submenu (or can be configured as default)
new window - accessible through open submenu (or can be configured as default)


Let me know what do you think about it and if/what functionality are you missing.

What would be really exciting is clicking on a folder in the tree and having the content show up in a grid on the right hand side. You could list information on the contents of that folder like size, type and last modified. Similar to the Windows Explorer metaphor that many folks are used too. Perhaps you could include a setting where individual files don't show on the file tree but only in the grid view. I believe this file management style UI would be used in many applications, like the one developed by SolutionGrove (hgcphoenix), the eXtplorer - PHP/ExtJS-based File Manager and the application we are developing. With the appropriate API stubs, it could be connected to any backend.

Albert

jsakalos
15 Jul 2007, 1:24 PM
What would be really exciting is clicking on a folder in the tree and having the content show up in a grid on the right hand side. You could list information on the contents of that folder like size, type and last modified. Similar to the Windows Explorer metaphor that many folks are used too. Perhaps you could include a setting where individual files don't show on the file tree but only in the grid view. I believe this file management style UI would be used in many applications, like the one developed by SolutionGrove (hgcphoenix), the eXtplorer - PHP/ExtJS-based File Manager and the application we are developing. With the appropriate API stubs, it could be connected to any backend.

Albert

You're right.

However, I had no intention from the beginning to create a full featured file manager. What I really need is to provide a server space and ui for management of a company documents. Somebody saves 'em and organize 'em and all the staff can access 'em.

You, or somebody else, are welcome to extend the FileTreePanel to implement functions you describe.

Cheers,

jsakalos
15 Jul 2007, 1:24 PM
Hi guys,

this toy has now functional progress bar.

Cheers,

trbs
15 Jul 2007, 6:25 PM
nice work Jozef :)

analyzerx
16 Jul 2007, 1:41 AM
Hi guys,
this toy has now functional progress bar.
Cheers,

Woa nice! :)
I'm quite interested on how you did this in php.

I know that php 5.2 has this functionality but won't work nicely on previous versions.
( http://www.ibm.com/developerworks/opensource/library/os-php-v525/ )

Great work in both the file upload and manager :)
Is there an ETA when they'll be released (even beta versions)? :)

jsakalos
16 Jul 2007, 1:53 AM
Woa nice! :)
I'm quite interested on how you did this in php.
I know that php 5.2 has this functionality but won't work nicely on previous versions.
( http://www.ibm.com/developerworks/opensource/library/os-php-v525/ )

Great work in both the file upload and manager :)


First, thanks.
Second, it's pecl extension uploadprogress that does the trick. APC hasn't worked with my PHP version (5.2.0). Beware uploadprogress doesn't work with Apache suhosin module (hardened PHP).



Is there an ETA when they'll be released (even beta versions)? :)Yes, uploadprogress delivers a lot of info. I'm just now deciding where to display it. Also, for users of other systems, the progress logic has to be universal and configurable.

dolittle
16 Jul 2007, 6:03 AM
Do you think it will be nice to make it possible to asynchronously upload files like in gmail or in this example (http://www.air4web.com/files/upload/)?

I think he is using iframe for each file to make it possible.

jsakalos
16 Jul 2007, 6:14 AM
Do you think it will be nice to make it possible to asynchronously upload files like in gmail or in this example (http://www.air4web.com/files/upload/)?

I think he is using iframe for each file to make it possible.

The files are already uploaded asynchronously. If you set fileUpload:true on Ext.form.BasicForm it creates hidden iframe on submit, copies the form to it and submits the copy.

I use this Ext infrastructure w/o change.

dolittle
16 Jul 2007, 8:23 AM
I didn`t know that the files are already asynchronously uploaded.

The functionality I was thinking of is similar to gmail.
You don`t have a progress bar but you have a clear indication when the files are being uploaded and which files are already uploaded. You can add and remove files from the queue before, after and during upload. This is very important for big files.

I`m not saying that the above features are essential rather that in the current implementation I got a little confused. I added files to the queue after I started uploading and the progress bar didn`t seem to be affected at all. It looks like clicking on the icon on the right of the file should remove it from the queue but it doesn`t.

jsakalos
16 Jul 2007, 9:55 AM
I didn`t know that the files are already asynchronously uploaded.

The functionality I was thinking of is similar to gmail.
You don`t have a progress bar but you have a clear indication when the files are being uploaded and which files are already uploaded. You can add and remove files from the queue before, after and during upload. This is very important for big files.

I`m not saying that the above features are essential rather that in the current implementation I got a little confused. I added files to the queue after I started uploading and the progress bar didn`t seem to be affected at all. It looks like clicking on the icon on the right of the file should remove it from the queue but it doesn`t.

This is a bit different: there is one form only with multiple <input type="file"> what means that if the queue is uploading adding/deleting file has no effect on it. Maybe I should disable add button while uploading... ;)

I don't know gmail but they maybe use swfupload or something else.

jsakalos
16 Jul 2007, 9:57 AM
Hi guys,

the textual info on upload progress (size, total, avg speed, speed and eta) are now available.

Look at it (http://aariadne.com/uploadform).

Cheers,

xtrafile
16 Jul 2007, 6:35 PM
Is the full src available for download(im talking about the PHP, as i can help you a lot if needed).
I have not seen a download for server files yet but i may have missed it.
-Matt

jsakalos
17 Jul 2007, 1:23 AM
Is the full src available for download(im talking about the PHP, as i can help you a lot if needed).
I have not seen a download for server files yet but i may have missed it.
-Matt

Hi Matt,

you see, Ext and this forum are client side world and PHP is only one of the options of "compatible" server side solutions. I do not want (1) to post a server side script here and turn it into PHP help forum and (2) to hold any kind of support for server scripts.

I shall write the documentation that will be included in the stable version that will describe the client-server interface in the form of "what should client send" and "what is the expected server response".

If you would prefer another arrangement please contact me via PM or skype.

Cheers,

xtrafile
17 Jul 2007, 5:53 AM
Im just looking for something to go off of.
Im integrating Ext into my current file hosting script XtraUpload (http://xtrafile.com) and was looking for an example to base off of.
Ill send you a PM with some ideas/suggestions about the file upload code if i can get a hold of it.
-Matt

aGorilla
17 Jul 2007, 12:45 PM
What would be really exciting is clicking on a folder in the tree and having the content show up in a grid on the right hand side. You could list information on the contents of that folder like size, type and last modified. Similar to the Windows Explorer metaphor that many folks are used too. Perhaps you could include a setting where individual files don't show on the file tree but only in the grid view. I believe this file management style UI would be used in many applications, like the one developed by SolutionGrove (hgcphoenix), the eXtplorer - PHP/ExtJS-based File Manager and the application we are developing. With the appropriate API stubs, it could be connected to any backend.

Albert
I'm with Albert. I'd love to see a mix of the tree with the more traditional layout that Solution Grove has.

My hat's off to both of you, they're both great looking apps.

jsakalos
17 Jul 2007, 1:38 PM
I'm with Albert. I'd love to see a mix of the tree with the more traditional layout that Solution Grove has.

My hat's off to both of you, they're both great looking apps.

The FileTree is exactly that what I need at present so I'm not going in the direction of full featured file manager right now. This doesn't mean that I don't like the idea of having such it only means that I'm not going to write one in the near future.

JeffHowden
17 Jul 2007, 7:31 PM
Progress indicators are notoriously hard to make, specially if you want to do it right.

[...]

I think i don't have to get into why we wouldn't want Flash or Java Applets in our Extjs apps :)

[...]

My personal favorite is this one: Create a dummy progress bar, which scrolls back and forwards without any notion on how much is completed.

This is very easy to do, and will keep users busy :)

Personally, SWFUpload is the way to do it. Flash and/or Java doesn't belong in Ext projects except where they perform a task that simply can't be accomplished otherwise. This is one of those cases.

Implementing a "progress" indicator that doesn't tell the user anything about what's actually happening is actually way worse than using a tiny bit of non-visible flash to give the user some useful feedback.

jsakalos
17 Jul 2007, 11:41 PM
Personally, SWFUpload is the way to do it. Flash and/or Java doesn't belong in Ext projects except where they perform a task that simply can't be accomplished otherwise. This is one of those cases.

Implementing a "progress" indicator that doesn't tell the user anything about what's actually happening is actually way worse than using a tiny bit of non-visible flash to give the user some useful feedback.


Hi Jeff,

I've implemented real progress bar + busy indicator + textual info. However, now I see that you're right. Even if I tried to do best some limits of the browser + javascript only solution are very user unfriendly.

I'm thinking about creating also swfupload version.

DigitalSkyline
17 Jul 2007, 11:51 PM
One of the key features of a flash uploader is the ability to restrict file types... not possible using only html forms. The flash swf is aware also of the upload progress so implementing it is supposed to be quite easy. I have a good amount of experience using action script but have not got around to building an uploader yet... other priorities aside, I've seen some cool implementations such as image previews after upload etc. All made much easier with the flash format. Flash is pretty available everywhere (aside from the delay in the latest Linux plugin ) so I don't understand the hatred some have for it... I guess all the flash ads have given it a bad rap ... oh well.

jsakalos
18 Jul 2007, 4:09 AM
One of the key features of a flash uploader is the ability to restrict file types... not possible using only html forms. The flash swf is aware also of the upload progress so implementing it is supposed to be quite easy. I have a good amount of experience using action script but have not got around to building an uploader yet... other priorities aside, I've seen some cool implementations such as image previews after upload etc. All made much easier with the flash format. Flash is pretty available everywhere (aside from the delay in the latest Linux plugin ) so I don't understand the hatred some have for it... I guess all the flash ads have given it a bad rap ... oh well.

As I've already mentioned, I'm changing my mind for swfupload. We'll see... ;)

jsakalos
18 Jul 2007, 5:17 AM
Hi guys,

I've just uploaded demo page (http://aariadne.com/filetree) with the client-server interface spec.

Cheers,

xtrafile
18 Jul 2007, 6:52 AM
I am now busy implementing a php script to do this and will post it here based on the server spec for others who dont want to do it.
My Only question is with the upload request, there should be a value passed to the server indicating which folder to upload to, as you can right click any folder an upload "to it".
-Matt

xtrafile
18 Jul 2007, 10:54 AM
Ok, Im done with the php backend and i have noticed a few bugs.

1. Settings progressBar to false does nothing, it still does ajax requests for the upload progress php file.

2. I cant get uploads to work at all, nor can i see the actual request because it happens in an iframe which firebug dosent log requests for. I need all the params that are sent along with a file upload. I will try to find them myself though...

3. The iconPath option does not cary over to the upload widget, i had it set it in the actual src.
-------------
Overall a great component and very stable in beta.
Once i figure out the upload problems i will start a perl version as well then upload them both here for everyone.
-Matt

jsakalos
18 Jul 2007, 11:42 AM
Ok, Im done with the php backend and i have noticed a few bugs.

1. Settings progressBar to false does nothing, it still does ajax requests for the upload progress php file.

Sure it does as you can have textual info w/o progressbar. Do not specify any pgCfg (progress configuration) and you won't have ajax requests.



2. I cant get uploads to work at all, nor can i see the actual request because it happens in an iframe which firebug dosent log requests for. I need all the params that are sent along with a file upload. I will try to find them myself though...
There is nothing special done in UploadForm in addition to BasicForm regarding file uploads except that I listen to actioncomplete and actionfailed events and I display results as icons + tooltips. If you have troubles with file uploads they most likely don't lie in UploadForm/FileTreePanel.

All params are specified on demo page: cmd=upload,path=something. Of course, inputs type=file and MAX_FILE_SIZE hidden (if configured) are posted too. For basic file upload neither cmd nor MAX_FILE_SIZE nor path are required.



3. The iconPath option does not cary over to the upload widget, i had it set it in the actual src.
You're right, I'm going to fix it.



-------------
Overall a great component and very stable in beta.
Once i figure out the upload problems i will start a perl version as well then upload them both here for everyone.
-MattI've pm-ed you on this matter.

JeffHowden
18 Jul 2007, 2:36 PM
Using SWFUpload also has other advantages:


being able to stream the uploads as soon as the user selects them, independent of the submission of the actual form making the time to complete the entire process less (as they'll likely be filling in other parts of the form while their files upload)
filetype restrictions as already noted
the ability to perform uploads an a server-independent fashion (huge if you don't happen to be running php for your backend)


I believe you can also provide UI controls (via Ext) to cancel individual files that are being uploaded.

xtrafile
18 Jul 2007, 5:13 PM
PM noted and reply sent.
I have resolved the upload problems.
I have also decided not to upload my server backends.
Being as this is a javascript forum( and javascript being a client side programming language) i wont mix up the forums with server side code and start a huge topic on how this or that can be done better.
If anyone wants to use the php backend send me a PM and ill show you where to get it.
-Matt

jsakalos
18 Jul 2007, 9:48 PM
PM noted and reply sent.
I have resolved the upload problems.
I have also decided not to upload my server backends.
Being as this is a javascript forum( and javascript being a client side programming language) i wont mix up the forums with server side code and start a huge topic on how this or that can be done better.
If anyone wants to use the php backend send me a PM and ill show you where to get it.
-Matt

Thank you very much,

I think this is good decision.

Cheers,

pluesch0r
19 Jul 2007, 1:52 PM
Hi,

first of all: thanks for your great extension!

I created an extension for FileTreePanel and needed to make some changes to your code as Rails normally has unique URLs for each action ...
If possible, please include these changes in the vanilla version of FileTreePanel ...

* possibility to set URLs for each action that's fired by the context menu

url: this.deleteUrl || this.dataUrl || this.uploadUrl
* possibility to make the root-node virtual, i.e. don't submit it in calls (via boolean config switch etc.) - like this:

node.getPath('text').substr(1).substr(node.getOwnerTree().getRootNode().text.length)
* create switches for enabling/disabling various contextmenu-controls (like disable upload, renaming, creating of folders and so on)

For those concerned what I'm doing:

http://moria.konflux.at/teaser.png

I will release the code as extension to the already existing FileTreePanel once it's ready.

Thanks and keep up the good work!

krycek
19 Jul 2007, 3:58 PM
@jsakalos: Really great extension

I don't know if you're aware of this bug:

When i drag a file and drop in an empty folder it shows the file I dropped, twice.
When the target folder is not empty it works well.


@pluesch0r: great idea too... are you thinking in showing the content of other files types like text, mp3 (with a flash player) or just images?

:-?

pluesch0r
20 Jul 2007, 12:06 AM
@pluesch0r: great idea too... are you thinking in showing the content of other files types like text, mp3 (with a flash player) or just images?


hm. haven't thought about that. although it shouldn't be hard to accomplish, i don't need that feature, so i won't build it in. i'll keep my code open enough though, so you can just put something like that in.

furthermore, i'm thinking about replacing the middle panel with a grid that shows all the files in a directory (and avoid the displaying of files in the tree itself). then, when you click the row of a file, you get a preview of the file/image in the details section .. haven't decided yet, though. :)

jsakalos
20 Jul 2007, 2:23 AM
Hi,

first of all: thanks for your great extension!

I created an extension for FileTreePanel and needed to make some changes to your code as Rails normally has unique URLs for each action ...
If possible, please include these changes in the vanilla version of FileTreePanel ...

* possibility to set URLs for each action that's fired by the context menu

url: this.deleteUrl || this.dataUrl || this.uploadUrl* possibility to make the root-node virtual, i.e. don't submit it in calls (via boolean config switch etc.) - like this:

node.getPath('text').substr(1).substr(node.getOwnerTree().getRootNode().text.length)* create switches for enabling/disabling various contextmenu-controls (like disable upload, renaming, creating of folders and so on)

Yes, putting it to my todo list.

jsakalos
20 Jul 2007, 2:24 AM
@jsakalos: Really great extension

I don't know if you're aware of this bug:

When i drag a file and drop in an empty folder it shows the file I dropped, twice.
When the target folder is not empty it works well.

:-?


I'll look at it. It's some timing problem. Node is created by dragging and then loaded second time from server...

jsakalos
22 Jul 2007, 3:17 AM
Hi pluesch0r,

I've implemented optionally different urls for commands. The preference logic is now:

uploadUrl || dataUrl, renameUrl || dataUrl, etc.

This is true for all commands so you have an option to use one dataUrl or you can override it with a more specific one.

Then, I've implemented global readOnly config option and setReadOnly method. This disables context menu globally. There is one slight problem with DD as during instantiation phase there is no DD yet, it's created on render. Unfortunately, there is no render event so if you enableDD in config and you want to turn tree initially readOnly you need to call setReadOnly(true) after render to disable DD:



var tree = new Ext.ux.FileTreePanel('ct', {
enableDD: true
, readOnly: true
});

....

tree.render();
tree.setReadOnly(true);
After render you can call setReadOnly() at any time to switch readOnly on or off.

I haven't done showing/hiding of individual context menu items yet.

wachid
22 Jul 2007, 6:03 AM
can anybody show me how to do server process in PHP??
(especially for extfile)

thank's....

jsakalos
22 Jul 2007, 1:34 PM
can anybody show me how to do server process in PHP??
(especially for extfile)

thank's....

I have decided not to turn this thread into a PHP forum so I won't post PHP script here. You can contact me via skype or pm me on the matter.

jsakalos
22 Jul 2007, 3:29 PM
Hi pluesch0r,

I've implemented config options:



enableDelete
enableRename
enableNewDir
enableUpload
readOnly

and corresponding methods:



setDeleteDisabled
setRenameDisabled
setNewDirDisabled
setUploadDisabled
setReadOnly

I've also solved the DD problem when enableRename = false so now is no need to call any method after tree rendering.

Hope this is all from your wish list.

Cheers,

pluesch0r
22 Jul 2007, 10:25 PM
thanks, great! :)

The only things missing are the virtual root-node config option and the Action-Urls.

Keep up the good work!

jsakalos
23 Jul 2007, 12:26 AM
thanks, great! :)

The only things missing are the virtual root-node config option and the Action-Urls.

Keep up the good work!

Action urls are done (see one of the previous posts), virtual root name is still to be done.

pluesch0r
23 Jul 2007, 3:21 AM
oh, right. sorry. completely missed that. do you want me to implement that feature?

le_zell
23 Jul 2007, 4:05 AM
Hi from France,

First of all : Fantastic job !

I'm very interested by this extension.

Is-it possible to have to filetree.php and uploadform/*.php codes ? or a zip file of the sources ?

My boss asks me for a way to put on our intranet our files located on a samba server...and honestly, your solution seems to match perfectly !

le_zell

jsakalos
23 Jul 2007, 5:36 AM
Hi from France,

First of all : Fantastic job !

I'm very interested by this extension.

Is-it possible to have to filetree.php and uploadform/*.php codes ? or a zip file of the sources ?

My boss asks me for a way to put on our intranet our files located on a samba server...and honestly, your solution seems to match perfectly !

le_zell
Just pm me or contact me on skype (jsakalos) on the matter.

jsakalos
23 Jul 2007, 5:37 AM
oh, right. sorry. completely missed that. do you want me to implement that feature?

No, I'm going to do it anyway as I need it too. I'll do it today, I hope.

jsakalos
23 Jul 2007, 1:31 PM
Hi all, mainly pluesch0r ;)

I've solved this "root node matter". Now you can have text displayed for root node (config property text) different from real path of the root node (config property path).

I've tested only briefly so any bug reports (if any) are welcome.

Cheers,

pluesch0r
24 Jul 2007, 5:32 AM
working like a charm, thanks. =D>

jsakalos
24 Jul 2007, 2:16 PM
Hi all,

I've just uploaded version 1.0-beta3. I consider this version last version before feature freeze RC1.

I've added a lot of events, fixed d&d illogics and bugs and hopefully I've not introduced new bugs - drop a report if you find some.

Also, this is last chance for a feature request.

Enjoy,

circusfr
24 Jul 2007, 2:33 PM
Hi,
first, congratulations for this extension

I'd like to add a contextmenu after drop-node in order to choose wether the node have to copy or move.
It's a nightmare ! I would like keep your code but Javascript isn't really my business.
Could you help me please.
Thanks.

, onBeforeNodeDrop: function(e) {
dropEvent = e;
if(!this.copymoveCtxMenu){
this.copymoveCtxMenu = new Ext.menu.Menu({
id:'copyCtx',
items: [{
id: 'copy',
icon: '',
text: this.copyText,
handler: this.actDrop,
scope: this
},
{
id: 'move',
icon: '',
text: this.moveText,
handler: this.actDrop,
scope: this
},
{
id: this.cancelText,
icon: '',
text: this.cancelText,
handler: function(){this.parentMenu.hide(); return false;}
}]
});
}
this.copymoveCtxMenu.showAt(e.rawEvent.getXY());
return false;
}

, actDrop: function(item, e){
e = dropEvent;
this.copymoveCtxMenu.hide();
retval = this.onBeforeNodeDrop2(e);

if(retval === false || dropEvent.cancel === true || !dropEvent.dropNode){
targetNode.ui.endDrop();
return false;
}

targetNode = dropEvent.target;
if(dropEvent.point == "append" && !targetNode.isExpanded()){
targetNode.expand(false, null, function(){
this.completeDrop(dropEvent);
}.createDelegate(this));
}else{
this.completeDrop(dropEvent);
}
}

, onBeforeNodeDrop2: function(e){

var s = e.dropNode;
// destination node (dropping on this node)
var d = e.target.leaf ? e.target.parentNode : e.target;

// node has been dropped within the same parent
if(s.parentNode === d) {
return false;
}

// check if same name exists in the destination
// this works only if destination node is loaded
if(this.hasChild(d, s.text) && !e.confirmed) {
this.confirmOverwrite(s.text, function() {
e.confirmed = true;
this.onBeforeNodeDrop2(e);
});
return false;
}
e.confirmed = false;

var oldName = this.getPath(s)
var newName = this.getPath(d) + '/' + s.text;

var options = {
url: this.renameUrl || this.dataUrl
, method: this.method
, scope: this
, callback: this.cmdCallback
, node: s
, oldParent: s.parentNode
, params: {
cmd: 'rename'
, oldname: oldName
, newname: newName
}
};
var conn = new Ext.data.Connection().request(options);
}

, completeDrop : function(de){
var ns = de.dropNode, p = de.point, t = de.target;
if(!(ns instanceof Array)){
ns = [ns];
}
var n;
for(var i = 0, len = ns.length; i < len; i++){
n = ns[i];
if(p == "above"){
t.parentNode.insertBefore(n, t);
}else if(p == "below"){
t.parentNode.insertBefore(n, t.nextSibling);
}else{
t.appendChild(n);
}
}
n.ui.focus();
/* if(this.tree.hlDrop){
n.ui.highlight();
}
*/ t.ui.endDrop();
// this.tree.fireEvent("nodedrop", de);
}[/INDENT]

JeffHowden
24 Jul 2007, 3:36 PM
I've added a lot of events, fixed d&d illogics and bugs and hopefully I've not introduced new bugs - drop a report if you find some.

Oddly, if you try to click on another folder while there's an upload in progress then the uploaded files don't get put in the folder originally selected for the upload (in my case I clicked on a file after the upload had started).

Further, having the upload and progress indicator in the context menu is an awkward UI. I'd think that an "Upload" context item (screenshot 1) would launch a dialog of some sort with the multi-upload controls in there.

Then, upon submitting the chosen files, the dialog would be closed and a progress indicator would be added to the folder the files are being uploaded to (screenshot 2).

If at any time the user wanted to know what the progress was, they could simply mouse over the spinning loading indicator and get a quicktip with the some basic info (%, x KB of y KB, speed, time elapsed/remaining, etc.).

If they clicked on the spinning loading indicator, the dialog would open back up with the details of the upload and buttons to manage the balance of the upload. (screenshot 3, ignore the fact that it looks like a quicktip, for now).

Once the upload is complete, the dialog would be destroyed completely and the spinning loading indicator would be removed from the folder in the tree.

Alternatively, instead of a spinning loading indicator, perhaps the folder icon itself could be replaced with an animated upload indicator (like an arrow pointing up that bounces).

Since the upload/progress dialog is separate from the context menu, it could be created from scratch for every folder the user wishes to upload files to. Additionally, the behind-the-scenes bits that POST to an iframe could be abstracted out to use a separate one for each as well. This would allow the user to actually upload multiple files to multiple folders at one time without having to wait for their first attempt to finish. It'd also eliminate the awkward display of upload progress in the context menu.

I know this means a refactor of sorts, but I think it's worth it. Either way, I hope this helps.

jsakalos
24 Jul 2007, 4:12 PM
Thanks Jeff for your input.

I'll analyze it in details tomorrow. Then I'll let you know.

jsakalos
24 Jul 2007, 4:14 PM
Hi,
first, congratulations for this extension

I'd like to add a contextmenu after drop-node in order to choose wether the node have to copy or move.
It's a nightmare ! I would like keep your code but Javascript isn't really my business.
Could you help me please.
Thanks.


Hmmm, it's quite a doing...

I'll look what can be done about it and then I'll let you know.

jsakalos
25 Jul 2007, 1:19 AM
Oddly, if you try to click on another folder while there's an upload in progress then the uploaded files don't get put in the folder originally selected for the upload (in my case I clicked on a file after the upload had started).




I was trying to reproduce this with no success. Once the upload is started then there is no chance to change the target directory.

The intended behavior is that if you right click a directory and then upload, files go to that directory. If you right click a file and then upload, files go to right-clicked file parent directory (same place as right-clicked file).

circusfr
25 Jul 2007, 1:19 AM
Hello,

For the frenchies and others, translation for treePanel and UploadForm

For UploadForm, it would be nice to add some code into Ext.ux.uploadForm.js and change some lines.


// {{{
// defaults
pgSizeText: 'Size/Total'
, pgSpeedText: 'Speed'
, pgSpeedAvgText: 'Avg. speed'
, pgEtaText: 'Rem. time'
, addButtonText: 'Add...'
, clearAllText: 'Clear all'
, uploadText: 'Upload'
/source/locale/ext-lang-**.js


if(Ext.ux.FileTreePanel){
Ext.apply(Ext.ux.FileTreePanel.prototype, {
renameText: 'Renommer'
, deleteText: 'Supprimer'
, uploadText: 'Envoyer'
, reloadText: 'Rafra&icirc;chir'
, newdirText: 'Nouveau dossier'
, expandText: 'Tout d&eacute;plier'
, collapseText: 'Tout replier'
, openText: 'Ouvrir'
, openPopupText: 'Ouvrir en popup'
, openSelfText: 'Ouvrir dans cette fen&ecirc;tre'
, openBlankText: 'Ouvrir dans une nouvelle fen&ecirc;tre'
, errorText: 'Erreur'
, existsText: 'Le fichier <b>{0}</b> existe d&eacute;j&agrave;'
, overwriteText: 'Voulez-vous le remplacer ?'
, confirmText: 'Confirmez'
, uploadFileText: 'Envoyer un fichier'
, reallyWantText: 'Voulez-vous vraiment'
, rarrowKeyName: '<img src="../img/silk/icons/arrow_right.png" align="absbottom">'
, larrowKeyName: '<img src="../img/silk/icons/arrow_left.png" align="absbottom">'
, deleteKeyName: 'Suppr'
});
}

if(Ext.ux.UploadForm){
Ext.apply(Ext.ux.UploadForm.prototype, {
pgSizeText: 'Taille/Total'
, pgSpeedText: 'Vitesse'
, pgSpeedAvgText: 'Vitesse moyenne'
, pgEtaText: 'Temps restant'
, addButtonText: 'Ajouter'
, clearAllText: 'Tout retirer'
, uploadText: 'Envoyer'
});
Just a question about the accents, is it necessary to write their HTML code ?

jsakalos
25 Jul 2007, 1:42 AM
Since the upload/progress dialog is separate from the context menu, it could be created from scratch for every folder the user wishes to upload files to. Additionally, the behind-the-scenes bits that POST to an iframe could be abstracted out to use a separate one for each as well. This would allow the user to actually upload multiple files to multiple folders at one time without having to wait for their first attempt to finish. It'd also eliminate the awkward display of upload progress in the context menu.

I know this means a refactor of sorts, but I think it's worth it. Either way, I hope this helps.

Yes, this would be ideal. However, there is one problem here. Ext would create as many iframes as necessary for concurrent uploads but I haven't found an easy way of getting a reference to them. Therefore I compromised, assuming there is only one upload at a time, to get the iframe by Ext.get(document.body).select('iframe.x-hidden').item(0).

The purpose of getting the reference is to have the clean method to stop upload in progress and to remove the iframe to avoid memory leaks:


if(this.iframe) {
try {
this.iframe.dom.contentWindow.stop();
this.removeIframe.defer(250, this);
}
catch(e) {}
}
If I wanted to to implement the concurrent uploads I'd need to override doFormUpload method of Ext Connection class and maybe other methods of other classes too.

Maybe I'll do ;)

jsakalos
25 Jul 2007, 2:06 AM
Hello,

For the frenchies and others, translation for treePanel and UploadForm

For UploadForm, it would be nice to add some code into Ext.ux.uploadForm.js and change some lines.

Just a question about the accents, is it necessary to write their HTML code ?

First of all, thank you very much for translating and sharing the translation.

FileTreePanel has (hopefully) all localizable texts in class variables and they are not likely to change too much (there was one change: newDirText -> newdirText).

For UploadForm I need to scan the code and remove all hard-coded strings to class vars. I'll let you know when done.

Re accents: If you use UTF-8 encoding it's not necessary to encode 'em as html entities, at least I haven't encoded 'em for Slovak language and it works.

jsakalos
25 Jul 2007, 4:03 AM
... a progress indicator would be added to the folder the files are being uploaded to (screenshot 2).



Look at it now.

JeffHowden
25 Jul 2007, 11:55 AM
Yes, very nice.

vahala
25 Jul 2007, 10:12 PM
where is the source code?
where is the source code?

pluesch0r
25 Jul 2007, 10:45 PM
http://aariadne.com/filetree/

pluesch0r
26 Jul 2007, 1:36 AM
Say, jsakalos .. what if someone were to disable DD in the TreePanelConfig? Over here, that throws an error in line 1019 (this.dragZone).

Furthermore .. is there a way to change the UploadDialog icons?

Right now, I'm struggling with using your readymade ContextMenu functions in my grid .. it would be great if we could find a way to get this functions work (i.e. remove, rename) without having to write the virtually same code twice or thrice (what if someone wants the controls in a panel, for example?) ...

jsakalos
26 Jul 2007, 1:59 AM
Say, jsakalos .. what if someone were to disable DD in the TreePanelConfig? Over here, that throws an error in line 1019 (this.dragZone).

Done.


Furthermore .. is there a way to change the UploadDialog icons?
They are defined in Ext.ux.UploadForm



Right now, I'm struggling with using your readymade ContextMenu functions in my grid .. it would be great if we could find a way to get this functions work (i.e. remove, rename) without having to write the virtually same code twice or thrice (what if someone wants the controls in a panel, for example?) ...Although risky, you could try to use contextMenu property of FileTreePanel.

pluesch0r
26 Jul 2007, 2:16 AM
They are defined in Ext.ux.UploadForm

I meant when configuring the FileTreePanel - as i don't see a way of doing this without hacking the FileTreePanel code - the only thing that gets handed over from the FileTreePanel config to the UploadDialog (icon-wise) is the iconPath ..

jsakalos
26 Jul 2007, 4:53 AM
I meant when configuring the FileTreePanel - as i don't see a way of doing this without hacking the FileTreePanel code - the only thing that gets handed over from the FileTreePanel config to the UploadDialog (icon-wise) is the iconPath ..

You can create UploadForm with custom icons in advance and then you can pass it as uploadForm config option to FileTreePanel. Then the default doesn't get created as yours already exists.

jsakalos
26 Jul 2007, 5:12 AM
Further, having the upload and progress indicator in the context menu is an awkward UI. I'd think that an "Upload" context item (screenshot 1) would launch a dialog of some sort with the multi-upload controls in there.

Hi Jeff,

I tried to remove upload controls from context menu and put 'em to a "dialog" (floating layer in fact) and I found out that this is much less user friendly as to have it in context menu. There are more clicks required for same action and it's also a bit confusing.

If you're interested you can set config option uploadPostition:'floating' and pgCfg.target:'under' to see it. However, this is not fully completed but it gives you a touch-and-feel of such UI.

jsakalos
26 Jul 2007, 5:16 AM
If at any time the user wanted to know what the progress was, they could simply mouse over the spinning loading indicator and get a quicktip with the some basic info (%, x KB of y KB, speed, time elapsed/remaining, etc.).


I'll probably do this as a onmousover popup for node the files are uploading to. Then it would be possible to (optionally) hide context menu on upload start.

chuka
26 Jul 2007, 7:44 AM
Hi Jsakalos~
you've done a nice job. i'v really impressed cause i've been waiting long time such a simple and nice file management~
i saw your demo it was great, but i didn't find any donwload link or publishment,
where i can get and play with your work~ or it will be commercial one?

jsakalos
26 Jul 2007, 7:46 AM
Hi Jsakalos~
you've done a nice job. i'v really impressed cause i've been waiting long time such a simple and nice file management~
i saw your demo it was great, but i didn't find any donwload link or publishment,
where i can get and play with your work~ or it will be commercial one?

It's still beta but you can look in the source code of demo page which files you need and you can get them from there.

jsakalos
26 Jul 2007, 2:00 PM
Hi all and Jeff,

I've implemented some behavioral changes suggested by Jeff. Now it works as follows:



right-click to get context menu
add files for upload
click upload button
context menu hides
jumping arrow on upload target folder indicates upload in progress
to get info on progress hover mouse on target folder name
upload controls on context menu are disabled while uploading

Let me know what do you think about it.

pluesch0r
26 Jul 2007, 3:07 PM
Looks really nice. I like it.

The only thing that's bugging me is an error in FireBug
Node was not found" code: "8 when the upload is finished. Furthermore, my setup doesn't give me upload information, so the hovered statistic is not really useful for me (this should be linked with progressBar: false or something). It would also be nice to just clear the contextmenu of the uploaded-file information if everything went as planned and all files were uploaded.

JeffHowden
26 Jul 2007, 3:45 PM
right-click to get context menu
add files for upload
click upload button
context menu hides
jumping arrow on upload target folder indicates upload in progress
to get info on progress hover mouse on target folder name
upload controls on context menu are disabled while uploading

Let me know what do you think about it.

This is coming along very nicely. A couple of points:


Only show the buttons, files being uploaded, cancel buttons, etc. on the context menu if right-clicking on the folder currently being uploaded to. For all others, indicate an upload is in progress.
When the upload completes, reset the upload portion of the context menu.

jsakalos
26 Jul 2007, 4:43 PM
This is coming along very nicely. A couple of points:

Only show the buttons, files being uploaded, cancel buttons, etc. on the context menu if right-clicking on the folder currently being uploaded to. For all others, indicate an upload is in progress.
When the upload completes, reset the upload portion of the context menu.

Re 1: I'll try.
Re 2: I thought about it but if you get errors these errors are displayed by file names. Icon turns to exclamation and tooltip of the icon displays server error message. What I could to is to remove successfully uploaded files and keep only errors. To tell full truth, I'm keeping the file list for developing phase as it's easier (lazy me) to re-upload files for testing.

jsakalos
26 Jul 2007, 4:50 PM
Looks really nice. I like it.

The only thing that's bugging me is an error in FireBug
Node was not found" code: "8 when the upload is finished. Furthermore, my setup doesn't give me upload information, so the hovered statistic is not really useful for me (this should be linked with progressBar: false or something). It would also be nice to just clear the contextmenu of the uploaded-file information if everything went as planned and all files were uploaded.

Part of the answer is in the previous post (about cleanup). I'll try to turn off all this progress stuff tomorrow and see if it works well and if not I'll improve my ifs ;).

I'm also getting this code 8 error from time to time w/o any other consequences. When I stabilize the code I'll look what it could be.

jsakalos
27 Jul 2007, 2:47 AM
Part of the answer is in the previous post (about cleanup). I'll try to turn off all this progress stuff tomorrow and see if it works well and if not I'll improve my ifs ;).

I've done this. If you don't want progress info just don't pass any pgCfg object and there will be no server calls nor popups.

Let me know if there is any problem.

stever
30 Jul 2007, 5:02 PM
Is there a download page for this?

jsakalos
31 Jul 2007, 4:48 AM
Is there a download page for this?

It's still beta so there is no "package" yet but you can see source of demo page to find out which files you need and get 'em from demo page.

abecciu
31 Jul 2007, 5:51 AM
Hi!

The widget looks great!! I relly want to try it out. But first, I have a couple of questions:

1) Why use POST to retrieve the data from the server?

2) Can the dependency on Ext.ux.UploadForm be removed?


Thanks for the hard work!

jsakalos
31 Jul 2007, 9:08 AM
Hi!

The widget looks great!! I relly want to try it out. But first, I have a couple of questions:

1) Why use POST to retrieve the data from the server?

2) Can the dependency on Ext.ux.UploadForm be removed?


Thanks for the hard work!

Re 1: Would you prefer to use GET? Why?

Re 2: If you create your uploader and then you pass it as uploadForm:youruploader then you don't need Ext.ux.UploadForm. I quite don't get why you would do that...

AlexJG
12 Aug 2007, 1:43 PM
Jozef
I have been using your tree widget and its great :)

i have run into a minor snag and have a suggestion.

I am using the tree in a dialog thats never destroyed, its just hidden and reused. The problem is I need to refresh the tree every time the dialog is displayed but can't see a 'reload' method anywhere, unless I have missed it.

Regards

Alex

1314

AlexJG
12 Aug 2007, 1:57 PM
Jozef
I have been using your tree widget and its great :)

i have run into a minor snag and have a suggestion.

I am using the tree in a dialog thats never destroyed, its just hidden and reused. The problem is I need to refresh the tree every time the dialog is displayed but can't see a 'reload' method anywhere, unless I have missed it.

Regards

Alex


Solved on IRC

Thanks Jozef

Alex

hunkybill
14 Aug 2007, 9:07 AM
Part of the answer is in the previous post (about cleanup). I'll try to turn off all this progress stuff tomorrow and see if it works well and if not I'll improve my ifs ;).

I'm also getting this code 8 error from time to time w/o any other consequences. When I stabilize the code I'll look what it could be.


Hi,

I am now getting this Firebug message too. FF Linux, latest browser.. my Ruby back-end is not reporting anything wrong.. the uploads are working fine..

Any idea on what could be the cause of this? I have completely eliminated the progress code as I do not use PHP, so I am pretty much looking too processResponse function for some sort of idea which Node is in question.

Any update on this most appreciated.

Thanks

Dave

jsakalos
14 Aug 2007, 11:09 AM
Hi,

I am now getting this Firebug message too. FF Linux, latest browser.. my Ruby back-end is not reporting anything wrong.. the uploads are working fine..

Any idea on what could be the cause of this? I have completely eliminated the progress code as I do not use PHP, so I am pretty much looking too processResponse function for some sort of idea which Node is in question.

Any update on this most appreciated.

Thanks

Dave

Hi Dave,

are you using latest code? (I haven't changed anything for 2-3 days). If not please try to re-download. I guess I was doing something about this a 7-10 days ago.

Cheers,

hunkybill
14 Aug 2007, 12:06 PM
Hi Dave,

are you using latest code? (I haven't changed anything for 2-3 days). If not please try to re-download. I guess I was doing something about this a 7-10 days ago.

Cheers,


Hi,

Um, no. Last time I d'loaded I noticed you had moved the onSuccess/onFailure code into one processResponse function, maybe ten days ago? I will try latest version and see if that eliminates this minor hiccup...


Thanks

gelleneu
21 Aug 2007, 12:55 AM
Sorry, but I can't find any download link for the Ext.FileTreePanel on these page:

http://aariadne.com/filetree/

Where can i find it? Thanks for your help!

jsakalos
21 Aug 2007, 2:42 AM
Sorry, but I can't find any download link for the Ext.FileTreePanel on these page:

http://aariadne.com/filetree/

Where can i find it? Thanks for your help!

Look at html source of the page which files you need (e.g. Ext.ux.FileTreePanel.js) and append it to url (e.g. http://aariadne.com/filetree/Ext.ux.FileTreePanel.js).

gelleneu
21 Aug 2007, 3:05 AM
Thank you. I have done so, but i thought, there is another way, perhaps an example or so.
Because i can't customize it so, that it works:

Where do the data come from? (where is the root directory specified?)

In your example, there is a php file as datasource, but what does these php file do exactly?

jsakalos
21 Aug 2007, 11:13 AM
Thank you. I have done so, but i thought, there is another way, perhaps an example or so.
Because i can't customize it so, that it works:

Where do the data come from? (where is the root directory specified?)

In your example, there is a php file as datasource, but what does these php file do exactly?

You can use Firebug to see what is a request to the server and what is the response. I do not provide any support for server side scripts on this forum. If you want my php scripts send me a pm.

q_no
28 Aug 2007, 3:24 AM
Hi jsakalos,

I'm a bit confused about the current version of this widget. The wiki says beta2 (The new Ext.ux.UploadForm has been integrated into the context menu. Not for serious use yet.) and this thread says beta3 is out.

Is the integration of Ext.ux.UploadForm complete and ready for use? I would like to make it work in my app, including a progressbar as shown in the uploadform demopage.
I just downloaded the widget from your demopage, but I'm not sure if this file is really the latest version. :s and furthermore I don't have an idea how to enable the small progress-dialog, never mind configuring the widget to call a function to read the progress...

pierrot
28 Aug 2007, 4:05 AM
Hi Jozef,

First of all thanks for the good work you are providing to the community =D> I like your Filetree extension and already use it, however I was wondering if you have any plan for a more "formal" packaged version like a tarball with icons and so on. I guess even if some of us can figure out how to download, install and use from the demo page, most will feel lost trying to set up things :-?

Cheers,
Pierre.

jsakalos
28 Aug 2007, 9:20 AM
Hi Jozef,

First of all thanks for the good work you are providing to the community =D> I like your Filetree extension and already use it, however I was wondering if you have any plan for a more "formal" packaged version like a tarball with icons and so on. I guess even if some of us can figure out how to download, install and use from the demo page, most will feel lost trying to set up things :-?

Cheers,
Pierre.

Yes. Still waiting for some bugs plus documentation parser. Then I'll create package.

jsakalos
28 Aug 2007, 9:27 AM
Hi jsakalos,

I'm a bit confused about the current version of this widget. The wiki says beta2 (The new Ext.ux.UploadForm has been integrated into the context menu. Not for serious use yet.) and this thread says beta3 is out.

Is the integration of Ext.ux.UploadForm complete and ready for use? I would like to make it work in my app, including a progressbar as shown in the uploadform demopage.
I just downloaded the widget from your demopage, but I'm not sure if this file is really the latest version. :s and furthermore I don't have an idea how to enable the small progress-dialog, never mind configuring the widget to call a function to read the progress...

Yes they are latest and quite stable. I don't expect big changes before going stable. I'm still hoping for documentation parser to create package with documentation extracted from source code.

All documentation is still in the source code. From there:


/*
* @cfg {Boolean} floating Set to true to create UploadForm in floating layer
* @cfg {Object} pgCfg Progress configuration object. Do not pass if you don't want progress info.
* @cfg {Object} pgCfg.map Progress properties mapping (see also defaultProgressMap)
* @cfg {Integer} pgCfg.maxPgErrors Maximum errors before progress requests to server are stopped (defaults to 10)
* @cfg {Object} pgCfg.options Options for progress request call
* @cfg {Boolean} pgCfg.progressBar true to create progressBar
* @cfg {Integer} pgCfg.interval Interval for sendig progress info request to server in ms (defaults to 1000)
* @cfg {String/HTMLElement/Element} pgCfg.progressTarget Where to display progress details
* @cfg {String} pgCfg.uploadIdName Name for the hidden field with upload Id
* @cfg {String} pgCfg.uploadIdValue Value for the hidden field with upload Id. Set to 'auto' to auto-generate
*/

Grimsk
28 Aug 2007, 10:01 AM
congrat Jozef for your new title "Ext JS - Core Developer" !!

keep your good work! its apreciate

jsakalos
28 Aug 2007, 12:57 PM
Thanks Grimsk,

not only new title but also new work...;)

Interesting!

Cheers,

q_no
29 Aug 2007, 1:41 AM
I have one suggestion for the FileTreePanel. At the moment the class sends the commands to a server-script defined in the config using Ext.data.Connection().request. In some cases it would be usefull to be able to define/pass a function to deal with all actions (rename,delete,...).

For instance: I have a completely independend ajax framework in the background and I had to override some of your functions to redirect the actions to my ajax-framework instead of using the Ext.data.Connection.

It could like this:


if (this.handlerFunction) {this.handlerFunction(options);} else {
var conn = new Ext.data.Connection().request(options);
}


The var options contains all neccessary data/references (for third party ajax libs) to execute the command(s) and send the response back to FileTreePanel instance. The only problem is, that you would have to change the cmdCallback() function that it either accepts options, bSuccess, response as arguments or the plain response (as array/object).

What do you think about it?

jsakalos
29 Aug 2007, 10:56 AM
Well,

I was thinking exclusively Ext-way while developing the extension.

One thing what I somehow cannot grasp: Even if you have something else sitting there by Ext, is it a problem if Ext makes it's own request? In another words, is there any specific reason not to use Ext.data.Connection? Ext is there anyway.... :-?

Re cmdCallback: I can be overriden or you can listen to events.

Anyway, solution you propose is elegant and feasible for calling the request and I don't see any problem with cmdCallback. Should you replace default request with handlerFunction you'd need to write also your own callback function. cmdCallback is part of options and it wouldn't be executed.

q_no
29 Aug 2007, 11:44 AM
Well,

I was thinking exclusively Ext-way while developing the extension.

One thing what I somehow cannot grasp: Even if you have something else sitting there by Ext, is it a problem if Ext makes it's own request? In another words, is there any specific reason not to use Ext.data.Connection? Ext is there anyway.... :-?


Yes, there is a problem ;) It breaks the whole structure of my app...I'm using xajax in the background. It does not only transfer a single array from the sever to the client per request, it can execute X commands on the client with one call. That's one of the main reasons why I use it and I don't want to start creating PHP files that deliver only one widget ;)
It's hard to explain, but believe me in some cases it makes sense to run Ext ontop of another ajax toolkit. I've made a xajax proxy, treeloader and other little helper classes that deal with ext.




Re cmdCallback: I can be overriden or you can listen to events.

Anyway, solution you propose is elegant and feasible for calling the request and I don't see any problem with cmdCallback. Should you replace default request with handlerFunction you'd need to write also your own callback function. cmdCallback is part of options and it wouldn't be executed.

Well, I've already overriden some functions that use Ext.data.connect and that's no prob atm, but it would have been cleaner to pass a function into the widget, than overriding the widget's functions :)

Anway, thanks for thinking about it :)

jsakalos
29 Aug 2007, 12:10 PM
Well, I've already overriden some functions that use Ext.data.connect and that's no prob atm, but it would have been cleaner to pass a function into the widget, than overriding the widget's functions :)

Anway, thanks for thinking about it :)

The best would be to extend FileTreePanel, override is fine for smaller changes, worst is to change original code as with this you create a branch.

So if anybody else needs configurable handlerFunction I can add it, meanwhile you can extend or override.

OK?

ns1000
10 Sep 2007, 10:34 AM
When using the rename function the widget allows the use of double dotted characters and rename into other directories. This might cause a security problem.

Ie, rename x.jpg to ValidDirectory/x.jpg succeeds apperently on the backend server. And also rename x.jpg to ValidDirectory/../../x.jpg seemed to work on the demo page.

Obviously good backend security is always important with these kind of applications.

jsakalos
10 Sep 2007, 11:26 AM
When using the rename function the widget allows the use of double dotted characters and rename into other directories. This might cause a security problem.

Ie, rename x.jpg to ValidDirectory/x.jpg succeeds apperently on the backend server. And also rename x.jpg to ValidDirectory/../../x.jpg seemed to work on the demo page.

Obviously good backend security is always important with these kind of applications.

Server strips all .. from file paths so you cannot get up, or was you able to?

adam.jimenez
13 Sep 2007, 11:03 AM
This widget looks awesome! I can't wait for it to be released.

I'll be using it with PHP - will sample php files be supplied with the package?

Keep up the great work - by far the best js file widget that I've seen.

adam.jimenez
13 Sep 2007, 11:32 AM
feature requests:

* chmod
* cut/paste files between dirs
* ctrl and shift click multiple files
* confirmation dialog when moving files
* toggle expanded view with file size/ modified date

Defaite
13 Sep 2007, 12:08 PM
Hello !

Jsakalos, I use your control and I love it ! It's a very good extension of Extjs :)

I have a problem, I success use it but I can't understand how using the uploader system.
In my php file, I get path but I can't get the name of the <input type="file"> because I don't know it.

Can you help me please?

Many thanks !

adam.jimenez
13 Sep 2007, 12:45 PM
one more

* new file (e.g blank text file)

jsakalos
13 Sep 2007, 4:38 PM
Hello !

Jsakalos, I use your control and I love it ! It's a very good extension of Extjs :)

I have a problem, I success use it but I can't understand how using the uploader system.
In my php file, I get path but I can't get the name of the <input type="file"> because I don't know it.

Can you help me please?

Many thanks !

There is quite detailed client/server communication spec on the demo page (or filetree page). You don't need names of input files (they are empty anyway if I remember well) you get 'em in $_FILES array (if you use PHP).

jsakalos
13 Sep 2007, 4:46 PM
feature requests:

* chmod
What about win servers? I use Linux - could chmod ;)

* cut/paste files between dirs
D&D doesn't do?

* ctrl and shift click multiple files
Will think about it; would be useful...

* confirmation dialog when moving files
OSes normally don't require confirm, I'm not sure about it...

* toggle expanded view with file size/ modified date
Can come with Ext 2.0 using column tree. Sure not for 1.1

* Blank file
I do not see a practical use of it. Create blank file on server, download blank file, fill it with content and upload? Seems easier to create a file with content and upload it afterwards.

adam.jimenez
14 Sep 2007, 12:17 AM
* Blank file
In the ap, I'm developing, you'd need to be able to create a blank file and then edit it on the server, without downloading.



* confirmation dialog when moving files
OSes normally don't require confirm, I'm not sure about it...

True, but OSes let you undo instead.
Dreamweaver requires confirm, as you can easily mess stuff up if you drop files into the wrong dir.

jsakalos
14 Sep 2007, 1:52 AM
For blank file I could add one call to user defined method (e.g. createCustomMenuItems) which you could use to add context menu item for this action.

For confirmation dialog: just listen to beforerename event, display confirmation dialog, and if you want to cancel return false from the handler.

poof65
15 Sep 2007, 7:28 AM
Is it possible that you send me php sources by pm ?

passager
16 Sep 2007, 4:07 PM
Hi,

I've seen the demo, it looks great, exactly what I need for my family exchange site I'm building. But where can I download the package or the files ? I was unable to find it anywhere around.

Thanks a lot

Ph.

adam.jimenez
16 Sep 2007, 11:11 PM
For blank file I could add one call to user defined method (e.g. createCustomMenuItems) which you could use to add context menu item for this action.

How would you position it or set an icon?
How about it could be an option that is disabled by default?
Which could be enabled with a custom config array.

e.g.

config=['open','separator','reload','expand','collapse','rename','delete','new file','new folder'];


For confirmation dialog: just listen to beforerename event, display confirmation dialog, and if you want to cancel return false from the handler.

That sounds good, thanks

jsakalos
17 Sep 2007, 1:49 AM
How would you position it or set an icon?
How about it could be an option that is disabled by default?
Which could be enabled with a custom config array.

e.g.

config=['open','separator','reload','expand','collapse','rename','delete','new file','new folder'];




The above mentioned custom function would be plugin-like function. You'd get all necessary arguments, it would be called in the scope of FileTreePanel and it would create any custom items (with or without icons, enabled or disabled, with pointers to custom handlers) the same way as original code does. I'd call that function just before the last separator.

Sure you'd need to write your handlers for custom items.

In another words, it would be exactly like plugins are: they usually have a mandatory function that is called by the main code and that sets up everything necessary for plugin to work.

Defaite
17 Sep 2007, 10:31 AM
Hi Jsakalos,


You don't need names of input files

I use a "for each" loop to get the files (and it's good ;) ) but I need the names to return errors of upload (c.f. your doc :) : )


{"success":false,"errors":{"ext-gen524":"File upload error."}}

jsakalos
17 Sep 2007, 10:40 AM
You get these names in $_FILES array.

Defaite
17 Sep 2007, 11:51 AM
I search, I search but I don't success to get it in $_FILES.... can you help me please ... ?

jsakalos
17 Sep 2007, 1:16 PM
$_FILES is 2 dimensional array. First index is field name and second are indexes defined here: http://www.php.net/manual/en/features.file-upload.php.

So, the name of the field you're looking for is first index.

Defaite
17 Sep 2007, 2:19 PM
Ok, I find the solution...

Thanks Jsakalos...

Defaite
18 Sep 2007, 1:11 PM
Hey,

I have a new probleme with this extension.
When I rename a file containing an accent, I get wrong caras.

Ex : I want to rename the file "Id

jsakalos
18 Sep 2007, 2:04 PM
Does your server use unicode filesystem? If not you need to implement some charset conversion. Names received from FileTreePanel are unicode.

mdempfle
19 Sep 2007, 8:04 AM
Hi,

You have written that there are problems with Apache suhosin module.
I have a flash too that reads stuff from a php files that returns a directory content.

without Apache suhosin module everything works fine. But with it nothing is returned.

Do you know if there are any settings I could can in Apache suhosin module to get this to work? I don't know which restrictions is the problem because if I cal the php directly it works fine. does Apache suhosin module filter anything from the request too (I send a login too with the flash - without this you only get a message that you have to login)?

/Michael

jsakalos
19 Sep 2007, 10:11 AM
I hadn't analyzed the suhosin issue any longer as could live w/o it. I'd just turned if off. Sorry, but that's all I know.

adam.jimenez
20 Sep 2007, 6:36 AM
Does this work with ext 2.0?

And how far away are we from an official release?

Thanks and keep up the great work

jsakalos
20 Sep 2007, 9:30 AM
No, this is 1.1.1 extension.

It's stable only doc is missing; I'm still hoping that a Ext-style doc parser will become available.

chemist458
23 Sep 2007, 9:34 AM
Dear Saki,
I love your filetree its awesome, but sadly I am having problems with IE7, as usual.
Everything works fine in Firefox, and IE except the uploading.
The file gets uploaded fine, but it does not go to its intended folder destination, thats not too bad as you can move it, but what is worse is that I get a popup security message saying click to download file, if I click it, the page refreshes, and it shows the files that I uploaded, but if I dont click the page just sits there with the uploading folder icon still on.
I presume it is the response text causing the problem, I have set my content headers to text/html as you said, but its still not working. Do I need to do send anything back to the browser except {success:"true"}?
Thanks in advance,
George

chemist458
23 Sep 2007, 10:21 AM
Dear Saki,
After a bit of reading I got my upload script to ignore the blank upload, and IE now uploads the file to the right directory, but still pops up the download file message.
Thanks,
George

chemist458
23 Sep 2007, 12:39 PM
No, IE has decided to now not upload to the right directory, it still goes to the root.
When you try another upload, it now tries to open the php file which processes the form, which if you open gives you the text of your response, thanks IE
=;
George

jsakalos
23 Sep 2007, 12:51 PM
Hi chemist458,

do you have same problems also with my demo page? If not, look what is difference between demo and your app and follow the server/client spec to the letter.

chemist458
23 Sep 2007, 3:03 PM
Dear Saki,
No I didnt have any problems with your demo page, but I have placed it inside a dialog, would that cause any problems?
With Fiddler and IE I see no response text, but with my version, I do, yet it says in your example, there should be response text, what am I doing wrong here?
George

chemist458
23 Sep 2007, 3:59 PM
Ah, I can see your response text in fiddler, which is the same as mine {"success":true}, but I notice that I am having this appended to the url, '&cmd=upload&path=root', and you dont have this in your example when I check it with fiddler. The filetree sits in a form that uses $_GET, could that be causing it?
George

chemist458
23 Sep 2007, 4:10 PM
Dear Saki,
I noticed you had your headers as text/html; and I had text/html, (so a comma at the end not a semi-colon, just to clarify) that cured the upload with IE, it now uploads without a silly popup window, it now doesnt move to the right folder, but that is because the destination is being appended to the url?
If I can cure that then it will work.
I thought I would share this info as it seems file uploading is a big subject on this forum and any info will help I feel.
Thanks for the wicked wicked extension!!
George

jsakalos
23 Sep 2007, 4:27 PM
It looks like problem with path. Your server script has to read POST variable path and move files accordingly. See the doc on demo page there is an example of it.

chemist458
23 Sep 2007, 4:29 PM
I changed $_POST['path'] to $_REQUEST['path'] and it now works perfectly.
Thanks again for this wicked extension
George

chemist458
23 Sep 2007, 4:42 PM
Dear Saki,
Concerning the progress bar, I see it is json again, but where do you get the values from to produce the json? and also is the UPLOAD_IDENTIFIER generated automatically?
George

jsakalos
23 Sep 2007, 5:02 PM
See http://pecl.php.net/package/uploadprogress for progress info and go also through UploadForm thread on this forum.

chemist458
23 Sep 2007, 5:10 PM
Ah, OK, thanks for that,
:)

chemist458
23 Sep 2007, 5:12 PM
Dear Saki,
I am an old school php v4.7.7, so I cant use it, oh well, I will look if there is a v4x version of something similar, and yes, before you say it I need to move to v5.2 ;)
George

jsakalos
23 Sep 2007, 5:17 PM
I'm afraid that only solution is to upgrade to 5.2; I don't think the uploadprogress extension is available for 4.x versions.

Foggy
24 Sep 2007, 1:51 AM
I don't think the uploadprogress extension is available for 4.x versions.
definitively not...
http://pecl.php.net/package/uploadprogress

But anyway, the OO Model in 4.x is gruesome, so you win many vantages on a update to 5.2 ;)

adam.jimenez
25 Sep 2007, 1:38 AM
No, this is 1.1.1 extension.


will it be long before there is a 2.0 version available?

jsakalos
25 Sep 2007, 1:44 AM
I'll rewrite my app and all my widgets for Ext 2.0 as soon as EXT 2.0 RCxx will be out.

adam.jimenez
25 Sep 2007, 1:48 AM
I'll rewrite my app and all my widgets for Ext 2.0 as soon as EXT 2.0 RCxx will be out.

just what i wanted to hear. thank you.

Defaite
26 Sep 2007, 10:44 AM
Hi !

I have a new problem... please don't make fun... ;)

I have implemented the filetree in a Accordion but I can't create a scroll bar when the layout is smaller than the FileTree :

http://defaite.def-blog.com/images/apercus/capt01.png

Do you have a solution ?

jsakalos
26 Sep 2007, 10:55 AM
Look at the demo page. The filetree there is also inside of info panel and it's scrollable there.

Defaite
27 Sep 2007, 12:53 PM
I find it !

I have just add autoScroll:true and fitToFrame:true in my contentPanel of Layout !

It's good ! Thanks Jsakalos

momo
30 Sep 2007, 3:58 AM
I have installed the filetree in an accordion exactly like Saki on the demo (I just copied his code and changed where necessary). All works fine in Firefox, but Internet Explorer 7 requires 2 attempts for a file-upload to work (after a screen refresh). I have tested and found the same problem on Saki's website. Has anyone been having the same problem, and have found a solution? Any feedback would be appreciated. Thanks!

jsakalos
30 Sep 2007, 11:19 AM
I have installed the filetree in an accordion exactly like Saki on the demo (I just copied his code and changed where necessary). All works fine in Firefox, but Internet Explorer 7 requires 2 attempts for a file-upload to work (after a screen refresh). I have tested and found the same problem on Saki's website. Has anyone been having the same problem, and have found a solution? Any feedback would be appreciated. Thanks!

I don't have IE7 - cannot test. IE6 works?

momo
30 Sep 2007, 8:53 PM
I'm running on Vista and don't have IE6. Will see if a friend can check for me ... or someone on the forum ?

Hory
1 Oct 2007, 2:30 PM
In Windows XP, you can install IE7 and still use older versions for testing using Multiple IE (http://tredosoft.com/Multiple_IE).

Matt
24 Oct 2007, 8:31 AM
Great extension! Do you still have plans to migrate this extension to 2.0?

Thanks!

jsakalos
24 Oct 2007, 4:16 PM
Definitely!

I will need it for my project that will move to Ext 2.0 so I have to port it. Cannot say the exact time frame yet - maybe couple of weeks.

adam.jimenez
8 Nov 2007, 3:16 PM
Definitely!

I will need it for my project that will move to Ext 2.0 so I have to port it. Cannot say the exact time frame yet - maybe couple of weeks.


how's it going?

Foggy
8 Nov 2007, 11:07 PM
It's unbelievable how impatient you quys are :)
Please let them do their work on the stable release first ;)

lesgrumels
12 Nov 2007, 7:38 AM
With a colleague, we port the FileTreePanel to ext2.0.
It's work well, we have just a little problem with the UploadForm in menu position !
The upload form DOM doesn't move to the context menu but stay in the top left of the page.
Otherwise the float position works well.
I put the correction in attachment and a screen shot of the error !
Is someone see the problem, thank you.

adam.jimenez
14 Nov 2007, 11:16 AM
Thanks for that more helpful response!

I tried to get it working but am getting the error:

this.root has no properties.

I'm trying to hook it to a div - is this the wrong approach?

http://edit.shiftcreate.com/test.php

Do you have a full example I can look at?

Thanks

jsakalos
14 Nov 2007, 12:31 PM
Do you have a full example I can look at?

Thanks

If you mean original version then http://aariadne.com/filetree. No idea about ported version.

lesgrumels
16 Nov 2007, 1:53 AM
Sorry to the late response.
This is a sample of the FileTreePanel with Ext 2.0 :
http://jimw.test.free.fr/FileTree/test.html
We have just a problem with the UploadForm in the menu, you can saw the problem with a right click on a node, the UploadForm stay in the end of the page and not move to the ContextPanel. But with the float panel, the upload form works (in the demonstration server, the upload didn't works because of restriction of the server)
Has anyone know the problem ?

For adam.jimenez :

The constructor of FileTreePanel had change to be compatible to Ext 2.0.
There a just one parameter who is the config array, and the element become a config entry : "el"

Just change :


var tree = new Ext.ux.FileTreePanel(treediv, {animate: true [...]
To :


var tree = new Ext.ux.FileTreePanel({el: treediv , animate: true [...]

adam.jimenez
16 Nov 2007, 7:22 AM
Thanks, that worked!

I now need to write up my own filetree.php, unless someone has one I could use..?

adam.jimenez
17 Nov 2007, 1:26 AM
no worries, i figured it out.

adam.jimenez
17 Nov 2007, 3:38 AM
I've got it working but have some issues:
- the right-click problem
- files don't highlight on hover .. missing css?
- no scrollbars when tree is expanded: treediv is set to overflow:auto.

also i need to a custom handler for opening files. is there a nice way of doing that without hacking the extension?

see it here:
http://edit.shiftcreate.com/test.php

adam.jimenez
17 Nov 2007, 8:40 AM
custom handler for opening files

figured this out:



tree.on('beforeopen', function(file){
alert('yo');
return false;
} );

adam.jimenez
18 Nov 2007, 2:13 AM
i need to trigger the tree to reload from the root. please help..

Matt
18 Nov 2007, 4:49 PM
lesgrumels -

Have you gotten the upload portion of the ported mod working as well? I installed your version and all appears to work fine except for the upload part. I get unexpected end of XML source, then I tried your demo and your demo returned the same results. Any suggestions?

Thanks!
Matt

Matt
18 Nov 2007, 8:57 PM
Hi, the "Add" button for file upload under floating menu mode is not working with IE7. Any ideas of suggestions? I would love to just use the menu option anyway, but it does not attach itself with the rest of the menu. Any help would be appreciated.

http://mattstamant.com/dsm

Thanks
Matt

lesgrumels
19 Nov 2007, 2:56 AM
Have you gotten the upload portion of the ported mod working as well? I installed your version and all appears to work fine except for the upload part. I get unexpected end of XML source, then I tried your demo and your demo returned the same results. Any suggestions?

The error "unexpected end of XML" is an error that the JSON is not correctly formed !(typically an error with php, it's the cause of the problem in my demo). I correct it !


Hi, the "Add" button for file upload under floating menu mode is not working with IE7. Any ideas of suggestions? I would love to just use the menu option anyway, but it does not attach itself with the rest of the menu. Any help would be appreciated.

I didn't test with IE7, because I work with Linux. The menu option it's the problem we didn't find the solution, If someone has idea, any suggestion will be appreciated.
Otherwise the floating option works !

Matt
19 Nov 2007, 6:55 AM
Hi -

Yes, I finally got all of my backend scripts working as well and it was a php problem.

If anyone has a solution to the IE 7 bug of not allowing users to add files to upload under floating menus (the only one that works right now), please let me know. I love this extension, but if the majority of users cannot use it, then obviously it is not a viable solution. Thanks for any help!

penriver
21 Nov 2007, 7:32 PM
it's very convenience and powerful,could you give a link to download it?

jsakalos
22 Nov 2007, 11:00 AM
it's very convenience and powerful,could you give a link to download it?

Use this technique for now: http://extjs.com/forum/showthread.php?p=60093

adam.jimenez
27 Nov 2007, 4:21 PM
i need to trigger the tree to reload from the root. please help..


this was quite easy - just needed to do


root.reload();

adam.jimenez
27 Nov 2007, 4:23 PM
I still have problems with missing scrollbars and right-click menu.

I hope someone's found a solution...

Matt
28 Nov 2007, 7:46 AM
I too am having problems with missing scroll bars and the inability for IE7 to select a file to upload...Any ideas anyone???

adam.jimenez
20 Dec 2007, 10:01 AM
Has anyone got any closer to a fully working ext 2 version of the FileTree widget?

adam.jimenez
20 Dec 2007, 10:14 AM
I've come up with a fix for the scrollbar issue;
add this to your page:




<style>
x-panel-body{
overflow:auto;
}
</style>


There is probably a neater way, but it works.

ps742626
24 Dec 2007, 9:33 AM
can someone point me to the download link for this extension?

i am here: http://extjs.com/learn/Extension:FileTree

and i don't see the download link for the extension. the download link at the top of the page just takes me back to the main ext download page; but how can i get the extension?

jsakalos
26 Dec 2007, 4:44 AM
[Ver. 1.0-beta2] Ext.ux.UploadForm File Upload Widget - Page 13 - Ext JS Forums (http://extjs.com/forum/showthread.php?p=60093)

kompset
3 Jan 2008, 7:43 AM
Hello!

How it is possible to download FileTree Widget?
Me interests UploadForm File
Where it is possible to download UploadForm File?

P.S. Sorry, I badly speak in English:(

jsakalos
3 Jan 2008, 9:01 AM
http://extjs.com/forum/showthread.php?p=60093

kompset
3 Jan 2008, 11:40 AM
Thank you very much. / Ďakujem

cafebabe
11 Jan 2008, 12:04 PM
I realize I will probably evoke a needing to be slapped response for asking but I have to know. We are currently running the filetree that runs on ext 1.1 in an iframe inside the 2.0 environment and was wondering when there would be dev time for getting the 2.0 version of filetree out the door. I would not mind contributing my own time to aid in this as it would help me get up to speed on ext (new to ext) and maybe speed up the time line. In this thread I read that it's on the radar as 2.0 is now stable, but haven't heard any more about this.

thanks for your time and a great file browser.

jsakalos
11 Jan 2008, 6:31 PM
I'm now finishing second phase of my project (dead line is end of January) and then I will port first phase of it (still running on 1.1) to Ext 2.0. As UploadForm and FileTree are used in that first phase I'll port them both. I'd expect it can happen around the mid of February.

kiprud
12 Jan 2008, 7:02 AM
Can you give an archvie which in all files needed please ? and how can i change temp root, in wihch file i can configure the path whete filetreepanel starts
thks, best regards

jsakalos
12 Jan 2008, 12:08 PM
How to download: [Ver. 1.0-beta2] Ext.ux.UploadForm File Upload Widget - Page 13 - Ext JS Forums (http://extjs.com/forum/showthread.php?p=60093)

All documentation is is comments of source files.

yangkaer
22 Jan 2008, 12:21 AM
my web disk

http://www.bkwork.com/ttw/UserInfo/admin/0001.jpg

adam.jimenez
19 Feb 2008, 6:34 AM
Hey guys,

How's it going? Anyone got any further with porting to Ext 2.0?

girishbabu
23 Feb 2008, 12:12 AM
Hi, first up, great look and feel. I have this integrated with a servlet in the backend. Works fine on Firefox but there is a problem with IE. All functions work seamlessly on all browsers except the actual Upload. On IE, whenever I make an upload call, I get a "File Download - Security Dialog" for my Servlet. Any thoughts on why this could be the case.
(PS: I do not have the php for tracking the upload - uploadform/progress.php, though it is still defined in the *.js file). Any thoughts on this behavior ?

jsakalos
23 Feb 2008, 1:10 AM
I'd like to help you but I don't use Micro$oft products. Anyway, uploadprogress can be somehow disabled in javascript.

gueunier
25 Feb 2008, 10:45 AM
I try FileTree Widget to map an alfresco repository and i've to modify the script to make it run :

filetree.js(line 90) : I have to pass the iconPath " , iconPath: iconPath"
var tree = new Ext.ux.FileTreePanel(ipTree.body, {
...
, iconPath: iconPath
, readOnly: false
, containerScroll: true
...


Ext.ux.FileTreePanel(line 74) : I have to use get methode instead of post to have the correcte utf-8 encoding. I don't know if it is an alfresco or ExtJs trouble :
if(config && !config.loader) {
config.loader = new Ext.tree.TreeLoader({
dataUrl: config.dataUrl,
requestMethod:'GET'
});
May be you can include those modifications in your next release.
CU Seb ...

Emachan
26 Feb 2008, 2:40 AM
Greeting to all of you.
Do you have any good new about upload form in the context menu in filetree porting to Ext 2.0?

I am experiencing the same error as many of you, uploadform is at the end of the page, if I set
uploadPosition: 'menu'

I spent last 2 hours reading all this thread, but it seems there is no new hint yet.
I hope the solution is not just setting
uploadPosition: 'floating'Thank you all for your effort and help

EMA

jsakalos
26 Feb 2008, 7:03 AM
Time of porting comes closer and closer. I have to finish the production version of one phase of my project (couple of weeks, hopefully 2) and then I'll port it.

Escaper
2 Mar 2008, 6:53 PM
I found click event would be fired twice, I don't know why.
I'm still testing and try to find what's wrong with it.

I Tested and found:
I think it maybe caused by fireevent('render', ... ), if I renamed 'render' event to 'afterrender', everything is OK.

jsakalos
3 Mar 2008, 2:23 AM
Is this behavior caused by the extension or is it observable also for standard trees?

juzy
9 Mar 2008, 9:17 AM
Hi! When there will be version 2.0?

jsakalos
9 Mar 2008, 11:16 AM
Soon. I've already done the add button. Still a lot to port though... ;)

jsakalos
11 Mar 2008, 6:01 AM
See some news here: [In Progress] Saki's FileTree for Ext 2.0 (http://extjs.com/forum/showthread.php?t=29090)

jsakalos
16 Mar 2008, 8:34 PM
Beta 1 is out: [Beta 1] Saki's FileTree for Ext 2.0 (http://extjs.com/forum/showthread.php?t=29090)

Enjoy.

gibs
25 Mar 2008, 1:17 AM
Hi Saki

am using ext js it's ultimate one!

saki i'm facing problem while generating tree with dynamic data.
can u please help me to sort out the same. I've seen JSON implementation using a JSP but not getting exactly how to write this data jsp and bind it to JS

thanks in advance :">,
GIBS

jsakalos
25 Mar 2008, 1:40 AM
I'd be glad if I could help you but 1) This query is not FileTreePanel related and 2) I know nothing about JSP.

Better would be to post this query to Help Forum, perhaps there are users who use JSP.

DJERO77
5 Apr 2008, 2:28 AM
hi,

I am looking for a way to recover from the node ID in Ext.ux.FileTreePanel.js.
I try this but it does not work ...


var node = editor.editNode;

if(newName === oldName || editor.creatingNewDir) {
editor.creatingNewDir = false;
return;
}
var path = this.getPath(node.parentNode);
var options = {
url: this.renameUrl || this.dataUrl
, method: this.method
, scope: this
, callback: this.cmdCallback
, node: node
, oldName: oldName
, params: {
cmd: 'rename'
// , oldname: path + '/' + oldName
// , newname: path + '/' + newName
,newname: newName
,node: editor.editNode.getPath(this.node)
}
};

Can you help me ?

jsakalos
5 Apr 2008, 3:18 AM
I gueess id is public property, so node.id.

DJERO77
5 Apr 2008, 3:47 AM
thank you very much

Eduardo
7 Apr 2008, 2:44 AM
Hello,

I've a problem

I've a FileTree and a UploadForm. It works perfectly but I've modified something that I need so the XML with the data does not update directly. This was I wanted to do...but...
If the XML with the data does not update directly the FileTree neither...

so I need write in the FileTree the files I uploaded with the UploadForm though it was not getting update the XML :-S

sorry for my english...I don't know if you understand me...can you help me? please

thanks

jsakalos
7 Apr 2008, 5:24 AM
FileTree doesn't support XML, it is JSON based. If you want XML you have to code it yourself.

Eduardo
8 Apr 2008, 12:39 AM
FileTree doesn't support XML, it is JSON based. If you want XML you have to code it yourself.

thanks. It's solved.
The problem is: how to add a nodo (a child) in the tree when I use the UploadForm.
I want add in the tree (directly without use the XML o Json), every files what I upload with the UploadForm.

thanks

jsakalos
8 Apr 2008, 3:18 AM
If you upload using context menu you do not need to do anything. Tree is refreshed after upload and nodes new files are displayed.

Eduardo
9 Apr 2008, 9:50 PM
If you upload using context menu you do not need to do anything. Tree is refreshed after upload and nodes new files are displayed.

hello again jsakalos,

you have reason...but...I have needed to change the context menu...it does not work in the same way....but it works good for me...so I need to modify the context menu to add childrens using a call to a new function....
I think it's not very usual, but I need do it :-S

thanks

jsakalos
10 Apr 2008, 3:04 AM
@Eduardo

I wouldn't add any nodes in javascript I'd just refresh the tree branch you've uploaded into. The server then returns correct structure.

girishbabu
15 Apr 2008, 3:33 AM
Hi Saki.. had a question.. I have a modified version of the filetree where the right click context has additional menu items. One of them calls a different page (JSP) and passes the request parameters. In that, I add a child under the passed node (similar to an upload). The only difference is that if I had used the built-in upload, it would have refreshed the tree. Now, I need to call the same 'reload' functionality for this node from that page. Any idea how I can get a reference to the same from the JSP or even the actual node object reference ?

jsakalos
15 Apr 2008, 5:15 AM
What about node.reload() on the parent of that new child?

girishbabu
15 Apr 2008, 7:42 AM
Lemme rephrase my scenario :) ... the new child is not added on the tree directly. I pass the parent reference (DB key) and my JSP creates the child (makes an entry in DB with appropriate parent-child relationship). At this point, I wanted the tree refreshed (using the same node.reload() function). To do this, my thought was I can get the node reference by using document.getElementById(parentNode) and then perform a reload() on that. My questions are -
1. Is my approach correct ? If so, what should be the 'parentName' be passed because I'm assuming that I cannot pass the node text ?
2. Any other method ?

Thanks much in advance !

jsakalos
15 Apr 2008, 8:42 AM
First of all, if you need to get a DOM element use Ext.get, Ext.getDom or Ext.fly methods. Second, the above are Elements, not Nodes, you need to grab a reference other way. And third, if JSP creates child and you know it was successful, you don't need another request to server to reload node, you can just create it in tree.