Configuring the jQuery plugin

This guide assumes that you are familiar with the Transloadit basics and the minimal integration.

The Transloadit jQuery plugin allows you to:

• Show file upload progress
• Get upload results directly without further API queries
• Wait for uploads to be processed before redirecting to the result page

Assuming you already have a form with the id "MyForm" (from the minimal integration), you can use the jQuery plugin like this:

<script type="text/javascript" src="//assets.transloadit.com/js/jquery.transloadit2.js"></script>
<script type="text/javascript">
   // We call .transloadit() after the DOM is initialized:
   $(document).ready(function() {
     $('#MyForm').transloadit();
   });
</script>

By default, this will display an overlay with a progress bar.

Please also note that, despite the include method used, Transloadit currently does not fully support HTTPS. Your users may receive warnings depending on their browser.

Customize the progress bar

If you don't like Transloadit's progress bar, you can render your own. Rendering your own progress bar is as simple as:

// Don't forget this goes inside your document.ready
$('#MyForm').transloadit({
  modal: false,
  onProgress: function(bytesReceived, bytesExpected) {
    // render your own progress bar!
    $('#progress')
      .text((bytesReceived / bytesExpected * 100).toFixed(2)+'%');
  },
  onError: function(assembly) {
    alert(assembly.error+': '+assembly.message);
  }
});

If you like Transloadit's default progress bar, but just want to change a few colors, have a look at these css selectors which you can change in your own css. They should be pretty self-explaining.

Unbinding the plugin again

You can unbind the plugin by calling

$('#MyForm').unbind('submit.transloadit');

Plugin Parameters

There are a number of parameters available for the plugin.

Parameter	Description
wait	Determines if the plugin will wait for the files to be processed before doing the final form submit. Default = false.
modal	Controls if the Transloadit overlay / progress bar will be rendered automatically. Default = true.
autoSubmit	If set to false, the jQuery plugin will not automatically submit your original form at the end of the upload / processing. Default = true.
processZeroFiles	If set to false, the jQuery plugin will not kick in when the form is submitted and no files were selected in the input boxes. Default = false.
exclude	All input[type=file]'s in the current form matching this selector will not be uploaded through Transloadit. Default = "".
fields	By default, only the Transloadit "params" and "signature" field will be submitted along with your upload. Other fields of your form are not send to Transloadit for privacy reasons. If you would still like to send a field of your form along, you can set this parameter to true to send all fields, or to a CSS selector string matching the fields you are interested in. Default = false.
debug	If set to false, Transloadit errors will not be explained to the end users. Use the onError callback to do your own logging / presentation. Default = true.
onStart(assembly)	Fired whenever an upload begins.
onProgress(bytesReceived, bytesExpected)	Allows you to render your own upload progress bar.
onUpload(upload)	Fires one event for every file uploaded. This is very useful if you are custom-rendering a multiple file upload.
onResult(step, result)	Only available when wait is set to true. Fires each time a result becomes available for a given step. Can be used to show thumbnails for videos / images right after they are uploaded.
onCancel()	Triggered after an upload has been canceled by the user.
onError(assembly)	Triggered if there was an upload error.
onSuccess(assembly)	Triggered if the plugin is done with the upload. If wait is set to false, this is after the upload finishes. If wait is true, onSuccess fires after all files have been processed.

Comments