Manually Trigger Uploads

The default behavior of Fine Uploader is to immediately attempt to upload files as they are selected. One option allows you to simply queue all files, and then start uploading at a later time by calling uploadStoredFiles() on your Fine Uploader instance.

Since we need to catch click events on an HTML element, we will be using jQuery to handle events and selectors for the sake of simplicity.

You can obviously take it further with the optional jQuery wrapper demos.

Upload now

<div id="manual-fine-uploader"></div>
<div id="triggerUpload" class="btn btn-primary" style="margin-top: 10px;">
  <i class="icon-upload icon-white"></i> Upload now
</div>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="client/fineuploader.js"></script>
<script>
  $(document).ready(function() {
    var manualuploader = new qq.FineUploader({
      element: $('#manual-fine-uploader')[0],
      request: {
        endpoint: 'server/handleUploads'
      },
      autoUpload: false,
      text: {
        uploadButton: '<i class="icon-plus icon-white"></i> Select Files'
      },
      debug: true
    });

    $('#triggerUpload').click(function() {
      manualuploader.uploadStoredFiles();
    });
  });
</script>

See Server Failure Messages

If your server returns a response that includes a reason property, such as {"error": "unsupported file type"} you can display the error message next to the failed file.

<div id="failed-fine-uploader"></div>

<script src="client/fineuploader.js"></script>
<script>
  function createUploader() {
    var faileduploader = new qq.FineUploader({
      element: document.getElementById('failed-fine-uploader'),
      request: {
        endpoint: 'server/handleUploads'
      },
      failedUploadTextDisplay: {
        mode: 'custom',
        maxChars: 40,
        responseProperty: 'error',
        enableTooltip: true
      },
      debug: true
    });
  }

  window.onload = createUploader;
</script>

Various Options

There are various options available to you when using Fine Uploader. In this demo, we've used a small subset of these options. To see all available options and their usage, please refer to Fine Uploader documentation on the Github repository.

We are implementing the following options in this demo:

custom upload button text,
restriction to one file upload/selection at once (may not select multiple files),
restriction to jpeg, jpg, and txt files,
restriction to a maximum file size of 50 kB,
custom error display handler instead of the default alert box.

<div id="restricted-fine-uploader"></div>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="client/fineuploader.js"></script>
<script>
  $(document).ready(function() {
    var restricteduploader = new qq.FineUploader({
      // Since we're using jQuery, use the jQuery way to select the HTML element
      element: $('#restricted-fine-uploader')[0],
      request: {
        endpoint: 'server/handleUploads'
      },
      multiple: false,
      validation: {
        allowedExtensions: ['jpeg', 'jpg', 'txt'],
        sizeLimit: 51200 // 50 kB = 50 * 1024 bytes
      },
      text: {
        uploadButton: 'Click or Drop'
      },
      showMessage: function(message) {
        // Using Twitter Bootstrap's classes and jQuery selector and method
        $('#restricted-fine-uploader').append('<div class="alert alert-error">' + message + '</div>');
      },
      debug: true
    });
  });
</script>

Display Image Thumbnails

In this demo, we've used the onComplete callback to display thumbnails of the uploaded images after they have been uploaded to the server.

Since the demos do not actually upload your files, the thumbnail is fake. We hope you like it though :)

This uploader is also restricted in

size (50 kB)
in concurrent downloads (only one at once),
in allowed extensions (jpeg, jpg, gif, and png)

<div id="thumbnail-fine-uploader"></div>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="client/fineuploader.js"></script>
<script>
  $(document).ready(function() {
    var thumbnailuploader = new qq.FineUploader({
      element: $('#thumbnail-fine-uploader')[0],
      request: {
        endpoint: 'server/handleUploads'
      },
      multiple: false,
      validation: {
        allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
        sizeLimit: 51200 // 50 kB = 50 * 1024 bytes
      },
      callbacks: {
        onComplete: function(id, fileName, responseJSON) {
          if (responseJSON.success) {
            $('#thumbnail-fine-uploader').append('<img src="img/success.jpg" alt="' + fileName + '">');
          }
        }
      }
      debug: true
    });
  });
</script>

Limit Number of Uploaded Files

In this demo, we are using both the onSubmit and the onComplete callbacks to handle a file counter.