FileTreePanel Forum Thread
Previous implementation (Ext 1.x)
View Sources:
Ext.ux.FileTreePanel.js
Ext.ux.FileTreeMenu.js
Ext.ux.UploadPanel.js
Ext.ux.form.BrowseButton.js
Ext.ux.FileUploader.js
filetree.html
filetree.js
filetree.css
Silk Icons
Downloads:
filetree.tar.bz2Info: I want Saki's FileTree backend
FileTreePanel is client-server application where client (browser) provides the user interface (UI) which displays the tree and context menu, handles drag & drop operations, etc. The filesystem that is displayed and managed by the UI is stored on a server.
Therefore, we need some communication layer between client and server. Client sends a command to server, server processes this command and responds with a result. Client in turn processes the response and display results.
All this communication is running in the background by Ajax (XMLHttpRequest) calls. The XMLHttpRequest is not used directly but the Ext JS - JavaScript Library ajax layer is used for this purpose.
Client requests data from server with standard POST method and server is expected to respond with JSON (JavaScript Object Notation) string and appropriate HTTP headers.
cmd rename newname root/abc.txt oldname root/a.txt
Content-Type: application/json, charset=utf-8
{"success":true}
{"success":false,"error":"Cannot rename file root/a.txt to root/abc.txt"}
The response headers are same as above for all responses, unless mentioned otherwise, and they are therefore omitted from the following specification.
The server side filesystem that is managed by FileTreePanel starts at a directory that is defined by the server for security purposes. Client cannot change its root by any command.
/data/userfiles/root_for_client/dir1/file1 /data/userfiles/root_for_client/dir1/file2 /data/userfiles/root_for_client/dir2/file1 /data/userfiles/root_for_client/dir2/file2
root_for_client/dir1/file1 root_for_client/dir1/file2 root_for_client/dir2/file1 root_for_client/dir2/file2
Now, when client asks server "gimme nodes in root_for_client
" the
server prepends absolute or relative root path, reads relevant part of the filesystem
and returns nodes. In our example, the server would prepend /data/userfiles/
to each client's request.
It is server job to handle invalid requests or requests that can be potentially insecure like ones starting with / or .. The same must be true for all commands sent from the client.
cmd get path root/a
[ {"text":"b","iconcls":"folder","disabled":false,"leaf":false}, {"text":"a.txt","iconCls":"file-txt","disabled":false,"leaf":true,"qtip":"Size: 1047552"} ]
Note: The response above is shown in four lines only for the purposes of this specification to be more readable by humans. The line breaks must not be sent from the server as a part of JSON string.
In the above example, we request server to deliver nodes of path root/a
and it responds with one directory named b
and one file named a.txt
.
"text":"b"
in the response is the name of the directory and "text":"a.txt"
is the name of the file. Note that server sends just names, not
full paths of nodes.
"iconCls":"file-txt"
in the response is to display correct file type icon by client and
"qtip":"Size: 1047552"
is optional text for file tooltip. leaf
property
distinguishes files from folders and disabled
is true for read-only files or folders.
For the other possible properties that the tree can process if they are sent from the server consult Ext JS Documentation.
cmd rename newname root/abc.txt oldname root/a.txt
{"success":true}
{"success":false,"error":"Cannot rename file root/a.txt to root/abc.txt"}
Error message text in the above example is not obligatory - server can send any kind of an error message, e.g. localized text.
cmd newdir dir root/a/b
{"success":true}
{"success":false,"error":"Cannot create directory: root/a/b"}
cmd delete file root/a/b
{"success":true}
{"success":false,"error":"Cannot delete: root/a/b"}
cmd upload path root/a
Content-Type: text/html, charset=utf-8
{"success":true}
{"success":false,"errors":{"ext-gen524":"File upload error."}}
File uploads are handled differently. First of all, server has to respond with text/html
content type and, in the case of failure, it has to respond with errors
object
with an error message for each uploaded file. Properties of errors
object are <input type="file"> field names. These names are auto-generated and they
are available at server while processing the file uploads.
Server has to ignore NO_FILE
error and it has to report "success":true
only if
all files have been uploaded successfully.