Created
November 12, 2013 12:00
-
-
Save diki/7429716 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | |
| <title></title> | |
| <script src="js/json2.js"></script> | |
| <script type="text/javascript" src="http://js.jotform.com/JotFormCustomWidget.min.js"></script> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> | |
| <script src="//assets.transloadit.com/js/jquery.transloadit2-v2-latest.js"></script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <form id="MyForm" action="?upload=complete" enctype="multipart/form-data" method="POST"> | |
| <input type="file" name="my_file" multiple="multiple" /> | |
| </form> | |
| <span style="float:right; display:block;">Field by TransloadIt</span> | |
| </div> | |
| <script type="text/javascript" charset="utf-8"> | |
| //when form is ready | |
| JFCustomWidget.onReady(function(msg){ | |
| window.assemply = false; | |
| console.log("form transload ready message obtained from form", msg); | |
| JFCustomField.sendReady({id: msg.qid}); | |
| var apiKey = JFCustomWidget.getQueryString("key"); | |
| // We reference our html form here | |
| $('form#MyForm').transloadit({ | |
| wait: true, | |
| triggerUploadOnFileSelection: true, | |
| autoSubmit : false, | |
| onSuccess : function(assembly) { | |
| window.assembly = assembly; | |
| console.log(assembly); | |
| var msg = { | |
| contentType : "image" | |
| } | |
| if(!assembly) { | |
| msg.valid = false | |
| } else { | |
| msg.valid = true, | |
| msg.value = assembly.uploads[0].url | |
| } | |
| JFCustomWidget.sendResult(msg); | |
| }, | |
| params: { | |
| auth: { | |
| key: apiKey | |
| }, | |
| steps: { | |
| // The first step resizes the uploaded image(s) to 125x125 pixels. | |
| // The /image/resize robots ignores any files that are not images automatically. | |
| resize_to_125: { | |
| robot: "/image/resize", | |
| use: ":original", | |
| width: 125, | |
| height: 125 | |
| }, | |
| // The second step resizes the results further to 75x75 pixels. | |
| // Notice how we "use" the output files of the "resize_to_125" step as our input here. | |
| // We could use all kinds of steps with various robots that "use" each other, making | |
| // this perfect for any workflow. | |
| resize_to_75: { | |
| robot: "/image/resize", | |
| use: "resize_to_125", | |
| width: 75, | |
| height: 75, | |
| // We also add a sepia effect here just for fun. | |
| // The /image/resize robot has a ton of available parameters. | |
| sepia: 80 | |
| } | |
| } | |
| } | |
| }); | |
| }); | |
| JFCustomWidget.onSubmit(function(){ | |
| console.log("CLIENT: submit message arrived from form to field", JFCustomWidget.qid); | |
| //prepare your data | |
| var msg = { | |
| contentType : "image" | |
| // valid : false | |
| } | |
| if(!window.assembly) { | |
| msg.valid = false | |
| } else { | |
| msg.valid = true, | |
| msg.value = assembly.uploads[0].url | |
| } | |
| return msg; | |
| // JCF_Client.sendResult(msg); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment