[Beta 1] Saki's FileTree for Ext 2.0

Hi all,

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

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

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

Single upload mode takes all inputs from store, creates one form, appends inputs to it and uploads files in one single request.
Multiple upload mode creates one form for one input and uploads each file in its own request. Other features:

extends Ext.util.Observable

start/stop all or individual uploads

set path to upload to

full set of events, both for individual files and whole upload

upload progress support (not working for more than one file with PHP uploadprogress backend)

client/server communication specification is same as for my Ext 1.x version

Ext.ux.UploadPanel:
Provides user interface to the above uploader with a couple of buttons, DataView to display the upload queue and status of files and mainly the store used by both DataView and FileUploader. UploadPanel was designed to fit to a menu therefore it is small and narrow by design. Other features:

extends Ext.Panel

add files to queue, queue display

remove files from queue one-by-one or all at once

UI to stop whole upload or individual files

icons for many file types

icons for status of files

Ext.ux.BrowseButton by loeppky:
This class was not written by me, I just used it because it is good and working and because loeppky promised support and debugging if necessary.

Ext.ux.FileTreeMenu:
It is (context) menu for FileTreePanel that contains UploadPanel for file uploads and other items for basic file operations such as:

optional top toolbar in addition to context menu (especially good for Opera users)

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

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

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

Enjoy!

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

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

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

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

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

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

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

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

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

Ext is licensed under LGPL what very shortly means:

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

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

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