This project implements client-side file uploading for modern browsers. When supported, upload progress can be tracked and reported to the user. It also demonstrates how to implement drag-and-drop file selection (again, when supported by the browser).
The project contains a demonstration UI, called SimpleFileUploader, but that UI really just shows how to use the data abstractions provided. I did not intend SimpleFileUploader to work as anything more than sample code; but I did intend that the classes used to implement SimpleFileUploader provided a robust and scalable solution for uploading files from the client.
File Uploader uses the ExtJS 4.0 framework to define classes, manage files, and implement asynchronous uploading. The SimpleFileUploader sample uses the ExtJS Component classes to implement its UI. File uploads via the
file input element require the ExtJS
Ext.form.field.File component. Otherwise, File Uploader does not require that the UI be implemented with ExtJS.
A sample page using the
SimpleFileUploader can be found at http://uploader.codeslower.com/sample.
The source code for the File Uploader can be found on GitHub at https://github.com/m4dc4p/uploader.
File Uploader has been released under the BSD3 license. See the LICENSE file in the source repository for details.
Source Code and Components
src directory contains the source files for the project. File Uploader divides classes into two namespaces,
Cs.file.ui, each found under the appropriate directory. The
sample directory shows how to use the SimpleFileUploader component.
- index.html - Hosts the sample.
- simple.js - Shows how to instantiate the SimpleFileUploader component. The page always uploads to "upload.html."
- upload.html - Contains canned JSON indicating that the upload succeeded.
- ugly.js - A deprecated sample showing how to host the UglyFileUploader.
Classes in this directory implement file management, uploads, and progress notification. Classes provided include:
Ext.data.Modelsubclass that represents an individual file.
Cs.file.data.FileManager- Manages a list of Cs.file.data.File instances. This class provides methods for adding, removing and enumerating files.
Cs.file.data.FileUploader- Handles uploading files managed by a
Cs.file.data.FileManagerinstance. This class can upload files using form submission (i.e., from the
Ext.form.field.Filecomponent) or the
Fileobject as defined by the W3C's FileAPI. On supported browsers, the class will report progress and can cancel uploads in progress.
Cs.file.data.ConnectionEx- Extends the ExtJS
Ext.data.Connectionclass by adding support for progress notifications.
This directory gives a sample UI for managing file uploads.
UglyFileUploader represents an early UI and no longer works.
Ext.Template-based UI component representing a single file. Shows upload progress and provides controls to cancel the upload.
Cs.file.ui.SimpleFileUploader- Allows files to be selected via a traditional file picker (using the
Ext.form.field.Filecomponent) or by drag-and-drop. Each file added can be uploaded to the server.
Cs.file.ui.UglyFileUploader- A deprecated, no longer working, class showing an earlier UI for uploading files.