/** * EGroupware eTemplate2 - JS Number object * * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License * @package etemplate * @subpackage api * @link http://www.egroupware.org * @author Nathan Gray * @copyright Nathan Gray 2011 * @version $Id$ */ "use strict"; /*egw:uses et2_core_inputWidget; phpgwapi.jquery.jquery.html5_upload; */ /** * Class which implements file upload * * @augments et2_inputWidget */ var et2_file = et2_inputWidget.extend( { attributes: { "multiple": { "name": "Multiple files", "type": "boolean", "default": false, "description": "Allow the user to select more than one file to upload at a time. Subject to browser support." }, "max_file_size": { "name": "Maximum file size", "type": "integer", "default":"8388608", "description": "Largest file accepted, in bytes. Subject to server limitations. 8Mb = 8388608" }, "mime": { "name": "Allowed file types", "type": "string", "default": et2_no_init, "description": "Mime type (eg: image/png) or regex (eg: /^text\//i) for allowed file types" }, "blur": { "name": "Placeholder", "type": "string", "default": "", "description": "This text get displayed if an input-field is empty and does not have the input-focus (blur). It can be used to show a default value or a kind of help-text." }, "progress": { "name": "Progress node", "type": "string", "default": et2_no_init, "description": "The ID of an alternate node (div) to display progress and results." }, "onStart": { "name": "Start event handler", "type": "any", "default": et2_no_init, "description": "A (js) function called when an upload starts. Return true to continue with upload, false to cancel." }, "onFinish": { "name": "Finish event handler", "type": "any", "default": et2_no_init, "description": "A (js) function called when all files to be uploaded are finished." }, drop_target: { "name": "Optional, additional drop target for HTML5 uploads", "type": "string", "default": et2_no_init, "description": "The ID of an additional drop target for HTML5 drag-n-drop file uploads" } }, asyncOptions: {}, /** * Constructor * * @memberOf et2_file */ init: function() { this._super.apply(this, arguments); this.node = null; this.input = null; this.progress = null; if(!this.options.id) { console.warn("File widget needs an ID. Used 'file_widget'."); this.options.id = "file_widget"; } // Legacy - id ending in [] means multiple if(this.options.id.substr(-2) == "[]") { this.options.multiple = true; } // Set up the URL to have the request ID & the widget ID var instance = this.getInstanceManager(); var self = this; this.asyncOptions = jQuery.extend({ // Callbacks onStart: function(event, file_count) { // Hide any previous errors self.hideMessage(); return self.onStart(event, file_count); }, onFinish: function(event, file_count) { self.onFinish.apply(self, [event, file_count]); // Fire legacy change action when done self.change(self.input); }, onStartOne: function(event, file_name, index, file_count) { // Here 'this' is the input if(self.checkMime(this.files[index])) { return self.createStatus(event,file_name, index,file_count); } else { // Wrong mime type - show in the list of files return self.createStatus( self.egw().lang("File is of wrong type (%1 != %2)!", this.files[index].type, self.options.mime), file_name ); } }, onFinishOne: function(event, response, name, number, total) { return self.finishUpload(event,response,name,number,total);}, onProgress: function(event, progress, name, number, total) { return self.onProgress(event,progress,name,number,total);}, onError: function(event, name, error) { return self.onError(event,name,error);}, sendBoundary: window.FormData || jQuery.browser.mozilla, beforeSend: function(form) { return self.beforeSend(form);}, url: egw_json_request.prototype._assembleAjaxUrl("etemplate_widget_file::ajax_upload::etemplate"), autoclear: !(this.options.onchange) },this.asyncOptions); this.asyncOptions.fieldName = this.options.id; this.createInputWidget(); }, destroy: function() { this._super.apply(this, arguments); this.set_drop_target(null); this.node = null; this.input = null; this.progress = null; }, createInputWidget: function() { this.node = $j(document.createElement("div")).addClass("et2_file"); this.input = $j(document.createElement("input")) .attr("type", "file").attr("placeholder", this.options.blur) .appendTo(this.node); // Check for File interface, should fall back to normal form submit if missing if(typeof File != "undefined" && typeof (new XMLHttpRequest()).upload != "undefined") { this.input.html5_upload(this.asyncOptions); } else { // This may be a problem submitting via ajax } this.progress = this.options.progress ? $j(document.getElementById(this.options.progress)) : $j(document.createElement("div")).appendTo(this.node); this.progress.addClass("progress"); if(this.options.multiple) { this.input.attr("multiple","multiple"); } this.setDOMNode(this.node[0]); }, /** * Set a widget or DOM node as a HTML5 file drop target * * @param String new_target widget ID or DOM node ID to be used as a new target */ set_drop_target: function(new_target) { // Cancel old drop target if(this.options.drop_target) { var widget = this.getRoot().getWidgetById(this.options.drop_target); var drop_target = widget && widget.getDOMNode() || document.getElementById(this.options.drop_target); //$j(drop_target).off("."+this.id); } this.options.drop_target = new_target; // Set up new drop target var widget = this.getRoot().getWidgetById(this.options.drop_target); var drop_target = widget && widget.getDOMNode() || document.getElementById(this.options.drop_target); if(drop_target) { // Tell jQuery to include this property jQuery.event.props.push('dataTransfer'); var self = this; drop_target.ondrop =function(event) { return false; }; $j(drop_target) .on("drop", jQuery.proxy(function(event) { event.stopPropagation(); event.preventDefault(); this.input.removeClass("ui-state-active"); if(event.dataTransfer && event.dataTransfer.files.length > 0) { this.input[0].files = event.dataTransfer.files; } return false; }, this)) .on("dragenter",function(e) { // Accept the drop if at least one mimetype matches // Individual files will be rejected later var mime_ok = false; for(var file in e.dataTransfer.files) { mime_ok = mime_ok || self.checkMime(file); } if(!self.disabled && mime_ok) { self.input.addClass("ui-state-active"); } // Returning true cancels, return false to allow return self.disabled || !mime_ok; }) .on("dragleave", function(e) { self.input.removeClass("ui-state-active"); // Returning true cancels, return false to allow return self.disabled }) .on("dragover", function(e) { // Returning true cancels, return false to allow return self.disabled; }) .on("dragend", false); } else { this.egw().debug("warn", "Did not find file drop target %s", this.options.drop_target); } }, attachToDOM: function() { this._super.apply(this, arguments); // Override parent's behaviour to fire legacy change when finished if (this.onchange) { this.input.unbind("change.et2_inputWidget"); } }, getValue: function() { var value = this.options.value ? this.options.value : this.input.val(); return value; }, /** * You can't actually set value, but clearing works */ set_value: function(value) { if(!value || typeof value == "undefined") { value = {}; } if(jQuery.isEmptyObject(value)) { this.options.value = {}; this.progress.empty(); // Reset the HTML element this.input.wrap('