Tutorial - Uploader - Sending files to a server

This page will walk you through an example of adding the Infusion Uploader component to your application.

This tutorial assumes that:

• you are already familiar with HTML, Javascript and CSS
• you are familiar with what the Uploader is and does
• you have the Uploader mostly setup, but want more information on sending files to a server

For technical API documentation for the Uploader, see Uploader API.

Scenario

Suppose you are developing a content management system that will allow users to upload various types of files. You have the system basically set up and now just want to setup the multi-file Uploader to send the files to your server.

There are two basic steps to adding the Uploader to your application:

• Step 1: Configure the options of the Uploader to POST files to the correct server side script
• Step 2: Configure your server to receive files from the Uploader

The rest of this tutorial will explain each of these steps in detail.

Step 1: Configure Uploader

There are two specific configuration points for communicating with the server.

The demo option
This option is used to put the Uploader in demo mode. In this mode, files are not actually uploaded. To ensure that your Uploader successfully sends files to server, either set the demo option to false or leave it unset.

The uploadURL property
This property of the queueSettings option tells the Uploader where to POST files to. Set this property to the URL of the web service that will handle the file POSTs. It is important to note that this is the URL of the web service that will handle the POST, not the location where the files will be saved to. That will be determined by your server implementation (see Step 2: Configure the Server for more information).

Putting these two points together, your Uploader initialization will look like this:

jQuery(document).ready(function () {

    var myUpload = fluid.uploader(".flc-uploader", {
        demo: false, // Alternatively, do not set the demo option at all, as the default is false.
        queueSettings: {
            // Set the uploadURL to the URL for posting files to your server.
            uploadURL: "http://myserver.com/uploadFiles"
         }
    });
});

Step 2: Configure the Server

Server configuration will be dependent on the implementation that you are using. In general, you'll want to expose a service that the Uploader can POST to. The Uploader will send individual POSTs for each file uploaded, with the file attached to a POST parameter called file.

Here's an example of a Cherrypy service that accepts the POSTED files.

...

class ImportController(object):
    
    image, resource = None, None
    
    def __init__(self, resourceSource):
        self.resource = resourceSource
        self.image = imageImport.ImageImport(self.resource)
    
    @cherrypy.expose()
    def index(self, file):
        # import the file
        return self.image.save(file)

...