320 lines
No EOL
16 KiB
HTML
320 lines
No EOL
16 KiB
HTML
<div class="upload_computer_window">
|
||
<img src="{$imageurl}/icons/upload-drive.png" />
|
||
<div class="height20"></div>
|
||
<a class="btn btn-primary btn-large" id="plupload-pickfiles">{lang code='Select files from your computer'}</a>
|
||
<div></div>
|
||
<div class="upload-files-dropable relative">
|
||
{lang code='Drop your files here'}
|
||
<div style="width: 100%; height: 100%" id="upload-files-dropable" class="absolute left top"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- PLUPLOAD STARTS HERE
|
||
How this should work
|
||
|
||
1. init plupload with settings according to Photos
|
||
2. If user has overall progress template, bind QueueChanged event so it changes accordingly
|
||
3. bind FilesAdded event. This will include upload list block and upload form block templates, set them up and starts uploading.
|
||
4. This goes back to .php file. After overcoming all hurdles, photo file will be uploaded to target folder and return response containing, filename, file directory and extension
|
||
5. bind FileUploaded event. Get response and insert photo into clipbucket returning photo id and large photo which will be replace default banner above fields
|
||
-->
|
||
|
||
|
||
<script type="text/javascript">
|
||
var photo_extensions_json = {json_encode(,$cbphoto->exts)},
|
||
unaccpeted_files = [], unaccepted_files_count = 0;
|
||
|
||
// Ajax resquest
|
||
amplify.request.define( "photo_upload", "ajax", {
|
||
url: baseurl+"/actions/photo_uploader.php",
|
||
type: "POST",
|
||
dataType: "json",
|
||
decoder: function( data, status, xhr, success, error ) {
|
||
if ( status === "success" ) {
|
||
success( data );
|
||
} else {
|
||
error( data );
|
||
}
|
||
}
|
||
});
|
||
|
||
function cb_drag(){
|
||
//Function is called when a drag occurs...
|
||
$('#upload-files-dropable').parent().addClass('drag_start');
|
||
}
|
||
|
||
function cb_drag_stop(){
|
||
$('#upload-files-dropable').parent().removeClass('drag_start');
|
||
}
|
||
|
||
function time(raw){
|
||
|
||
var time = parseInt(raw,10)
|
||
var minutes = Math.floor(time / 60);
|
||
var seconds = time % 60;
|
||
|
||
if(minutes<10)
|
||
minutes = '0'+minutes;
|
||
if(seconds <10)
|
||
seconds = '0'+seconds;
|
||
|
||
return minutes+":"+seconds;
|
||
}
|
||
|
||
$(document).ready(function(){
|
||
var uploader = new plupload.Uploader({
|
||
runtimes : 'html5,flash',
|
||
browse_button : 'plupload-pickfiles',
|
||
container : 'upload-form-container',
|
||
drop_element : 'upload-files-dropable',
|
||
url : '{$baseurl}/actions/photo_uploader.php?upload=yes',
|
||
flash_swf_url : '/plupload/js/plupload.flash.swf',
|
||
max_file_size : '{config(max_photo_size)}mb',
|
||
filters : [
|
||
{ title : "{lang code='Photo files'}", extensions : "{implode(',',$cbphoto->exts)}" }
|
||
]
|
||
});
|
||
|
||
|
||
uploader.init();
|
||
|
||
var overall_template = $('#upload-overall-template-item').find('.upload-overall').clone();
|
||
if ( overall_template ) {
|
||
/* Only bind QueueChanged event if we find overall_template */
|
||
uploader.bind('QueueChanged', function( up ) {
|
||
var var_overall_s = (up.files.length > 1) ? 's' : '';
|
||
overall_template.find('.files_added').text( up.files.length+' file'+var_overall_s+' added');
|
||
overall_template.find('.total_size').text( plupload.formatSize( up.total.size ) );
|
||
overall_template.find('.total_uploaded_files').text( up.total.uploaded ? up.total.uploaded : 0 );
|
||
overall_template.find('.percent_upload').html( '0%' );
|
||
overall_template.find('.time').html( '00:00' );
|
||
$('#upload-overall-container').append( overall_template );
|
||
});
|
||
}
|
||
/* ------- OVERALL UPLOAD BLOCK TEMPLATE END ------- */
|
||
|
||
/* Binding files added event - START */
|
||
uploader.bind('FilesAdded', function(up, files) {
|
||
|
||
$.each( files, function(i, file) {
|
||
if ( $.inArray( file.name.split('.').pop().toLowerCase() , photo_extensions_json ) == -1 ) {
|
||
// In some browsers user can select other files, even after providing filters.
|
||
// If we have some unaccepted files, we'll display a message the amount
|
||
// junk files they have provided, if wanted we'll display their names also.
|
||
unaccpeted_files.push(file.name);
|
||
unaccepted_files_count++;
|
||
// Returning to prevent further code execution
|
||
return;
|
||
}
|
||
var name = file.name.split('.'),
|
||
extension = name.pop(),
|
||
name_without_extension = name.join('.');
|
||
|
||
/*
|
||
* #upload-list-template-item, for upload list block
|
||
* #upload-list-form-item, for upload form block
|
||
*/
|
||
var list_template = $('#upload-list-template-item').find('.upload_list').clone();
|
||
/*
|
||
* Setup ids, title, and filesize using CSS Classes
|
||
* - .upload_list | Wrapper for block | Setup id
|
||
* - .title | Name of file | setup filename
|
||
* - .total_size | Total size of file | Setup filesize
|
||
*/
|
||
list_template.attr({
|
||
id : 'file-'+file.id,
|
||
rel : file.id
|
||
});
|
||
|
||
list_template.find('.title, .video-title').text( file.name );
|
||
list_template.find('.total_size').text( plupload.formatSize( file.size ) );
|
||
$('#upload_list_container').append( list_template );
|
||
/* ------- UPLOAD LIST BLOCK TEMPLATE END ------- */
|
||
|
||
var form_template = $('#upload-form-template-item').find('.upload-form').clone();
|
||
form_template.wrap("<div id='file-form-"+file.id+"' />");
|
||
form_template = form_template.parent();
|
||
form_template.find('form').attr('id','form-'+file.id);
|
||
|
||
form_template.find('.title h2').text( file.name );
|
||
form_template.find('input[name=photo_title]').val( name_without_extension );
|
||
form_template.find('textarea[name=photo_description]').val( name_without_extension );
|
||
|
||
$('#upload-form-container').append( form_template );
|
||
/* ------- UPLOAD FORM BLOCK TEMPLATE END ------- */
|
||
|
||
/* Making tabs workable & fixing label, input for each upload
|
||
* & adding a hidden field for photo id
|
||
*/
|
||
form_template.find('.form-btn').each(function(){
|
||
var $target = $(this).attr('data-target');
|
||
$(this).attr('data-target',$target+'-'+file.id);
|
||
});
|
||
|
||
form_template.find('.tab-pane').each(function(){
|
||
var $id = $(this).attr('id');
|
||
$(this).attr('id',$id+'-'+file.id);
|
||
});
|
||
|
||
form_template.find('label[for]').each( function(){
|
||
$(this).attr('for', $(this).attr('for')+'-'+file.id );
|
||
});
|
||
|
||
form_template.find('input,select,textarea').each( function(){
|
||
$(this).attr('id', $(this).attr('id')+'-'+file.id );
|
||
});
|
||
|
||
form_template.find('form').prepend('<input type="hidden" name="photo_id" id="photo_id-'+file.id+'" value="" />');
|
||
|
||
if($('#upload_list_container .upload_list_active').length<1)
|
||
{
|
||
toggle_upload_list($('#upload_list_container .upload_list:first'));
|
||
}
|
||
|
||
$('.upload-btn-options,#upload-form-template').on('click','.form-btn',function() {
|
||
toggle_upload_tab(this);
|
||
});
|
||
|
||
// Bind click event on save button to update photo
|
||
form_template.find('.save, .save-video').on( 'click', function(){
|
||
var formdata = form_template.find('form').serialize();
|
||
formdata += '&updatePhoto=true';
|
||
|
||
alert( formdata );
|
||
});
|
||
|
||
});
|
||
|
||
uploader.start();
|
||
|
||
if ( unaccpeted_files.length >= 1 && unaccepted_files_count >= 1 ) {
|
||
var random_id = Math.round(new Date().getTime()*Math.random()+Math.random()*88*88);
|
||
var var_s = (unaccepted_files_count > 1) ? 's' : ''; var unaccepted_files_string = unaccpeted_files.join(', ');
|
||
var error_template = "<div class='alert alert-info' id='unaccepted-files-"+random_id+"'><button type='button' class='close' data-dismiss='alert'>×</button><h4>{lang code='Note about selected files'}:</h4>You have selected <a href='#' class='"+random_id+"-class'>"+unaccepted_files_count+" file"+var_s+"</a> that does not match the supported formats[ {implode(', ',$cbphoto->exts)} ]. Those have been excluded from list below.</div>";
|
||
$('#upload_list_container').before( error_template );
|
||
$('.'+random_id+'-class').click( function(){
|
||
alert( unaccepted_files_string );
|
||
});
|
||
|
||
// Reseting the variables
|
||
unaccpeted_files = [];
|
||
unaccepted_files_count = 0;
|
||
}
|
||
|
||
});
|
||
/* Binding files added event - End */
|
||
|
||
/* Binding before upload event - End */
|
||
uploader.bind('BeforeUpload', function(up, file){
|
||
// Changing status of file to uploading just before it starts
|
||
$('#file-'+file.id+' .status').html('{lang code="Uploading"}');
|
||
});
|
||
/* Binding before upload event - End */
|
||
|
||
/* Binding upload progressing event - Start */
|
||
uploader.bind('UploadProgress', function(up,file) {
|
||
/* If user have overall progress that update */
|
||
if ( overall_template ) {
|
||
var time_left_seconds_overall = Math.round(( up.total.size - up.total.loaded ) / up.total.bytesPerSec );
|
||
var time_left_overall = time( time_left_seconds_overall );
|
||
|
||
overall_template.find('.progress .bar').width( up.total.percent+'%' );
|
||
overall_template.find('.percent_upload').html( up.total.percent+'%' );
|
||
|
||
overall_template.find('.time').html( time_left_overall );
|
||
}
|
||
|
||
var speed = plupload.formatSize( up.total.bytesPerSec );
|
||
var time_left_seconds = Math.round(( file.size - file.loaded ) / up.total.bytesPerSec );
|
||
var time_left = time( time_left_seconds );
|
||
|
||
$('#file-'+file.id).find('.speed').text( speed+'/s' );
|
||
$('#file-'+file.id).find('.time').text( time_left );
|
||
|
||
$('#file-'+file.id).find('.progress .bar').width( file.percent + "%" );
|
||
$('#file-'+file.id).find('.percent_upload').html( file.percent + "%" );
|
||
|
||
});
|
||
/* Binding upload progressing event - End */
|
||
|
||
/* Binding file uploaded event - End */
|
||
uploader.bind('FileUploaded', function(up, file, response) {
|
||
|
||
var res = $.parseJSON( response.response );
|
||
|
||
if ( res.error ) {
|
||
return;
|
||
} else if ( res.success ) {
|
||
|
||
$('#file-'+file.id).addClass('upload_list_processing');
|
||
//$('#file-'+file.id+' .progress').removeClass('active');
|
||
$('#file-'+file.id+' .progress').addClass('progress-warning');
|
||
$('#file-'+file.id+' .status').html('{lang code="Processing"}');
|
||
//$('#file-'+file.id+' .time').html('{lang code="Completed"}');
|
||
|
||
var formdata = $('#file-form-'+file.id).find('form').serialize();
|
||
formdata += '&filename='+res.filename+'&ext='+res.extension;
|
||
formdata += '&directory='+res.file_directory+'&insertPhoto=yes';
|
||
|
||
// Disabling form fields
|
||
disable_form_inputs( 'form-'+file.id );
|
||
|
||
amplify.request('photo_upload', formdata, function ( data ){
|
||
// Enabling form fields
|
||
enable_form_inputs( 'form-'+file.id );
|
||
|
||
if ( data.error ) {
|
||
return;
|
||
} else if ( data.success ) {
|
||
$('#file-form-'+file.id+' form').find('input[name=photo_id]').val( data.photoID );
|
||
$('#file-form-'+file.id ).find('img.no-photo-preview').after('<img src="'+data.photoPreview+'" class="new-photo-preview" />').hide();
|
||
$('#file-form-'+file.id ).find('img.no-photo-preview').remove();
|
||
$('#file-form-'+file.id ).find('img.new-photo-preview').fadeIn('normal');
|
||
|
||
$('#file-'+file.id).removeClass('upload_list_processing').addClass('upload_list_success');
|
||
$('#file-'+file.id+' .progress').removeClass('active');
|
||
$('#file-'+file.id+' .progress').removeClass('progress-warning').addClass('progress-success');
|
||
$('#file-'+file.id+' .status').html('{lang code="Success"}');
|
||
$('#file-'+file.id+' .time').html('{lang code="Completed"}');
|
||
if ( overall_template ) {
|
||
overall_template.find('.total_uploaded_files').text( up.total.uploaded );
|
||
}
|
||
}
|
||
});
|
||
|
||
}
|
||
});
|
||
/* Binding file uploaded event - End */
|
||
|
||
/* Binding Error event - Start */
|
||
uploader.bind('Error', function(up, err) {
|
||
|
||
if ( overall_template ) {
|
||
var total_uploaded_files_span = overall_template.find('.total_uploaded_files');
|
||
if ( !overall_template.find('#total_failed_files') ) {
|
||
total_uploaded_files_span.after('<span id="total_failed_files" class=total_failed_files />');
|
||
}
|
||
$('#total_failed_files').html('/'+up.total.failed);
|
||
}
|
||
|
||
var file = err.file;
|
||
$('#file-'+file.id).addClass('upload_list_error');
|
||
$('#file-'+file.id+' .upload-stats').hide();
|
||
$('#file-'+file.id+' .alert-error').html(err.message).show();
|
||
|
||
$('#file-'+file.id+' .progress').removeClass('active');
|
||
$('#file-'+file.id+' .progress').addClass('progress-error');
|
||
up.refresh(); // Reposition Flash/Silverlight
|
||
});
|
||
/* Binding Error event - End */
|
||
|
||
/* Bind the following if user have overall_template */
|
||
if ( overall_template ) {
|
||
uploader.bind('UploadComplete', function(up, files) {
|
||
overall_template.find('.progress').removeClass('active').addClass('progress-success');
|
||
overall_template.find('.time').html('{lang code="Completed"}');
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
<!-- PLUPLOAD ENDS HERE --> |