UPLOADIFY - BIZAMAJIG PROTOTYPE + LOAD IMAGE PLUGIN

Use uploadify to Transloadit -> S3

by bizamajig

HTML

<link rel="stylesheet" href="http://www.uploadify.com/wp-content/themes/uploadify/style.css">
<script src="http://www.uploadify.com/wp-content/themes/uploadify/js/jquery.uploadify.min.js"></script>
<div class="mvc-crud-c-submit-button-fileupload p-relative">
    Select Files
    <input class="bizamajig-ui-element-manager" id="file_upload3" type="file" />
</div>

<div id="file_upload4-0" class="mvc-crud-c-submit-button-fileupload p-relative">
    Select Files
    <div
         id="file_upload4-1"
         class="bizamajig-ui-element-manager"

         data-process_desc="Galleries"
         data-lookup_type_desc="New Gallery Items"
         data-view_by_identifier=""

         data-mvc_crud_c_request="false"
         data-mvc_crud_c_action="mvc-crud-c-submit-form"
         data-mvc_crud_c_ui_init_template="true"
         data-mvc_crud_c_form_url=""
         data-mvc_crud_c_form_submit_url="/include/bz-gallery-x-doc-insert-web-section-multi.asp"
         data-mvc_crud_c_form_type="form-ajax"
         data-mvc_crud_c_form="#bz-gallery-x-doc-insert-web-section-multi"
         data-mvc_crud_c_notify_message="The gallery items have been saved"
         data-mvc_crud_c_notify_message_source=""

         data-fileupload_request="true"
         data-fileupload_type="fileupload-multi-select"
         data-fileupload_status_message="#status-message"
         data-fileupload_path_info_element="#bizamajig_portal_owner_file_path_info"
         data-fileupload_submit_button_placeholder="#bizamajig-ui-button-placeholder"
         data-fileupload_submit_button=".mvc-crud-c-submit-button-fileupload"
         data-fileupload_queue_element_id="bizamajig-input-file-queue"
         data-fileupload_script_data='{"owner_party_id":"<%= bizamajig__input__bizamajig_portal_owner_party_id %>","owner_password_id":"<%= bizamajig__input__bizamajig_password_id %>"}'
         ></div>
</div>


<div id="test" class="bizamajig-ui-element-manager uploadWrapper">
    <input id="file_upload1"...

CSS

.uploadify-button {
        background-color: transparent;
        border: none;
        padding: 0;

	text-indent: none !important;
}
.uploadify:hover .uploadify-button {
        background-color: transparent;
}
.mvc-crud-c-submit-button-fileupload,
.mvc-crud-u-submit-button-fileupload,
#bizamajig-ui-button-file-upload,
#bizamajig-ui-button-file-save {
	padding: 5px;

	width: 100px;

    background: red;
    
	color: #ffffff;
	text-decoration: none;
	text-align: center;

	cursor: pointer;

	-moz-border-radius-bottomleft: 4px;
	-webkit-border-bottom-left-radius: 4px;
	border-bottom-left-radius: 4px;
	-moz-border-radius-topleft: 4px;
	-webkit-border-top-left-radius: 4px;
	border-top-left-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	-webkit-border-bottom-right-radius: 4px;
	border-bottom-right-radius: 4px;
	-moz-border-radius-topright: 4px;
	-webkit-border-top-right-radius: 4px;
	border-top-right-radius: 4px;
}
.mvc-crud-c-submit-button-fileupload:hover,
.mvc-crud-c-submit-button-fileupload:hover,
#bizamajig-ui-button-file-upload:hover,
#bizamajig-ui-button-file-save:hover {
	background: #FF5500; 
}

JavaScript

$(".bizamajig-ui-element-manager").each(function() {
    $( '#' + $(this).prop( 'id' ) ).uploadify({
					auto:														true,
					hideButton: 												true, // True if we want to use our own custom button
					wmode: 														'transparent',
					width: 														'32', // to match icon for Edit Image
					height: 													'32', // to match icon for Edit Image
	
					method: 													'POST',
					buttonText: 												'',
            
	
					swf: 														'',
					uploader: 													'uploader.asp?bizamajig_portal_owner_file_path_info=/content/18805', // was $('#doc_url').val()
	
					buttonImage: 												'http://bizamajig.com/resources/bizamajig/art/icon-edit-2x.png',
					cancelImg: 													'',
					fileDesc: 													'Upload a new image',
					fileExt: 													'*.*;',
					folder: 													'/content/18805', // was $('#doc_url').val()
					multi: 														false,
					queueID: 													'', // 'bizamajig-input-file-queue',
					queueSizeLimit:												1
/*
			'onFallback' : function() {
                $("#file_upload").uploadify("destroy");
            }
*/
   });
});





       var bizamajig__load__image = 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 {
                        $( '.display' ).hide().html( img ).fadeIn( 'slow' );
                    }
                },
                {
                    maxWidth: 600,
                    canvas: true
                }
            );
        };
    
       $( '.bizamajig-ui-element-manager' ).on( 'change', bizamajig__load__image );
    
    



-