/* Redmine - project management software Copyright (C) 2006-2013 Jean-Philippe Lang Modified by Jianfeng Tao, to upload one avatar for user*/ (function(){ function addFile(inputEl, file, eagerUpload) { var fileSpan = $('#avatar_file'); //fileSpan.append( // $('', { type: 'text', 'class': 'filename readonly', name: 'avatar[filename]', readonly: 'readonly'} ).val(file.name), // $(' ').attr({ href: "#", 'class': 'remove-upload' }).click(removeFile).toggle(!eagerUpload) //).appendTo('#avatar_fields'); if(eagerUpload) { ajaxUpload(file, fileSpan, inputEl); } return 1; } function ajaxUpload(file, fileSpan, inputEl) { function onLoadstart(e) { fileSpan.removeClass('ajax-waiting'); fileSpan.addClass('ajax-loading'); $('input:submit', $(this).parents('form')).attr('disabled', 'disabled'); } function onProgress(e) { if(e.lengthComputable) { this.progressbar( 'value', e.loaded * 100 / e.total ); } } function actualUpload(file, fileSpan, inputEl) { ajaxUpload.uploading++; uploadBlob(file, $(inputEl).data('upload-path'),$(inputEl).data('source-type'), $(inputEl).data('source-id'),{ loadstartEventHandler: onLoadstart.bind(progressSpan), progressEventHandler: onProgress.bind(progressSpan) }) .done(function(result) { progressSpan.progressbar( 'value', 100 ); progressSpan.progressbar( 'destroy'); fileSpan.find('input.description, a').css('display', 'inline-block'); }) .fail(function(result) { progressSpan.text(result.statusText); }).always(function() { ajaxUpload.uploading--; fileSpan.removeClass('ajax-loading'); var form = fileSpan.parents('form'); // if (form.queue('upload').length == 0 && ajaxUpload.uploading == 0) { // $('input:submit', form).removeAttr('disabled'); // } // form.dequeue('upload'); }); } var progressSpan = $('#upload_progressbar'); progressSpan.progressbar(); fileSpan.addClass('ajax-waiting'); var maxSyncUpload = $(inputEl).data('max-concurrent-uploads'); if(maxSyncUpload == null || maxSyncUpload <= 0 || ajaxUpload.uploading < maxSyncUpload) actualUpload(file, fileSpan, inputEl); else $(inputEl).parents('form').queue('upload', actualUpload.bind(this, file, fileSpan, inputEl)); } ajaxUpload.uploading = 0; function removeFile() { $(this).parent('span').remove(); return false; } function uploadBlob(blob, uploadUrl, source_type,source_id, options) { var actualOptions = $.extend({ loadstartEventHandler: $.noop, progressEventHandler: $.noop }, options); uploadUrl = uploadUrl + '?source_type=' + source_type + '&source_id=' + source_id; if (blob instanceof window.File) { uploadUrl += '&filename=' + encodeURIComponent(blob.name); } return $.ajax(uploadUrl, { type: 'POST', contentType: 'application/octet-stream', beforeSend: function(jqXhr) { jqXhr.setRequestHeader('Accept', 'application/js'); }, xhr: function() { var xhr = $.ajaxSettings.xhr(); xhr.upload.onloadstart = actualOptions.loadstartEventHandler; xhr.upload.onprogress = actualOptions.progressEventHandler; return xhr; }, data: blob, cache: false, processData: false }); } window.addInputAvatar = function(inputEl) { // var clearedFileInput = $(inputEl).clone().val(''); if (inputEl.files) { // upload files using ajax uploadAndAttachFiles(inputEl.files, inputEl); // $(inputEl).remove(); } else { // browser not supporting the file API, upload on form submission var avatarId; var aFilename = inputEl.value.split(/\/|\\/); avatarId = addFile(inputEl, { name: aFilename[ aFilename.length - 1 ] }, false); if (avatarId) { $(inputEl).attr({ name: 'avatar[file]', style: 'display:none;' }).appendTo('#avatar_image'); } } //clearedFileInput.insertAfter('#avatars_fields'); } function uploadAndAttachFiles(files, inputEl) { var maxFileSize = $(inputEl).data('max-file-size'); var maxFileSizeExceeded = $(inputEl).data('max-file-size-message'); var sizeExceeded = false; $.each(files, function() { if (this.size && maxFileSize && this.size > parseInt(maxFileSize)) {sizeExceeded=true;} }); if (sizeExceeded) { window.alert(maxFileSizeExceeded); } else { uploadAndTypeFiles(files,inputEl); //$.each(files, function() {addFile(inputEl, this, true);}); } } function uploadAndTypeFiles(files, inputEl) { var enableType = $(inputEl).data('file-type'); var typeSupportrdMessage = $(inputEl).data('type-support-message'); if (enableType == null || enableType.trim() == "") { $.each(files, function() {addFile(inputEl, this, true);}); return; } var typeSupported = false; $.each(files, function() { var a = this.name.split('.'); var type = a[a.length-1]; var rs = enableType.indexOf(type); if(rs >= 0) {typeSupported = true } }); if (typeSupported) { $.each(files, function() {addFile(inputEl, this, true);}); } else { window.alert(typeSupportrdMessage + enableType); } } function handleFileDropEvent(e) { $(this).removeClass('fileover'); blockEventPropagation(e); if ($.inArray('Files', e.dataTransfer.types) > -1) { uploadAndAttachFiles(e.dataTransfer.files, $('input:file.file_selector')); } } function dragOverHandler(e) { $(this).addClass('fileover'); blockEventPropagation(e); } function dragOutHandler(e) { $(this).removeClass('fileover'); blockEventPropagation(e); } function setupFileDrop() { console.log("setupFileDrop"); $('#avatar_image').on('click', function(){ console.log("click"); }); if (window.File && window.FileList && window.ProgressEvent && window.FormData) { $.event.fixHooks.drop = { props: [ 'dataTransfer' ] }; $('form div.box').has('input:file').each(function() { $(this).on({ dragover: dragOverHandler, dragleave: dragOutHandler, drop: handleFileDropEvent }); }); } } $(document).ready(setupFileDrop); })();