Fine Uploader Basic demo

While File Uploader has a full set of pre-programmed callbacks and full file and CSS templates, File Uploader Basic provides just the callback handlers and leave it all to the developer.

For this demo, we're using the Bootstrap CSS classes.

Click to upload

<div id="fine-uploader-basic" class="btn btn-success">
  <i class="icon-upload icon-white"></i> Click to upload
</div>
<div id="messages"></div>

<script>
  $(document).ready(function() {
    $fub = $('#fine-uploader-basic');
    $messages = $('#messages');

    var uploader = new qq.FineUploaderBasic({
      button: $fub[0],
      request: {
        endpoint: 'server/handleUploads'
      },
      validation: {
        allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
        sizeLimit: 204800 // 200 kB = 200 * 1024 bytes
      },
      callbacks: {
        onSubmit: function(id, fileName) {
          $messages.append('<div id="file-' + id + '" class="alert" style="margin: 20px 0 0"></div>');
        },
        onUpload: function(id, fileName) {
          $('#file-' + id).addClass('alert-info')
                          .html('<img src="client/loading.gif" alt="Initializing. Please hold."> ' +
                                'Initializing ' +
                                '“' + fileName + '”');
        },
        onProgress: function(id, fileName, loaded, total) {
          if (loaded < total) {
            progress = Math.round(loaded / total * 100) + '% of ' + Math.round(total / 1024) + ' kB';
            $('#file-' + id).removeClass('alert-info')
                            .html('<img src="client/loading.gif" alt="In progress. Please hold."> ' +
                                  'Uploading ' +
                                  '“' + fileName + '” ' +
                                  progress);
          } else {
            $('#file-' + id).addClass('alert-info')
                            .html('<img src="client/loading.gif" alt="Saving. Please hold."> ' +
                                  'Saving ' +
                                  '“' + fileName + '”');
          }
        },
        onComplete: function(id, fileName, responseJSON) {
          if (responseJSON.success) {
            $('#file-' + id).removeClass('alert-info')
                            .addClass('alert-success')
                            .html('<i class="icon-ok"></i> ' +
                                  'Successfully saved ' +
                                  '“' + fileName + '”' +
                                  '<br><img src="img/success.jpg" alt="' + fileName + '">');
          } else {
            $('#file-' + id).removeClass('alert-info')
                            .addClass('alert-error')
                            .html('<i class="icon-exclamation-sign"></i> ' +
                                  'Error with ' +
                                  '“' + fileName + '”: ' +
                                  responseJSON.error);
          }
        }
      },
      debug: true
    });
  });
</script>

Fine Uploader Basic a.k.a “FUB” demos