File Uploader (http://uploader.codeslower.com)
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.
Documentation generated using jsduck can be found at http://uploader.codeslower.com/doc.
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.
The src
directory contains the source files for the project. File
Uploader divides classes into two namespaces, Cs.file.data
and
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:
-
Cs.file.data.File
- AnExt.data.Model
subclass 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 aCs.file.data.FileManager
instance. This class can upload files using form submission (i.e., from theExt.form.field.File
component) or theFile
object 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 ExtJSExt.data.Connection
class 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.
Cs.file.ui.FileItem
- AExt.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 theExt.form.field.File
component) 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.