{"id":20159535,"url":"https://github.com/transloadit/jquery-sdk","last_synced_at":"2025-04-05T02:12:26.009Z","repository":{"id":984108,"uuid":"787691","full_name":"transloadit/jquery-sdk","owner":"transloadit","description":"DEPRECATED. https://uppy.io is Transloadit's browser integration that works with any framework including jQuery","archived":false,"fork":false,"pushed_at":"2025-01-23T08:15:42.000Z","size":1982,"stargazers_count":60,"open_issues_count":0,"forks_count":49,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-03-29T01:12:50.600Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://uppy.io/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/transloadit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"License","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2010-07-20T23:39:13.000Z","updated_at":"2025-02-10T04:00:27.000Z","dependencies_parsed_at":"2024-10-31T14:34:14.309Z","dependency_job_id":"cdb053b4-835f-40be-8308-ea4801f2cfa0","html_url":"https://github.com/transloadit/jquery-sdk","commit_stats":{"total_commits":559,"total_committers":24,"mean_commits":"23.291666666666668","dds":0.3935599284436494,"last_synced_commit":"573709304fad207345b0ef500f911facfe6b8c63"},"previous_names":[],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/transloadit%2Fjquery-sdk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/transloadit%2Fjquery-sdk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/transloadit%2Fjquery-sdk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/transloadit%2Fjquery-sdk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/transloadit","download_url":"https://codeload.github.com/transloadit/jquery-sdk/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247276189,"owners_count":20912288,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-14T00:08:46.340Z","updated_at":"2025-04-05T02:12:25.989Z","avatar_url":"https://github.com/transloadit.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DEPRECATED\n\n\u003e \u003chttps://uppy.io\u003e is Transloadit's current browser integration that works with any framework including jQuery. Please use that instead of our jQuery SDK, as this project will not receive maintenance anymore. Uppy also offers many features beyond what this SDK is capable of.\n\n# Transloadit jQuery SDK\n\nA jQuery Integration for [Transloadit](https://transloadit.com)'s file uploading and encoding service\n\n## Intro\n\n[Transloadit](https://transloadit.com) is a service that helps you handle file uploads, resize, crop and watermark your images, make GIFs, transcode your videos, extract thumbnails, generate audio waveforms, and so much more. In short, [Transloadit](https://transloadit.com) is the Swiss Army Knife for your files.\n\nThis is a **jQuery** SDK to make it easy to talk to the [Transloadit](https://transloadit.com) REST API. It supports resumable file uploads out of the box including a modal box with a progress bar, drag and drop support and several other nice things. :)\n\n## Install\n\n\u003cdiv class=\"alert alert-note\"\u003e\n  \u003cstrong\u003eNote:\u003c/strong\u003e You may also be interested in checking out \u003ca href=\"https://transloadit.com/docs/sdks/uppy/\"\u003eUppy\u003c/a\u003e, Transloadit's next-gen file uploader for the web.\n\u003c/div\u003e\n\nSimply include the JavaScript asset in your HTML page like so. jQuery \u003e= 1.9 is also required.\n\n```html\n\u003cscript\n  type=\"text/javascript\"\n  src=\"//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js\"\n\u003e\u003c/script\u003e\n\u003cscript src=\"//assets.transloadit.com/js/jquery.transloadit2-v3-latest.js\"\u003e\u003c/script\u003e\n```\n\n## How does it work\n\nYou have an HTML form on your page like this one for example:\n\n```\n\u003cform id=\"upload-form\" action=\"/uploads\" enctype=\"multipart/form-data\" method=\"POST\"\u003e\n  \u003cinput type=\"file\" name=\"my_file\" multiple=\"multiple\" /\u003e\n  \u003cdiv class=\"transloadit-drop-area\"\u003eDrag and drop files here\u003c/div\u003e\n  \u003cdiv class=\"transloadit-file-preview-area\"\u003e\u003c/div\u003e\n  \u003cinput type=\"text\" name=\"album_id\" value=\"foo_id\" /\u003e\n  \u003cinput type=\"submit\" value=\"Upload\"\u003e\n\u003c/form\u003e\n```\n\nBy attaching the jQuery SDK to the form you enable uploading functionality on the form:\n\n```javascript\n$('#upload-form').transloadit({\n  wait: true,\n  triggerUploadOnFileSelection: true,\n  params: {\n    auth: { key: 'YOUR_TRANSLOADIT_KEY' },\n    template_id: 'YOUR_TEMPLATE_ID',\n  },\n})\n```\n\nOnce you select some files over the file input field (or the drag and drop area) a modal will appear that will upload your fils.\nThe `wait` parameter set to `true` instruct the SDK to wait for all transcoding to finish. Once it's finished it will attach a long JSON\nstring to a hidden textarea in your form.\n\nYou can then submit the form as you normally would. On your backend you have an extra POST field named `\"transloadit\"` then in the payload including JSON with information about all uploads and transcoding results, their meta data and the URLs to them.\n\nIt's that simple. :)\n\n## Version 3\n\nChanges from version 2 to version 3:\n\n### BC Breaking changes:\n\n- The onExecuting() callback does not have the array of `uploads` anymore. Please use the `onUpload` callback to track received uploads.\n- The onUpload() and onResult() callbacks no longer receive the assembly object as a parameter.\n- The formData parameter has been removed, because all uploads use XHR now. This will only break BC for you if you used formData: customFormDataObj. In that case you should add the contents of your custom form data as hidden input fields to the form now.\n- Several new translations have been added for which you would need to add a translation in case you run on a custom locale. Please check \"How to add your own localization / other language strings\" at the bottom of this page for details.\n- There is a new `translations` parameter now that must be used to get your custom locale working.\n\n### Non-BC Breaking Changes and new features:\n\n- There is now support for resumable file uploads! It works out of the box, you do not need to change anything for it.\n- Performance has been improved in all areas of the plugin.\n- Drag and Drop support has been added.\n- Support for file preview lists has been added.\n- All options related to polling have been removed.\n- There is now a lot less network traffic for assembly status updates.\n- There is now the ability to not wait for file upload meta data anymore, which is a big speed improvement. This change was also backported to the last version in the 2.x series.\n- There is now a new parameter \"maxNumberOfUploadedFiles\", with which you can set a limit to the number of uploaded files.\n- There are two new callbacks implemented: onDisconnect() and onReconnect()\n\n_Version 2 of the plugin is CEASED TO EXIST on September 30, 2017. Please upgrade to version 3 as soon as possible._\n\n## Usage\n\nThe Transloadit jQuery plugin allows you to\n\n- show file upload progress,\n- get uploaded results directly without further API queries, and\n- wait for upload processing to complete before redirecting to the result page or calling a callback function.\n\nAssuming a form with the ID `\"upload-form\"` (from the [minimal integration](https://transloadit.com/docs/#minimal-integration)),\nthe jQuery plugin can be used like this:\n\n```markup\n\u003cscript src=\"//assets.transloadit.com/js/jquery.transloadit2-v3-latest.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003e\n// We call .transloadit() after the DOM is initialized:\n$(function() {\n  $('#upload-form').transloadit({\n    wait  : true,\n    fields: true,\n\n    triggerUploadOnFileSelection: true,\n\n    params : {\n      auth  : { key : 'YOUR_TRANSLOADIT_KEY' },\n      steps : {\n        resize_to_75: {\n          robot  : '/image/resize',\n          use    : ':original',\n          width  : 75,\n          height : 75\n        },\n        // more Steps here\n      }\n    }\n  });\n});\n\u003c/script\u003e\n```\n\nBy default, this will display an overlay with a progress bar.\n\n\u003cdiv class=\"alert alert-warning\"\u003e\u003cspan class=\"label label-danger\"\u003eImportant\u003c/span\u003e Your file input fields must each have a proper \u003ccode\u003ename\u003c/code\u003e attribute for our jQuery SDK to work properly.\u003c/div\u003e\n\n## Specifying Assembly Instructions in the Form\n\nInstead of using the plugin's `params` parameter, you could also have added the Assembly Instructions in a hidden form field named `params`.\nSometimes, especially when your instructions need to be calculated by a back-end language, and also when you want to add [Signature authentication](https://transloadit.com/docs/topics/signature-authentication/) it is easier to specify them directly in the form, than to add them in the call to the jQuery SDK.\n\nThe contents of the hidden params field need to be encoded as JSON, with **HTML entities escaped**.\nHave your preferred scripting language encode the JSON for you to maintain readability. Here is an example in PHP:\n\n```php\n$params = array(\n  \"auth\" =\u003e array(\"key\" =\u003e \"YOUR_TRANSLOADIT_KEY\"),\n  \"steps\" =\u003e array(\n    \"resize_to_75\" =\u003e array(\n      \"robot\" =\u003e \"/image/resize\",\n      \"use\" =\u003e \":original\",\n      \"width\" =\u003e 75,\n      \"height\" =\u003e 75\n    )\n  )\n);\n\nprintf(\n  '\u003cinput type=\"hidden\" name=\"params\" value=\"%s\" /\u003e',\n  htmlentities(json_encode($params))\n);\n```\n\nYour form should then look like this (just with `YOUR_TRANSLOADIT_KEY` replaced with your real \u003cdfn\u003eAuth Key\u003c/dfn\u003e):\n\n```markup\n\u003cform id=\"upload-form\" action=\"http://api2.transloadit.com/assemblies\" enctype=\"multipart/form-data\" method=\"POST\"\u003e\n  \u003cinput type=\"hidden\" name=\"params\" value=\"{\u0026quot;auth\u0026quot;:{\u0026quot;key\u0026quot;:\u0026quot;YOUR_TRANSLOADIT_KEY\u0026quot;},\u0026quot;steps\u0026quot;:{\u0026quot;resize_to_75\u0026quot;:{\u0026quot;robot\u0026quot;:\u0026quot;\\/image\\/resize\u0026quot;,\u0026quot;use\u0026quot;:\u0026quot;:original\u0026quot;,\u0026quot;width\u0026quot;:75,\u0026quot;height\u0026quot;:75}}}\" /\u003e\n  \u003cinput type=\"file\" name=\"my_file\" /\u003e\n  \u003cinput type=\"submit\" value=\"Upload\"\u003e\n\u003c/form\u003e\n```\n\nBoth ways of adding the Assembly Instructions are valid. When you upload a file you should see the same result.\n\n## Example\n\nAn example use of this plugin can be found in the [examples](https://github.com/transloadit/jquery-sdk/tree/HEAD/examples) directory.\n\nTo run it, simply replace `YOUR_TRANSLOADIT_KEY` (on the HTML file) with your actual Transloadit key and load the html file on your browser.\n\n## Releases\n\nWe have one _magic_ release:\n\n- `jquery.transloadit-v3-latest.js`\n  This is always the latest version of the v3 branch and is **the recommended version to use**. \u003chttps://assets.transloadit.com/js/jquery.transloadit2-v3-latest.js\u003e\n\n- You can also pin specific versions via:\n  \u003chttps://assets.transloadit.com/js/jquery.transloadit2-v3.0.0.js\u003e. Remember that it then becomes your responsibility to keep track of security and performance upgrades in our [releases](https://github.com/transloadit/jquery-sdk/releases).\n\n## Callbacks\n\nThese can be added as parameters to the `.transloadit()` call like so:\n\n```markup\n\u003cscript src=\"//assets.transloadit.com/js/jquery.transloadit2-v3-latest.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003e\n// We call .transloadit() after the DOM is initialized:\n$(function() {\n  $('#upload-form').transloadit({\n    onStart: function(assembly) {\n      console.log('\u003e\u003e Uploading has started!');\n    },\n    onExecuting: function(assembly) {\n      console.log('\u003e\u003e Transcoding has started!');\n    },\n  });\n});\n```\n\n\u003ctable class=\"table table-striped table-bordered\"\u003e\n\u003ctr\u003e\n  \u003cth\u003eParameter\u003c/th\u003e\n  \u003cth\u003eDescription\u003c/th\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd markdown=\"1\"\u003e\n   onStart(assemblyObj)\n  \u003c/td\u003e\n  \u003ctd markdown=\"1\"\u003e\n   This is fired whenever uploading begins. The assemblyObj contains useful data like the assembly's id.\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd markdown=\"1\"\u003e\n   onExecuting(assemblyObj)\n  \u003c/td\u003e\n  \u003ctd markdown=\"1\"\u003e\n   This is fired whenever uploading is fully finished and transcoding begins. The assemblyObj contains useful data like the assembly's id.\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd markdown=\"1\"\u003e\n   onFileSelect(\u003cbr /\u003efileObject,\u003cbr /\u003e$fileInputField\u003cbr /\u003e)\n  \u003c/td\u003e\n  \u003ctd markdown=\"1\"\u003e\n   This is fired whenever a user selects a file in file input field.\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd markdown=\"1\"\u003e\n   onProgress(\u003cbr /\u003ebytesReceived, bytesExpected\u003cbr /\u003e)\n  \u003c/td\u003e\n  \u003ctd markdown=\"1\"\u003e\n   This is fired whenever the upload progress is updated, allowing you to render your own upload progress bar.\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd markdown=\"1\"\u003e\n   onUpload(upload)\n  \u003c/td\u003e\n  \u003ctd markdown=\"1\"\u003e\n   This is fired once for each uploaded file. This is useful for custom renderings of multiple file uploads.\n\nEach upload here has an ID field. You can map that back to the \u003ccode\u003eoriginal_id\u003c/code\u003e field of results on the \u003ccode\u003eonResult\u003c/code\u003e callback.\n\nPlease set \u003ccode\u003erequireUploadMetaData\u003c/code\u003e to true if you use this callback.\n\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd markdown=\"1\"\u003e\n   onResult(step, result)\n  \u003c/td\u003e\n  \u003ctd markdown=\"1\"\u003e\n   This is fired each time a result becomes available for a given Step, and is only available when \u003ccode\u003ewait\u003c/code\u003e is set to \u003ccode\u003etrue\u003c/code\u003e. This can be used\n   to show thumbnails for videos or images once they are uploaded.\n\nResults here contain a key \u003ccode\u003eoriginal_id\u003c/code\u003e, which maps them back to the ID of the originally uploaded file's ID.\n\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd markdown=\"1\"\u003e\n   onCancel()\n  \u003c/td\u003e\n  \u003ctd markdown=\"1\"\u003e\n   This is fired after an upload has been canceled by the user.\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd markdown=\"1\"\u003e\n   onError(assembly)\n  \u003c/td\u003e\n  \u003ctd markdown=\"1\"\u003e\n   This is fired when upload errors occur.\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd markdown=\"1\"\u003e\n   onSuccess(assembly)\n  \u003c/td\u003e\n  \u003ctd markdown=\"1\"\u003e\n   This is fired when the plugin has completed an upload. If \u003ccode\u003ewait\u003c/code\u003e is set to \u003ccode\u003efalse\u003c/code\u003e, this is fired after the upload finishes. If \u003ccode\u003ewait\u003c/code\u003e is \u003ccode\u003etrue\u003c/code\u003e, this is fired once all files have been transcoded.\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd markdown=\"1\"\u003e\n   onDisconnect()\n  \u003c/td\u003e\n  \u003ctd markdown=\"1\"\u003e\n   This is called whenever the internet connection goes down. Useful in the context of resumable uploads. Transloadit will display a default error message in this case, though, asking the user to keep their browser tab open and wait for the resume.\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd markdown=\"1\"\u003e\n   onReconnect()\n  \u003c/td\u003e\n  \u003ctd markdown=\"1\"\u003e\n   This is called whenever the internet connection becomes available again after it had been down previously.\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n## Parameters\n\nThese can be added as parameters to the `.transloadit()` call like so:\n\n```markup\n\u003cscript src=\"//assets.transloadit.com/js/jquery.transloadit2-v3-latest.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003e\n// We call .transloadit() after the DOM is initialized:\n$(function() {\n  $('#upload-form').transloadit({\n    wait  : true,\n    region: 'eu-west-1'\n  });\n});\n```\n\n\u003ctable class=\"table table-striped table-bordered\"\u003e\n\u003ctr\u003e\n  \u003cth\u003eParameter\u003c/th\u003e\n  \u003cth\u003eDescription\u003c/th\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd markdown=\"1\"\u003e\n   service\n  \u003c/td\u003e\n  \u003ctd markdown=\"1\"\u003e\n   The service URL to use. By default this is \u003ccode\u003e\"https://api2.transloadit.com/\"\u003c/code\u003e, which makes use of our entire api and route traffic based on the geolocation of your users.\n   Setting this parameter overrules the \u003ccode\u003eregion\u003c/code\u003e parameter, which you should also check out.\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd markdown=\"1\"\u003e\n   region\n  \u003c/td\u003e\n  \u003ctd markdown=\"1\"\u003e\n   If you want to temporarily switch to a particular region only, because we are down in the other region, you can set this parameter to either \u003ccode\u003e\"us-east-1\"\u003c/code\u003e or \u003ccode\u003e\"eu-west-1\"\u003c/code\u003e. The SDK will then build the proper service endpoint for you. Make sure to not set a custom service endpoint yourself in this case, as this would overrule the region parameter.\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd markdown=\"1\"\u003e\n   wait\n  \u003c/td\u003e\n  \u003ctd markdown=\"1\"\u003e\n   Specifies whether the plugin should wait for files to be transcoded before submitting the form. This is \u003ccode\u003efalse\u003c/code\u003e by default.\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd markdown=\"1\"\u003e\n   requireUploadMetaData\n  \u003c/td\u003e\n  \u003ctd markdown=\"1\"\u003e\n   Specifies whether the plugin should wait for meta data of uploaded files to first be extracted before it calls the \u003ccode\u003eonSuccess\u003c/code\u003e callback.\n   If you set \u003ccode\u003ewait\u003c/code\u003e to \u003ccode\u003etrue\u003c/code\u003e, this option does not have any effect, because extracting meta of uploaded files is a prerequisite for the files to be transcoded.\n\nHowever, if you set \u003ccode\u003ewait\u003c/code\u003e to \u003ccode\u003efalse\u003c/code\u003e, the \u003ccode\u003eonSuccess\u003c/code\u003e callback is fired as soon as the uploading is finished. The \u003ccode\u003euploads\u003c/code\u003e array in the passed assembly object will be empty in this case. If you need this uploads array to be populated, set this option to \u003ccode\u003etrue\u003c/code\u003e.\n\nThis option is \u003ccode\u003efalse\u003c/code\u003e by default to fire the \u003ccode\u003eonSuccess\u003c/code\u003e callback as soon as possible to increase perceived performance.\n\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd markdown=\"1\"\u003e\n   params\n  \u003c/td\u003e\n  \u003ctd markdown=\"1\"\u003e\n\nAn object of Assembly instructions that should be executed. For examples please check [the minimal integration](https://transloadit.com/docs/#13-the-minimal-integration). This is \u003ccode\u003enull\u003c/code\u003e by default, which means the instructions are read from the hidden input field named \u003ccode\u003eparams\u003c/code\u003e.\n\nHere is an example:\n\n \u003cpre\u003e\u003ccode\u003e\n $('#upload-form').transloadit({\n   wait   : true,\n   params : {\n     auth  : { key : 'YOUR_TRANSLOADIT_KEY' },\n     steps : {\n       resize_to_75: {\n         robot  : '/image/resize',\n         use    : ':original',\n         width  : 75,\n         height : 75\n       },\n       // more Steps here\n     }\n   }\n });\n \u003c/code\u003e\u003c/pre\u003e\n\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd markdown=\"1\"\u003e\n   signature\n  \u003c/td\u003e\n  \u003ctd markdown=\"1\"\u003e\n   Specifies the signature string, which is required if signature authentication is enabled in your account. This is \u003ccode\u003enull\u003c/code\u003e by default. The old way of providing this in a hidden input field named \u003ccode\u003esignature\u003c/code\u003e is still valid and will not be deprecated.\n\nPlease make sure the signature is calculated in your back-end code, so that your Transloadit Auth Secret is not exposed in your public JavaScript code!\n\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd markdown=\"1\"\u003e\n   modal\n  \u003c/td\u003e\n  \u003ctd markdown=\"1\"\u003e\n   Specifies whether to render the Transloadit overlay and progress bar automatically. This is \u003ccode\u003etrue\u003c/code\u003e by default.\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd markdown=\"1\"\u003e\n   \u003ccode\u003eautoSubmit\u003c/code\u003e\n  \u003c/td\u003e\n  \u003ctd markdown=\"1\"\u003e\n   Specifies whether to submit the original form automatically once the upload and processing have completed. This is \u003ccode\u003etrue\u003c/code\u003e by default.\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd markdown=\"1\"\u003e\n   processZeroFiles\n  \u003c/td\u003e\n  \u003ctd markdown=\"1\"\u003e\n   Specifies whether to perform processing when the form is submitted with no files selected using the form inputs. This is \u003ccode\u003etrue\u003c/code\u003e by default.\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd markdown=\"1\"\u003e\n   triggerUploadOnFileSelection\n  \u003c/td\u003e\n  \u003ctd markdown=\"1\"\u003e\n   When set to \u003ccode\u003etrue\u003c/code\u003e this triggers the upload to Transloadit as soon as the user has selected a file in any of the form's file input fields. This is \u003ccode\u003efalse\u003c/code\u003e by default.\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd markdown=\"1\"\u003e\n   maxNumberOfUploadedFiles\n  \u003c/td\u003e\n  \u003ctd markdown=\"1\"\u003e\n   When set to an integer value, this is the maximum number of files users can upload. If they exceed this number, then an error will occur. By default this is \u003ccode\u003enull\u003c/code\u003e, which means no limit.\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd markdown=\"1\"\u003e\n   locale\n  \u003c/td\u003e\n  \u003ctd markdown=\"1\"\u003e\n   The locale to use. The default value is \u003ccode\u003e\"en\"\u003c/code\u003e. If you use a custom locale, please provide your own localized strings. Please check the bottom of this page for further instructions.\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd markdown=\"1\"\u003e\n   exclude\n  \u003c/td\u003e\n  \u003ctd markdown=\"1\"\u003e\n   Specifies a selector for which any matching \u003ccode\u003einput[type=file]\u003c/code\u003e elements in the current form will \u003cem\u003enot\u003c/em\u003e be uploaded through Transloadit. This is \u003ccode\u003e\"\"\u003c/code\u003e by default.\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd markdown=\"1\"\u003e\n   fields\n  \u003c/td\u003e\n  \u003ctd markdown=\"1\"\u003e\n\nA CSS selector that specifies the form fields to be sent to Transloadit. This is \u003ccode\u003efalse\u003c/code\u003e by default, which means no form fields are submitted with an upload.\n\nFor example:\n\n \u003cpre\u003e\u003ccode\u003e\n $('form').transloadit({\n   // send no form fields; this is the default\n   fields: false\n });\n \u003c/code\u003e\u003c/pre\u003e\n\nIf you would like to only send some fields, set this parameter to a CSS selector string matching the fields to be sent:\n\n \u003cpre\u003e\u003ccode\u003e\n $('form').transloadit({\n   // only send the fields named \"field1\" \u0026amp; \"field2\"\n   fields: 'input[name=field1], input[name=field2]'\n });\n \u003c/code\u003e\u003c/pre\u003e\n\nIf you would like to send all form fields, set this to true:\n\n \u003cpre\u003e\u003ccode\u003e\n $('form').transloadit({\n   fields: true\n });\n \u003c/code\u003e\u003c/pre\u003e\n\nYou can also set this to an object of key/value pairs:\n\n \u003cpre\u003e\u003ccode\u003e\n $('form').transloadit({\n   fields: {\n     name : 'John Doe',\n     age  : 26\n   }\n });\n \u003c/code\u003e\u003c/pre\u003e\n\nThe fields that you send here will be available as \u003ccode\u003e${fields.\\*}\u003c/code\u003e variables in your Assembly instructions. Learn more about that [here](#form-fields-in-assembly-instructions).\n\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd markdown=\"1\"\u003e\n   translations\n  \u003c/td\u003e\n  \u003ctd markdown=\"1\"\u003e\n   An object of i18n translation strings. Please check below to get the list of all available strings to translate.\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd markdown=\"1\"\u003e\n   debug\n  \u003c/td\u003e\n  \u003ctd markdown=\"1\"\u003e\n   Specifies whether Transloadit errors are displayed to end users. If this is set to \u003ccode\u003efalse\u003c/code\u003e, no Transloadit errors will be displayed. Use the \u003ccode\u003eonError\u003c/code\u003e callback to perform your own logging or presentation. This is \u003ccode\u003etrue\u003c/code\u003e by default.\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n\u003cspan class=\"label label-danger\"\u003eImportant\u003c/span\u003e For very specific use-cases it may help to\ntake a look at the [plugin's source code](https://github.com/transloadit/jquery-sdk). You can also always [ask us](/support) to clarify something or help you with integration.\n\n## Drag and drop\n\nTo enable drag and drop please add a div to your form like as follows:\n\n```html\n\u003cdiv class=\"transloadit-drop-area\" data-name=\"files\"\u003ePlease drag and drop files here\u003c/div\u003e\n```\n\nYou can change the text of course and also the value of the data-name attribute. If you do not have the data-name attribute set, we will default it to \"files\".\n\nThis will create a drag and drop area with some default CSS in your form. This is the default CSS for it - feel free to overwrite it in your own CSS files:\n\n```css\n.transloadit-drop-area {\n  padding: 5px;\n  width: 200px;\n  height: 75px;\n  border: 2px dashed #ccc;\n}\n.transloadit-drop-area.hover {\n  border: 2px dashed #0af;\n}\n```\n\n## File preview areas\n\nFile preview areas are lists that are automatically populated with the files that will be part of the upload.\nThe user can then review the list prior to the upload and remove some files again if he or she so wishes.\n\nTo enable file preview areas, please add a div to your form like as follows:\n\n```html\n\u003cdiv class=\"transloadit-file-preview-area\"\u003e\u003c/div\u003e\n```\n\nThis will create a file preview area with some default CSS in your form. This is the default CSS for it - feel free to overwrite it in your own CSS files:\n\n```css\n.transloadit-file-preview-area {\n  margin: 10px 0;\n  padding: 5px;\n  width: 300px;\n  height: 100px;\n  overflow-y: auto;\n  border: 1px solid #ccc;\n}\n.transloadit-file-preview-area ul {\n  margin: 0 !important;\n  padding: 0 !important;\n}\n.transloadit-file-preview-area li {\n  border-top: 1px solid #ddd;\n  list-style-type: none;\n  display: inline-block;\n  width: 100%;\n  height: 12px;\n  padding: 1px 3px 3px 3px;\n  font-size: 11px;\n}\n.transloadit-file-preview-area li:first-child {\n  border-top: none;\n}\n```\n\n## Customizing the Progress Bar\n\nIf you don't like the Transloadit progress bar, you can render your own, like this:\n\n```javascript\n$('#upload-form').transloadit({\n  modal: false,\n  onProgress: function (bytesReceived, bytesExpected) {\n    // render your own progress bar!\n    $('#progress').text(((bytesReceived / bytesExpected) * 100).toFixed(2) + '%')\n  },\n  onError: function (assembly) {\n    alert(assembly.error + ': ' + assembly.message)\n  },\n})\n```\n\nIf you like the default Transloadit progress bar but just want to change a few colors, customize [these css selectors](https://github.com/transloadit/jquery-sdk/blob/HEAD/css/transloadit2.css) in your own css.\n\n### Unbinding the plugin\n\nYou can unbind the plugin by calling\n\n```javascript\n$('#upload-form').unbind('submit.transloadit')\n```\n\n## How to add your own localization / other language strings\n\nYou can add your own language strings like so:\n\n```\nvar $el = $('#upload-form');\n$el.transloadit({\n  translations: {\n    'errors.SERVER_CONNECTION_ERROR'                         : 'Your internet connection seems to be down. Retrying ...',\n    'errors.SERVER_CONNECTION_ERROR.retries_exhausted'       : 'Your internet connection seems to be down. Once it is up and running again please reload your browser window and try again.',\n    'errors.ASSEMBLY_NOT_FOUND'                              : 'There was a server problem finding the proper upload. Please reload your browser window and try again.',\n    'errors.INTERNET_CONNECTION_ERROR_UPLOAD_IN_PROGRESS'    : 'Your internet connection seems to be offline. We will automatically retry the upload until the connection works again. Please leave the browser window open.',\n    'errors.INTERNET_CONNECTION_ERROR_UPLOAD_NOT_IN_PROGRESS': 'Your internet connection seems to be offline. Please leave the browser window open, so that we can retry fetching the status of your upload.',\n    'errors.MAX_FILES_EXCEEDED'                              : 'Please select at most %s files.',\n    'errors.unknown'                                         : 'There was an unknown error.',\n    'errors.tryAgain'                                        : 'Please reload your browser page and try again.',\n    'errors.troubleshootDetails'                             : 'If you would like our help to troubleshoot this, ' + 'please email us this information:',\n    'cancel'                                                 : 'Cancel',\n    'cancelling'                                             : 'Cancelling ...',\n    'details'                                                : 'Details',\n    'startingUpload'                                         : 'Starting upload ...',\n    'processingFiles'                                        : 'Upload done, now processing files ...',\n    'uploadProgress'                                         : '%s / %s MB at %s kB/s | %s left',\n  }\n});\n```\n\nThen just replace the English strings with your custom language strings.\n\n## How to access the internal plugin object\n\nYou can access the internal uploader object to call methods directly on it like so:\n\n```javascript\nvar $el = $('#upload-form')\n$el.transloadit({\n  wait: true,\n})\n\nvar uploader = $el.data('transloadit.uploader')\n\n// then call some methods on the uploader object\nuploader.start()\nuploader.stop()\n\n// hide the modal if it exists\nuploader.hideModal()\n\n// alternatively you could also do it like this\n$el.transloadit('start')\n$el.transloadit('stop')\n```\n\nPlease consult the [plugin's source code](https://github.com/transloadit/jquery-sdk) to see all available methods.\n\n## Contributing\n\nFeel free to fork this project. We will happily merge bug fixes or other small\nimprovements. For bigger changes you should probably get in touch with us\nbefore you start to avoid not seeing them merged.\n\n## Dependencies\n\nThis plugin includes the following dependencies:\n\n- [jquery.jsonp.js](http://code.google.com/p/jquery-jsonp/) by Julian Aubourg (MIT License)\n- [toolbox.expose.js](http://jquerytools.github.io/documentation/toolbox/expose.html) by Tero Piirainen (Public domain)\n- [json2.js](https://cdnjs.cloudflare.com/ajax/libs/json2/20150503/json2.js) by Douglas Crockford (Public domain)\n- [socket.io](https://socket.io) by Guillermo Rauch (MIT License)\n\nA big thanks goes to the authors of these fantastic projects!\n\n## License\n\nThe Transloadit jQuery SDK is licensed under the MIT license. The dependencies\nhave their own licenses (MIT, BSD, PUBLIC DOMAIN).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftransloadit%2Fjquery-sdk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftransloadit%2Fjquery-sdk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftransloadit%2Fjquery-sdk/lists"}