How Does Image Uploader Work
What is Image Uploader?
Image Uploader is the solution intended to make mass file upload easier. It is simply embedded into HTML code of your web page and does not require end-user to download and install it manually. A modern appearance and intuitive user interface make Image Uploader attractive for end-users as well as clear for computer novices. Here is a common workflow to upload files with Image Uploader:
- Users visit a page where Image Uploader resides and select as many files as they want.
- When all the files are added, they click Upload.
- Image Uploader prepares a HTTP POST request with user-selected files and additional data and sends it to the server page specified in its settings. This page receives and processes the request and performs any other upload-related actions.
- Progress bar with estimated remaining upload time is shown during the upload process; users always know the upload time, and they can always stop the upload if it takes too long.
Additionally, Image Uploader is able to apply automatic client-side data optimization before sending it. For instance, it can resize images and compress files to ZIP archives. This way the add-on reduces traffic, uploading time, and server disk amount used to store your data.
The figure below demonstrates Image Uploader architecture:
Let us consider its main parts in detail.
How Does It Work Client-Side?
On the client-side, Image Uploader consists of two parts which implement almost similar functionality:
- ActiveX control (for Internet Explorer)
- Java applet (for Mozilla Firefox, Safari, or other browsers having Java runtime support)
Both parts implement a common functionality, namely, user interface for selecting and sorting files, pre-upload file processing, and sending files via HTTP POST request.
Image Uploader JavaScript unifies these parts; it determines a browser type and loads the corresponding component (ActiveX or Java). It provides an API for configuring Image Uploader and manipulating it at runtime, i.e. change properties, call methods, and handle events. Image Uploader JavaScript also helps to debug integration of the control with your web service by displaying notifications if some parameters have inconsistent values. These notifications can be disabled when you are ready to go live with your web site. Find details in the Using JavaScript API article.
How Does It Work Server-Side?
Since Image Uploader sends files and data in HTTP POST request, the server-side part is represented with a web server which hosts your application. This server performs all the upload-related tasks, such as receiving and saving uploaded files to necessary folders, updating a database, sending email notifications, and etc. In a word, this part implements the internal logic of your application which uses Image Uploader.
When developing this part you may implement your own upload script which will parse the POST request received from Image Uploader. In this case you can use any server platform which is able to receive HTTP POST request. Another way is to use Image Uploader ASP.NET or Image Uploader PHP . They both get the uploaded data, parse it, and provide a typed access to files and text fields on the server side. The built-in autosave feature allows you to create your upload solution without writing a line of code. Refer the Saving Uploaded Files in ASP.NET or Saving Uploaded Files in PHP topic depending on the platform you are going to use Image Uploader with.
One more case is when your application is integrated with a cloud storage, i.e. Amazon S3 or Nirvanix. Here you do not need to receive files from Image Uploader and redirect them to the storage because Image Uploader supports uploading files directly from a browser to a cloud storage. Find details in the Uploading to Cloud Storages article.
Image Uploader ASP.NET
Image Uploader ASP.NET is set of ASP.NET server controls which allow to deploy and configure Image Uploader in Microsoft Visual Studio in design mode. Moreover, it significantly simplifies handling uploaded data and saves you the trouble of parsing POST request yourself. The Quick Start with Image Uploader ASP.NET topic gives outlook on how to use it in your web solution.
Image Uploader PHP
Image Uploader PHP implements almost the same functionality and offers the same advantages as Image Uploader ASP.NET. It allows PHP developers to work with Image Uploader in a usual way as with a common PHP object. Find the detailed information about the PHP library in the Quick Start with Image Uploader PHP topic.