Uploadify

Use uploadify to Transloadit -> S3

by Mahendran Sakkarai

HTML

<script src="http://www.uploadify.com/wp-content/themes/uploadify/js/jquery.uploadify.min.js"></script>
<link rel="stylesheet" href="http://www.uploadify.com/wp-content/themes/uploadify/style.css">
<form accept-charset="UTF-8" action="/groups" class="form-horizontal" id="fileupload" method="post">
    <input type="file" name="file_upload" id="file_upload" />
</form>
<a href="javascript:$('#file_upload').uploadify('upload','*')">Upload Files</a></p>

JavaScript

$(function() {
        $('#file_upload').uploadify({
            'auto'     : false,
            'swf'      : 'http://www.uploadify.com/uploadify/uploadify.swf',
            'uploader' : 'http://api2.transloadit.com/assemblies',
            'formData' : {'params' : '{"auth":{"key":"2f6c477162d54859b7b0586e11b1dd49"},"template_id":"ea4370a5990a48e4943c1d20cd916cca"}'},
           'itemTemplate' : '<div id="${fileID}" class="uploadify-queue-item">\ <div class="cancel">\ <a href="javascript:$(\'#${instanceID}\').uploadify(\'cancel\', \'${fileID}\')">X</a>\ </div>\ <span class="fileName">${fileName} (${fileSize})</span><span class="data"></span>\ <div class="uploadify-progress">\ <div class="uploadify-progress-bar"></div>\ </div>\ </div>',
            'onFallback' : function() {
                $("#file_upload").uploadify("destroy");
            }
        });
    
       var load = function (e) {
            e = e.originalEvent;
            e.preventDefault();
            window.loadImage(
                (e.dataTransfer || e.target).files[0],
                function (img) { 
                    if(img.type === "error") {
                        console.log("Error loading image " + imageUrl);
                    } else {
                        document.body.appendChild(img);
                    }
                },
                {
                    maxWidth: 600,
                    canvas: true
                }
            );
        };
    
       $('#file_upload').on('change', load);
    
    
    });