/** * JavaScript used by mod/photos */ $(document).ready(function() { // call initialization file if (window.File && window.FileList && window.FileReader) { UploadInit(); } $("#photo-edit-newtag").contact_autocomplete(baseurl + '/acl', 'a', false, function(data) { $("#photo-edit-newtag").val('@' + data.name); }); $(".comment-edit-form textarea").editor_autocomplete(baseurl+"/acl?f=&n=1"); $('textarea').bbco_autocomplete('bbcode'); showHideBodyTextarea(); }); function showHideBodyTextarea() { if( $('#id_visible').is(':checked')) $('#body-textarea').slideDown(); else $('#body-textarea').slideUp(); } // initialize function UploadInit() { var nickname = $('#invisible-photos-file-upload').data('nickname'); var fileselect = $("#photos-upload-choose"); var filedrag = $("#photos-upload-form"); var submit = $("#dbtn-submit"); var count = 1; $('#invisible-photos-file-upload').fileupload({ url: 'photos/' + nickname, dataType: 'json', dropZone: filedrag, maxChunkSize: 4 * 1024 * 1024, add: function(e,data) { $(data.files).each( function() { this.count = ++ count; prepareHtml(this); }); var allow_cid = ($('#photos-upload-form').data('allow_cid') || []); var allow_gid = ($('#photos-upload-form').data('allow_gid') || []); var deny_cid = ($('#photos-upload-form').data('deny_cid') || []); var deny_gid = ($('#photos-upload-form').data('deny_gid') || []); $('.acl-field').remove(); $(allow_gid).each(function(i,v) { $('#photos-upload-form').append(""); }); $(allow_cid).each(function(i,v) { $('#photos-upload-form').append(""); }); $(deny_gid).each(function(i,v) { $('#photos-upload-form').append(""); }); $(deny_cid).each(function(i,v) { $('#photos-upload-form').append(""); }); data.formData = $('#photos-upload-form').serializeArray(); data.submit(); }, progress: function(e,data) { // there will only be one file, the one we are looking for $(data.files).each( function() { var idx = this.count; // Dynamically update the percentage complete displayed in the file upload list $('#upload-progress-' + idx).html(Math.round(data.loaded / data.total * 100) + '%'); $('#upload-progress-bar-' + idx).css('background-size', Math.round(data.loaded / data.total * 100) + '%'); }); }, stop: function(e,data) { window.location.href = window.location.href; } }); $('#dbtn-submit').click(function(event) { event.preventDefault(); $('#invisible-photos-file-upload').trigger('click'); return false;}); // is XHR2 available? // var xhr = new XMLHttpRequest(); // if (xhr.upload) { // file select // fileselect.attr("multiple", 'multiple'); // fileselect.on("change", UploadFileSelectHandler); // file submit // submit.on("click", fileselect, UploadFileSelectHandler); // file drop // filedrag.on("dragover", DragDropUploadFileHover); // filedrag.on("dragleave", DragDropUploadFileHover); // filedrag.on("drop", DragDropUploadFileSelectHandler); // } // window.filesToUpload = 0; // window.fileUploadsCompleted = 0; } // file drag hover function DragDropUploadFileHover(e) { e.stopPropagation(); e.preventDefault(); e.currentTarget.className = (e.type == "dragover" ? "hover" : ""); } // file selection via drag/drop function DragDropUploadFileSelectHandler(e) { // cancel event and hover styling DragDropUploadFileHover(e); // fetch FileList object var files = e.target.files || e.originalEvent.dataTransfer.files; $('.new-upload').remove(); // process all File objects for (var i = 0, f; f = files[i]; i++) { prepareHtml(f, i); UploadFile(f, i); } } // file selection via input function UploadFileSelectHandler(e) { // fetch FileList object if(e.target.id === 'dbtn-submit') { e.preventDefault(); var files = e.data[0].files; } if(e.target.id === 'photos-upload-choose') { $('.new-upload').remove(); var files = e.target.files; } // process all File objects for (var i = 0, f; f = files[i]; i++) { if(e.target.id === 'photos-upload-choose') prepareHtml(f, i); if(e.target.id === 'dbtn-submit') { UploadFile(f, i); } } } function prepareHtml(f) { var num = f.count - 1; var i = f.count; $('#upload-index #new-upload-progress-bar-' + num.toString()).after( '' + '' + '' + f.name + '' + '' + '' + formatSizeUnits(f.size) + '' + '' + '' + '' + '' ); } function formatSizeUnits(bytes){ if (bytes>=1000000000) {bytes=(bytes/1000000000).toFixed(2)+' GB';} else if (bytes>=1000000) {bytes=(bytes/1000000).toFixed(2)+' MB';} else if (bytes>=1000) {bytes=(bytes/1000).toFixed(2)+' KB';} else if (bytes>1) {bytes=bytes+' bytes';} else if (bytes==1) {bytes=bytes+' byte';} else {bytes='0 byte';} return bytes; } // this is basically a js port of include/text.php getIconFromType() function function getIconFromType(type) { var map = { //Common file 'application/octet-stream': 'fa-file-o', //Text 'text/plain': 'fa-file-text-o', 'application/msword': 'fa-file-word-o', 'application/pdf': 'fa-file-pdf-o', 'application/vnd.oasis.opendocument.text': 'fa-file-word-o', 'application/epub+zip': 'fa-book', //Spreadsheet 'application/vnd.oasis.opendocument.spreadsheet': 'fa-file-excel-o', 'application/vnd.ms-excel': 'fa-file-excel-o', //Image 'image/jpeg': 'fa-picture-o', 'image/png': 'fa-picture-o', 'image/gif': 'fa-picture-o', 'image/svg+xml': 'fa-picture-o', //Archive 'application/zip': 'fa-file-archive-o', 'application/x-rar-compressed': 'fa-file-archive-o', //Audio 'audio/mpeg': 'fa-file-audio-o', 'audio/mp3': 'fa-file-audio-o', //webkit browsers need that 'audio/wav': 'fa-file-audio-o', 'application/ogg': 'fa-file-audio-o', 'audio/ogg': 'fa-file-audio-o', 'audio/webm': 'fa-file-audio-o', 'audio/mp4': 'fa-file-audio-o', //Video 'video/quicktime': 'fa-file-video-o', 'video/webm': 'fa-file-video-o', 'video/mp4': 'fa-file-video-o', 'video/x-matroska': 'fa-file-video-o' }; var iconFromType = 'fa-file-o'; if (type in map) { iconFromType = map[type]; } return iconFromType; } // upload files function UploadFile(file, idx) { window.filesToUpload = window.filesToUpload + 1; var xhr = new XMLHttpRequest(); xhr.withCredentials = true; // Include the SESSION cookie info for authentication (xhr.upload || xhr).addEventListener('progress', function (e) { var done = e.position || e.loaded; var total = e.totalSize || e.total; // Dynamically update the percentage complete displayed in the file upload list $('#upload-progress-' + idx).html(Math.round(done / total * 100) + '%'); $('#upload-progress-bar-' + idx).css('background-size', Math.round(done / total * 100) + '%'); if(done == total) { $('#upload-progress-' + idx).html('Processing...'); } }); xhr.addEventListener('load', function (e) { //we could possibly turn the filenames to real links here and add the delete and edit buttons to avoid page reload... $('#upload-progress-' + idx).html('Ready!'); //console.log('xhr upload complete', e); window.fileUploadsCompleted = window.fileUploadsCompleted + 1; // When all the uploads have completed, refresh the page if (window.filesToUpload > 0 && window.fileUploadsCompleted === window.filesToUpload) { window.fileUploadsCompleted = window.filesToUpload = 0; // After uploads complete, refresh browser window to display new files window.location.href = window.location.href; } }); xhr.addEventListener('error', function (e) { $('#upload-progress-' + idx).html('ERROR'); }); // POST to the entire cloud path xhr.open('post', $('#photos-upload-form').attr( 'action' ), true); var formfields = $("#photos-upload-form").serializeArray(); var data = new FormData(); $.each(formfields, function(i, field) { data.append(field.name, field.value); }); data.append('userfile', file); xhr.send(data); }