2012-09-11 07:18:33 +00:00
< 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;
}
2012-12-28 17:33:03 +00:00
$(document).ready( function(){
2012-09-11 07:18:33 +00:00
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)}" }
]
});
2012-12-28 17:33:03 +00:00
if ( window['js_{$js_var}'] ) {
var collection_id = window['js_{$js_var}'];
}
2012-09-11 07:18:33 +00:00
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 );
2012-12-28 17:33:03 +00:00
if ( collection_id ) {
form_template.find('select[name=collection_id]').val( collection_id );
}
2012-09-11 07:18:33 +00:00
$('#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
Updated : upgrade_3.0.sql
Updated : edit_account.php, Now when avatar is set it redirects to user profile
Updated : EXIF Data url
Updated : queryString function regex. Old one was removing complete query string
Updated : display_manager_links(), now all variables except omo are removed from url
Added : Make profile link for photos @startup.php
Added : return_object_order in template_functions.php, This returns the order of provided omo value
Updated : Order checking @manage_collections.php and @manage_photos.php. Now only return_object_order is used
Updated : Updating of photo when it is uploaded
Updated : photo.html, single_feed.html, single_feed_comment.html, photo_form.html, user.html, video.html, /view_channel/feed.html, manage_photos.html, view_channel.html
Added : user_contacts.html, user_photos.html and user_videos.html
Added : autoComplete parameter for photo tagging
Updated : default.css, feeds.css and view_channel.css
Updated : user_contacts.php
Added : Next and Previous photos links @view_item.php
Fixed : Avatar Delete
Fixed : getProfileItem method of $userquery
2012-12-04 13:27:13 +00:00
form_template.find('.save, .save-video').on( 'click', function() {
var save_button = $('.save, .save-video');
if ( save_button.hasClass('disabled') || save_button.attr('disabled') == 'disabled' ) {
return;
}
2012-09-11 07:18:33 +00:00
var formdata = form_template.find('form').serialize();
formdata += '&updatePhoto=true';
Updated : upgrade_3.0.sql
Updated : edit_account.php, Now when avatar is set it redirects to user profile
Updated : EXIF Data url
Updated : queryString function regex. Old one was removing complete query string
Updated : display_manager_links(), now all variables except omo are removed from url
Added : Make profile link for photos @startup.php
Added : return_object_order in template_functions.php, This returns the order of provided omo value
Updated : Order checking @manage_collections.php and @manage_photos.php. Now only return_object_order is used
Updated : Updating of photo when it is uploaded
Updated : photo.html, single_feed.html, single_feed_comment.html, photo_form.html, user.html, video.html, /view_channel/feed.html, manage_photos.html, view_channel.html
Added : user_contacts.html, user_photos.html and user_videos.html
Added : autoComplete parameter for photo tagging
Updated : default.css, feeds.css and view_channel.css
Updated : user_contacts.php
Added : Next and Previous photos links @view_item.php
Fixed : Avatar Delete
Fixed : getProfileItem method of $userquery
2012-12-04 13:27:13 +00:00
var update_response = form_template.find('.update-response');
if ( update_response.css('display') == 'block' ) {
update_response.hide();
}
$(this).addClass('disabled').attr('disabled','disabled');
// Disabling form fields
disable_form_inputs( 'form-'+file.id );
amplify.request('photo_upload', formdata, function ( data ){
save_button.removeClass('disabled').removeAttr('disabled');
// Enabling form fields
enable_form_inputs( 'form-'+file.id );
if ( data.error ) {
update_response.html('< div class = "alert alert-error" > '+data.error+'< / div > ');
} else if ( data.success ) {
update_response.html('< div class = "alert alert-success" > '+data.success+'< / div > ');
}
update_response.show();
});
2012-09-11 07:18:33 +00:00
});
});
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 ) {
2012-09-13 12:18:39 +00:00
res.error.file = file;
uploader.trigger('error', res.error );
2012-09-11 07:18:33 +00:00
} 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');
2012-09-13 12:18:39 +00:00
if ( !document.getElementById('total_failed_files') ) {
total_uploaded_files_span.after('< span id = "total_failed_files" class = "total_failed_files" / > ');
2012-09-11 07:18:33 +00:00
}
$('#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');
2012-09-13 12:18:39 +00:00
$('#file-'+file.id+' .progress').addClass('progress-error progress-danger');
2012-09-11 07:18:33 +00:00
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 -->
