plupload - basic example

by Matthew Schenker

HTML

<script src="http://rawgithub.com/moxiecode/plupload/master/js/plupload.full.min.js"></script>
<script src="http://rawgithub.com/moxiecode/plupload/master/js/jquery.ui.plupload/jquery.ui.plupload.min.js"></script>
<link rel="stylesheet" href="http://rawgithub.com/moxiecode/plupload/master/js/jquery.ui.plupload/css/jquery.ui.plupload.css">
<h1>jQuery UI Widget</h1>

<p>You can see this example with different themes on the <a href="http://plupload.com/example_jquery_ui.php">www.plupload.com</a> website.</p>

<form id="form" method="post" action="/echo/json">
  <div id="uploader">
    <p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
  </div>
  <br />
  <input type="submit" value="Submit" />
</form>

JavaScript

$(document).ready(function() {
  $("#uploader").plupload({
    // General settings
    runtimes: 'html5,flash,silverlight,html4',

    // Fake server response here 
    // url : '../upload.php',
    url: "/echo/json",

    // Maximum file size
    max_file_size: '1000mb',

    // User can upload no more then 20 files in one go (sets multiple_queues to false)
    max_file_count: 20,

    chunk_size: '1mb',

    // Resize images on clientside if we can
    resize: {
      width: 200,
      height: 200,
      quality: 90,
      crop: true // crop to exact dimensions
    },

    // Specify what files to browse for
    filters: [{
        title: "Image files",
        extensions: "jpg,gif,png"
      },
      {
        title: "Zip files",
        extensions: "zip,avi"
      }
    ],

    // Rename files by clicking on their titles
    rename: true,

    // Sort files
    sortable: true,

    // Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
    dragdrop: true,

    // Views to activate
    views: {
      list: true,
      thumbs: true, // Show thumbs
      active: 'thumbs'
    }
  });


  // Handle the case when form was submitted before uploading has finished
  $('#form').submit(function(e) {
    // Files in queue upload them first
    if ($('#uploader').plupload('getFiles').length > 0) {

      // When all files are uploaded submit form
      $('#uploader').on('complete', function() {
        $('#form')[0].submit();
      });

      $('#uploader').plupload('start');
    } else {
      alert("You must have at least one file in the queue.");
    }
    return false; // Keep the form from submitting
  });
});