File Uploader
CKEditor add-on
TinyMCE add-on
Bootstrap Editor add-on
JavaScript SDK
Purchase logo
Purchase Lite
$39
Purchase logo
Purchase Full
$59

How File Uploader works

Components

File Uploader consists of the several components:

  1. Server part (script or servlet)
  2. Client uploader (JS library)
  3. UI of the uploader (JS widget)

Hence, unlike other file uploaders, this File Uploader solves several tasks: it provides a library for client-server file upload interaction and a widget for a user to control the process from the browser. The first two components are a part of File Uploader Lite Edition, while all three components including Dialog UI are shipped in File Uploader Full Edition.

File Uploader components

Uploading process

  1. File selection
    A standard dialog window of the browser is shown to the user where he or she can select files to upload. If you use the JavaScript edition, you can optionally skip this step by specifying your own files to upload.
  2. Initializing the transaction
    The client sends a request to the server to initiate a transaction. The server creates a new directory in the temporary directory where the files are put until the commit. This step is absolutely transparent for an end user. If something goes wrong here, files uploaded to the temporary directory will not be transferred to the main storage, and will be deleted in case of an error (this behaviour can be configured).
  3. Uploading files to the server
    Then, selected files are uploaded to the server in multiple parallel threads. The overall number of such parallel threads is limited. For each individual file upload there is a unique identifier obtained on the previous step. This ID specifies the temporary directory where the files are uploaded.
  4. Dialog
    If the File Uploader dialog is used, while the step 3 process still runs the user can add, remove or rename files and adjust uploading settings (image sizes, embed type etc.) and monitor the uploading process.
  5. Commit of the transaction
    The commit is done automatically when the uploading finishes (if the dialog is used, the commit is done when the "OK" button is clicked). On the server, the uploaded files are copied from the temporary directory to the destination one, file names and image sizes are modified as specified (again, if the dialog is used, these settings are specified by the user in the dialog, otherwise the settings are taken from the config file). After that, the server sends to the client information about uploaded files including their URL relative to the root directory of uploads, and the client decides what to do next.
  6. Render and embedding
    Based on the data received on uploaded files, the client be that a widget or dialogless File Uploader) convert the URL of files to the HTML code based on the template in the settings. Then, CKEditor/TinyMCE plugins embed this code to the editor. In the JavaScript edition of File Uploader you can decide yourself what to do with this HTML code, or even omit the rendering part completely.

Presets and user options

File Uploader allows uploading to the server absolutely any files: documents, music, images and so on. But depending on how you insert links to the uploaded files in the edited document, a different preset is used. Three presets are available: image, preview and file. When you open File Uploader using the dialog, you can change the preset by selecting the suitable one on the toolbar. With the dialogless version of the uploader, the preset cannot be changed during the uploading process.

Each preset has some default user options (for example, maximum width and height for images) The File Uploader dialog allows users to modify them during the uploading. All presets can be configured by including then to the default user options.

Image preset

Image preset of File Uploader

Allows selecting only images in the file selection dialog. Available user options are image width and height, file renaming. The render template by default generates the code for the image (the HTML tag "img") based on the final location on the server.

Preview preset

Preview preset of File Uploader

This preset allows selecting only images in the file selection dialog. Available user options are image width and heigh as well as preview width and height (the preview is generated automatically), and file renaming. The render template by default generates the code (HTML tag "img") for the preview wrapped to the code of the anchor (HTML tag "a") that points to the full-size image.

File preset

File preset of File Uploader

This is a versatile preset to upload arbitrary files. It does not restrict file types a user can upload. Available user options are file renaming. The default template is a link to the uploaded files (HTML tag "a").

The mechanism of transactions

The mechanism of transactions is extremely useful while completely transparent and not limiting your freedom. It does not require installing any database or specific third-party software and can work with the existing file structure. Here is how it works. Before commit, all files are stored in a temporary directory with a random transaction name chosen during initialization. The name of the directory is a key to its contents. A client that initialized the transaction receives the name of the directory as an ID, and sends that ID with all subsequent queries (uploading, deleting files, commit). This way the server controls access to files of different users. Read more about security here.

When using CKEditor/TinyMCE plugins you won't even notice transactions. Well, unless some failure happens, for instance if your computer lose connection. In this case File Uploader makes sure that everything you wanted to upload but interrupted by the failure will never ends up in the main file directory. In other words, the component follows the principle: "all files are uploaded, or no files are uploaded". This resolves a common issue when the storage gets cluttered, because before you can clean up the mess you must be sure that each particular file is not used somewhere on the website. No cluttering, no problem.

Users of the JavaScript edition can get access to upload ID from the code and use this capability in own applications. If you don't need this, the step remains as transparent as for other users of the add-ons.