%percent%
%name%
%size%
+
+
+
+
+@example
+ // Invoking methods:
+ $('#uploader').plupload(options);
+
+ // Display welcome message in the notification area
+ $('#uploader').plupload('notify', 'info', "This might be obvious, but you need to click 'Add Files' to add some files.");
+
+@example
+ // Subscribing to the events...
+ // ... on initialization:
+ $('#uploader').plupload({
+ ...
+ viewchanged: function(event, args) {
+ // stuff ...
+ }
+ });
+ // ... or after initialization
+ $('#uploader').on("viewchanged", function(event, args) {
+ // stuff ...
+ });
+
+@class UI.Plupload
+@constructor
+@param {Object} settings For detailed information about each option check documentation.
+ @param {String} settings.url URL of the server-side upload handler.
+ @param {Number|String} [settings.chunk_size=0] Chunk size in bytes to slice the file into. Shorcuts with b, kb, mb, gb, tb suffixes also supported. `e.g. 204800 or "204800b" or "200kb"`. By default - disabled.
+ @param {String} [settings.file_data_name="file"] Name for the file field in Multipart formated message.
+ @param {Object} [settings.filters={}] Set of file type filters.
+ @param {Array} [settings.filters.mime_types=[]] List of file types to accept, each one defined by title and list of extensions. `e.g. {title : "Image files", extensions : "jpg,jpeg,gif,png"}`. Dispatches `plupload.FILE_EXTENSION_ERROR`
+ @param {String|Number} [settings.filters.max_file_size=0] Maximum file size that the user can pick, in bytes. Optionally supports b, kb, mb, gb, tb suffixes. `e.g. "10mb" or "1gb"`. By default - not set. Dispatches `plupload.FILE_SIZE_ERROR`.
+ @param {Boolean} [settings.filters.prevent_duplicates=false] Do not let duplicates into the queue. Dispatches `plupload.FILE_DUPLICATE_ERROR`.
+ @param {Number} [settings.filters.max_file_count=0] Limit the number of files that can reside in the queue at the same time (default is 0 - no limit).
+ @param {String} [settings.flash_swf_url] URL of the Flash swf.
+ @param {Object} [settings.headers] Custom headers to send with the upload. Hash of name/value pairs.
+ @param {Number|String} [settings.max_file_size] Maximum file size that the user can pick, in bytes. Optionally supports b, kb, mb, gb, tb suffixes. `e.g. "10mb" or "1gb"`. By default - not set. Dispatches `plupload.FILE_SIZE_ERROR`.
+ @param {Number} [settings.max_retries=0] How many times to retry the chunk or file, before triggering Error event.
+ @param {Boolean} [settings.multipart=true] Whether to send file and additional parameters as Multipart formated message.
+ @param {Object} [settings.multipart_params] Hash of key/value pairs to send with every file upload.
+ @param {Boolean} [settings.multi_selection=true] Enable ability to select multiple files at once in file dialog.
+ @param {Boolean} [settings.prevent_duplicates=false] Do not let duplicates into the queue. Dispatches `plupload.FILE_DUPLICATE_ERROR`.
+ @param {String|Object} [settings.required_features] Either comma-separated list or hash of required features that chosen runtime should absolutely possess.
+ @param {Object} [settings.resize] Enable resizng of images on client-side. Applies to `image/jpeg` and `image/png` only. `e.g. {width : 200, height : 200, quality : 90, crop: true}`
+ @param {Number} [settings.resize.width] If image is bigger, it will be resized.
+ @param {Number} [settings.resize.height] If image is bigger, it will be resized.
+ @param {Number} [settings.resize.quality=90] Compression quality for jpegs (1-100).
+ @param {Boolean} [settings.resize.crop=false] Whether to crop images to exact dimensions. By default they will be resized proportionally.
+ @param {String} [settings.runtimes="html5,flash,silverlight,html4"] Comma separated list of runtimes, that Plupload will try in turn, moving to the next if previous fails.
+ @param {String} [settings.silverlight_xap_url] URL of the Silverlight xap.
+ @param {Boolean} [settings.unique_names=false] If true will generate unique filenames for uploaded files.
+
+ @param {Boolean} [settings.autostart=false] Whether to auto start uploading right after file selection.
+ @param {Boolean} [settings.dragdrop=true] Enable ability to add file to the queue by drag'n'dropping them from the desktop.
+ @param {Boolean} [settings.rename=false] Enable ability to rename files in the queue.
+ @param {Boolean} [settings.sortable=false] Enable ability to sort files in the queue, changing their uploading priority.
+ @param {Object} [settings.buttons] Control the visibility of functional buttons.
+ @param {Boolean} [settings.buttons.browse=true] Display browse button.
+ @param {Boolean} [settings.buttons.start=true] Display start button.
+ @param {Boolean} [settings.buttons.stop=true] Display stop button.
+ @param {Object} [settings.views] Control various views of the file queue.
+ @param {Boolean} [settings.views.list=true] Enable list view.
+ @param {Boolean} [settings.views.thumbs=false] Enable thumbs view.
+ @param {String} [settings.views.default='list'] Default view.
+ @param {Boolean} [settings.views.remember=true] Whether to remember the current view (requires jQuery Cookie plugin).
+ @param {Boolean} [settings.multiple_queues=true] Re-activate the widget after each upload procedure.
+*/
+;(function(window, document, plupload, o, $) {
+
+/**
+Dispatched when the widget is initialized and ready.
+
+@event ready
+@param {plupload.Uploader} uploader Uploader instance sending the event.
+*/
+
+/**
+Dispatched when file dialog is closed.
+
+@event selected
+@param {plupload.Uploader} uploader Uploader instance sending the event.
+@param {Array} files Array of selected files represented by plupload.File objects
+*/
+
+/**
+Dispatched when file dialog is closed.
+
+@event removed
+@param {plupload.Uploader} uploader Uploader instance sending the event.
+@param {Array} files Array of removed files represented by plupload.File objects
+*/
+
+/**
+Dispatched when upload is started.
+
+@event started
+@param {plupload.Uploader} uploader Uploader instance sending the event.
+*/
+
+/**
+Dispatched when upload is stopped.
+
+@event stopped
+@param {plupload.Uploader} uploader Uploader instance sending the event.
+*/
+
+/**
+Dispatched during the upload process.
+
+@event progress
+@param {plupload.Uploader} uploader Uploader instance sending the event.
+@param {plupload.File} file File that is being uploaded (includes loaded and percent properties among others).
+ @param {Number} size Total file size in bytes.
+ @param {Number} loaded Number of bytes uploaded of the files total size.
+ @param {Number} percent Number of percentage uploaded of the file.
+*/
+
+/**
+Dispatched when file is uploaded.
+
+@event uploaded
+@param {plupload.Uploader} uploader Uploader instance sending the event.
+@param {plupload.File} file File that was uploaded.
+ @param {Enum} status Status constant matching the plupload states QUEUED, UPLOADING, FAILED, DONE.
+*/
+
+/**
+Dispatched when upload of the whole queue is complete.
+
+@event complete
+@param {plupload.Uploader} uploader Uploader instance sending the event.
+@param {Array} files Array of uploaded files represented by plupload.File objects
+*/
+
+/**
+Dispatched when the view is changed, e.g. from `list` to `thumbs` or vice versa.
+
+@event viewchanged
+@param {plupload.Uploader} uploader Uploader instance sending the event.
+@param {String} type Current view type.
+*/
+
+/**
+Dispatched when error of some kind is detected.
+
+@event error
+@param {plupload.Uploader} uploader Uploader instance sending the event.
+@param {String} error Error message.
+@param {plupload.File} file File that was uploaded.
+ @param {Enum} status Status constant matching the plupload states QUEUED, UPLOADING, FAILED, DONE.
+*/
+
+var uploaders = {};
+
+function _(str) {
+ return plupload.translate(str) || str;
+}
+
+function renderUI(obj) {
+ obj.id = obj.attr('id');
+
+ obj.html(
+ 'Your browser doesn't have Flash, Silverlight or HTML5 support.
+' +
+ '' +
+ '' +
+ '
'
+ );
+}
+
+
+$.widget("ui.plupload", {
+
+ widgetEventPrefix: '',
+
+ contents_bak: '',
+
+ options: {
+ browse_button_hover: 'ui-state-hover',
+ browse_button_active: 'ui-state-active',
+
+ filters: {},
+
+ // widget specific
+ buttons: {
+ browse: true,
+ start: true,
+ stop: true
+ },
+
+ views: {
+ list: true,
+ thumbs: false,
+ active: 'list',
+ remember: true // requires: https://github.com/carhartl/jquery-cookie, otherwise disabled even if set to true
+ },
+
+ thumb_width: 100,
+ thumb_height: 60,
+
+ multiple_queues: true, // re-use widget by default
+ dragdrop : true,
+ autostart: false,
+ sortable: false,
+ rename: false
+ },
+
+ FILE_COUNT_ERROR: -9001,
+
+ _create: function() {
+ var id = this.element.attr('id');
+ if (!id) {
+ id = plupload.guid();
+ this.element.attr('id', id);
+ }
+ this.id = id;
+
+ // backup the elements initial state
+ this.contents_bak = this.element.html();
+ renderUI(this.element);
+
+ // container, just in case
+ this.container = $('.plupload_container', this.element).attr('id', id + '_container');
+
+ this.content = $('.plupload_content', this.element);
+
+ if ($.fn.resizable) {
+ this.container.resizable({
+ handles: 's',
+ minHeight: 300
+ });
+ }
+
+ // list of files, may become sortable
+ this.filelist = $('.plupload_filelist_content', this.container)
+ .attr({
+ id: id + '_filelist',
+ unselectable: 'on'
+ });
+
+
+ // buttons
+ this.browse_button = $('.plupload_add', this.container).attr('id', id + '_browse');
+ this.start_button = $('.plupload_start', this.container).attr('id', id + '_start');
+ this.stop_button = $('.plupload_stop', this.container).attr('id', id + '_stop');
+ this.thumbs_switcher = $('#' + id + '_view_thumbs');
+ this.list_switcher = $('#' + id + '_view_list');
+
+ if ($.ui.button) {
+ this.browse_button.button({
+ icons: { primary: 'ui-icon-circle-plus' },
+ disabled: true
+ });
+
+ this.start_button.button({
+ icons: { primary: 'ui-icon-circle-arrow-e' },
+ disabled: true
+ });
+
+ this.stop_button.button({
+ icons: { primary: 'ui-icon-circle-close' }
+ });
+
+ this.list_switcher.button({
+ text: false,
+ icons: { secondary: "ui-icon-grip-dotted-horizontal" }
+ });
+
+ this.thumbs_switcher.button({
+ text: false,
+ icons: { secondary: "ui-icon-image" }
+ });
+ }
+
+ // progressbar
+ this.progressbar = $('.plupload_progress_container', this.container);
+
+ if ($.ui.progressbar) {
+ this.progressbar.progressbar();
+ }
+
+ // counter
+ this.counter = $('.plupload_count', this.element)
+ .attr({
+ id: id + '_count',
+ name: id + '_count'
+ });
+
+ // initialize uploader instance
+ this._initUploader();
+ },
+
+ _initUploader: function() {
+ var self = this
+ , id = this.id
+ , uploader
+ , options = {
+ container: id + '_buttons',
+ browse_button: id + '_browse'
+ }
+ ;
+
+ $('.plupload_buttons', this.element).attr('id', id + '_buttons');
+
+ if (self.options.dragdrop) {
+ this.filelist.parent().attr('id', this.id + '_dropbox');
+ options.drop_element = this.id + '_dropbox';
+ }
+
+ this.filelist.on('click', function(e) {
+ if ($(e.target).hasClass('plupload_action_icon')) {
+ self.removeFile($(e.target).closest('.plupload_file').attr('id'));
+ e.preventDefault();
+ }
+ });
+
+ uploader = this.uploader = uploaders[id] = new plupload.Uploader($.extend(this.options, options));
+
+ // retrieve full normalized set of options
+ this.options = uploader.getOption();
+
+ if (self.options.views.thumbs) {
+ uploader.settings.required_features.display_media = true;
+ }
+
+ // for backward compatibility
+ if (self.options.max_file_count) {
+ plupload.extend(uploader.getOption('filters'), {
+ max_file_count: self.options.max_file_count
+ });
+ }
+
+ plupload.addFileFilter('max_file_count', function(maxCount, file, cb) {
+ if (maxCount <= this.files.length - (this.total.uploaded + this.total.failed)) {
+ self.browse_button.button('disable');
+ this.disableBrowse();
+
+ this.trigger('Error', {
+ code : self.FILE_COUNT_ERROR,
+ message : _("File count error."),
+ file : file
+ });
+ cb(false);
+ } else {
+ cb(true);
+ }
+ });
+
+
+ uploader.bind('Error', function(up, err) {
+ var message, details = "";
+
+ message = '' + err.message + '';
+
+ switch (err.code) {
+ case plupload.FILE_EXTENSION_ERROR:
+ details = o.sprintf(_("File: %s"), err.file.name);
+ break;
+
+ case plupload.FILE_SIZE_ERROR:
+ details = o.sprintf(_("File: %s, size: %d, max file size: %d"), err.file.name, plupload.formatSize(err.file.size), plupload.formatSize(plupload.parseSize(up.getOption('filters').max_file_size)));
+ break;
+
+ case plupload.FILE_DUPLICATE_ERROR:
+ details = o.sprintf(_("%s already present in the queue."), err.file.name);
+ break;
+
+ case self.FILE_COUNT_ERROR:
+ details = o.sprintf(_("Upload element accepts only %d file(s) at a time. Extra files were stripped."), up.getOption('filters').max_file_count || 0);
+ break;
+
+ case plupload.IMAGE_FORMAT_ERROR :
+ details = _("Image format either wrong or not supported.");
+ break;
+
+ case plupload.IMAGE_MEMORY_ERROR :
+ details = _("Runtime ran out of available memory.");
+ break;
+
+ /* // This needs a review
+ case plupload.IMAGE_DIMENSIONS_ERROR :
+ details = o.sprintf(_('Resoultion out of boundaries! %s runtime supports images only up to %wx%hpx.'), up.runtime, up.features.maxWidth, up.features.maxHeight);
+ break; */
+
+ case plupload.HTTP_ERROR:
+ details = _("Upload URL might be wrong or doesn't exist.");
+ break;
+ }
+
+ message += " " + details + ""; + + self._trigger('error', null, { up: up, error: err } ); + + // do not show UI if no runtime can be initialized + if (err.code === plupload.INIT_ERROR) { + setTimeout(function() { + self.destroy(); + }, 1); + } else { + self.notify('error', message); + } + }); + + + uploader.bind('PostInit', function(up) { + // all buttons are optional, so they can be disabled and hidden + if (!self.options.buttons.browse) { + self.browse_button.button('disable').hide(); + up.disableBrowse(true); + } else { + self.browse_button.button('enable'); + } + + if (!self.options.buttons.start) { + self.start_button.button('disable').hide(); + } + + if (!self.options.buttons.stop) { + self.stop_button.button('disable').hide(); + } + + if (!self.options.unique_names && self.options.rename) { + self._enableRenaming(); + } + + if (self.options.dragdrop && up.features.dragdrop) { + self.filelist.parent().addClass('plupload_dropbox'); + } + + self._enableViewSwitcher(); + + self.start_button.click(function(e) { + if (!$(this).button('option', 'disabled')) { + self.start(); + } + e.preventDefault(); + }); + + self.stop_button.click(function(e) { + self.stop(); + e.preventDefault(); + }); + + self._trigger('ready', null, { up: up }); + }); + + // uploader internal events must run first + uploader.init(); + + uploader.bind('FileFiltered', function(up, file) { + self._addFiles(file); + }); + + uploader.bind('FilesAdded', function(up, files) { + self._trigger('selected', null, { up: up, files: files } ); + + // re-enable sortable + if (self.options.sortable && $.ui.sortable) { + self._enableSortingList(); + } + + self._trigger('updatelist', null, { filelist: self.filelist }); + + if (self.options.autostart) { + // set a little delay to make sure that QueueChanged triggered by the core has time to complete + setTimeout(function() { + self.start(); + }, 10); + } + }); + + uploader.bind('FilesRemoved', function(up, files) { + // destroy sortable if enabled + if ($.ui.sortable && self.options.sortable) { + $('tbody', self.filelist).sortable('destroy'); + } + + $.each(files, function(i, file) { + $('#' + file.id).toggle("highlight", function() { + $(this).remove(); + }); + }); + + if (up.files.length) { + // re-initialize sortable + if (self.options.sortable && $.ui.sortable) { + self._enableSortingList(); + } + } + + self._trigger('updatelist', null, { filelist: self.filelist }); + self._trigger('removed', null, { up: up, files: files } ); + }); + + uploader.bind('QueueChanged', function() { + self._handleState(); + }); + + uploader.bind('StateChanged', function(up) { + self._handleState(); + if (plupload.STARTED === up.state) { + self._trigger('started', null, { up: this.uploader }); + } else if (plupload.STOPPED === up.state) { + self._trigger('stopped', null, { up: this.uploader }); + } + }); + + uploader.bind('UploadFile', function(up, file) { + self._handleFileStatus(file); + }); + + uploader.bind('FileUploaded', function(up, file, result) { + self._handleFileStatus(file); + self._trigger('uploaded', null, { up: up, file: file, result: result } ); + }); + + uploader.bind('UploadProgress', function(up, file) { + self._handleFileStatus(file); + self._updateTotalProgress(); + self._trigger('progress', null, { up: up, file: file } ); + }); + + uploader.bind('UploadComplete', function(up, files) { + self._addFormFields(); + self._trigger('complete', null, { up: up, files: files } ); + }); + }, + + + _setOption: function(key, value) { + var self = this; + + if (key == 'buttons' && typeof(value) == 'object') { + value = $.extend(self.options.buttons, value); + + if (!value.browse) { + self.browse_button.button('disable').hide(); + self.uploader.disableBrowse(true); + } else { + self.browse_button.button('enable').show(); + self.uploader.disableBrowse(false); + } + + if (!value.start) { + self.start_button.button('disable').hide(); + } else { + self.start_button.button('enable').show(); + } + + if (!value.stop) { + self.stop_button.button('disable').hide(); + } else { + self.start_button.button('enable').show(); + } + } + + self.uploader.setOption(key, value); + }, + + + /** + Start upload. Triggers `start` event. + + @method start + */ + start: function() { + this.uploader.start(); + }, + + + /** + Stop upload. Triggers `stop` event. + + @method stop + */ + stop: function() { + this.uploader.stop(); + }, + + + /** + Enable browse button. + + @method enable + */ + enable: function() { + this.browse_button.button('enable'); + this.uploader.disableBrowse(false); + }, + + + /** + Disable browse button. + + @method disable + */ + disable: function() { + this.browse_button.button('disable'); + this.uploader.disableBrowse(true); + }, + + + /** + Retrieve file by its unique id. + + @method getFile + @param {String} id Unique id of the file + @return {plupload.File} + */ + getFile: function(id) { + var file; + + if (typeof id === 'number') { + file = this.uploader.files[id]; + } else { + file = this.uploader.getFile(id); + } + return file; + }, + + /** + Return array of files currently in the queue. + + @method getFiles + @return {Array} Array of files in the queue represented by plupload.File objects + */ + getFiles: function() { + return this.uploader.files; + }, + + + /** + Remove the file from the queue. + + @method removeFile + @param {plupload.File|String} file File to remove, might be specified directly or by its unique id + */ + removeFile: function(file) { + if (plupload.typeOf(file) === 'string') { + file = this.getFile(file); + } + this.uploader.removeFile(file); + }, + + + /** + Clear the file queue. + + @method clearQueue + */ + clearQueue: function() { + this.uploader.splice(); + }, + + + /** + Retrieve internal plupload.Uploader object (usually not required). + + @method getUploader + @return {plupload.Uploader} + */ + getUploader: function() { + return this.uploader; + }, + + + /** + Trigger refresh procedure, specifically browse_button re-measure and re-position operations. + Might get handy, when UI Widget is placed within the popup, that is constantly hidden and shown + again - without calling this method after each show operation, dialog trigger might get displaced + and disfunctional. + + @method refresh + */ + refresh: function() { + this.uploader.refresh(); + }, + + + /** + Display a message in notification area. + + @method notify + @param {Enum} type Type of the message, either `error` or `info` + @param {String} message The text message to display. + */ + notify: function(type, message) { + var popup = $( + '' + ); + + popup + .addClass('ui-state-' + (type === 'error' ? 'error' : 'highlight')) + .find('p .ui-icon') + .addClass('ui-icon-' + (type === 'error' ? 'alert' : 'info')) + .end() + .find('.plupload_message_close') + .click(function() { + popup.remove(); + }) + .end(); + + $('.plupload_header', this.container).append(popup); + }, + + + /** + Destroy the widget, the uploader, free associated resources and bring back original html. + + @method destroy + */ + destroy: function() { + // destroy uploader instance + this.uploader.destroy(); + + // unbind all button events + $('.plupload_button', this.element).unbind(); + + // destroy buttons + if ($.ui.button) { + $('.plupload_add, .plupload_start, .plupload_stop', this.container) + .button('destroy'); + } + + // destroy progressbar + if ($.ui.progressbar) { + this.progressbar.progressbar('destroy'); + } + + // destroy sortable behavior + if ($.ui.sortable && this.options.sortable) { + $('tbody', this.filelist).sortable('destroy'); + } + + // restore the elements initial state + this.element + .empty() + .html(this.contents_bak); + this.contents_bak = ''; + + $.Widget.prototype.destroy.apply(this); + }, + + + _handleState: function() { + var up = this.uploader + , filesPending = up.files.length - (up.total.uploaded + up.total.failed) + , maxCount = up.getOption('filters').max_file_count || 0 + ; + + if (plupload.STARTED === up.state) { + $([]) + .add(this.stop_button) + .add('.plupload_started') + .removeClass('plupload_hidden'); + + this.start_button.button('disable'); + + if (!this.options.multiple_queues) { + this.browse_button.button('disable'); + up.disableBrowse(); + } + + $('.plupload_upload_status', this.element).html(o.sprintf(_('Uploaded %d/%d files'), up.total.uploaded, up.files.length)); + $('.plupload_header_content', this.element).addClass('plupload_header_content_bw'); + } + else if (plupload.STOPPED === up.state) { + $([]) + .add(this.stop_button) + .add('.plupload_started') + .addClass('plupload_hidden'); + + if (filesPending) { + this.start_button.button('enable'); + } else { + this.start_button.button('disable'); + } + + if (this.options.multiple_queues) { + $('.plupload_header_content', this.element).removeClass('plupload_header_content_bw'); + } + + // if max_file_count defined, only that many files can be queued at once + if (this.options.multiple_queues && maxCount && maxCount > filesPending) { + this.browse_button.button('enable'); + up.disableBrowse(false); + } + + this._updateTotalProgress(); + } + + if (up.total.queued === 0) { + $('.ui-button-text', this.browse_button).html(_('Add Files')); + } else { + $('.ui-button-text', this.browse_button).html(o.sprintf(_('%d files queued'), up.total.queued)); + } + + up.refresh(); + }, + + + _handleFileStatus: function(file) { + var $file = $('#' + file.id), actionClass, iconClass; + + // since this method might be called asynchronously, file row might not yet be rendered + if (!$file.length) { + return; + } + + switch (file.status) { + case plupload.DONE: + actionClass = 'plupload_done'; + iconClass = 'plupload_action_icon ui-icon ui-icon-circle-check'; + break; + + case plupload.FAILED: + actionClass = 'ui-state-error plupload_failed'; + iconClass = 'plupload_action_icon ui-icon ui-icon-alert'; + break; + + case plupload.QUEUED: + actionClass = 'plupload_delete'; + iconClass = 'plupload_action_icon ui-icon ui-icon-circle-minus'; + break; + + case plupload.UPLOADING: + actionClass = 'ui-state-highlight plupload_uploading'; + iconClass = 'plupload_action_icon ui-icon ui-icon-circle-arrow-w'; + + // scroll uploading file into the view if its bottom boundary is out of it + var scroller = $('.plupload_scroll', this.container) + , scrollTop = scroller.scrollTop() + , scrollerHeight = scroller.height() + , rowOffset = $file.position().top + $file.height() + ; + + if (scrollerHeight < rowOffset) { + scroller.scrollTop(scrollTop + rowOffset - scrollerHeight); + } + + // Set file specific progress + $file + .find('.plupload_file_percent') + .html(file.percent + '%') + .end() + .find('.plupload_file_progress') + .css('width', file.percent + '%') + .end() + .find('.plupload_file_size') + .html(plupload.formatSize(file.size)); + break; + } + actionClass += ' ui-state-default plupload_file'; + + $file + .attr('class', actionClass) + .find('.plupload_action_icon') + .attr('class', iconClass); + }, + + + _updateTotalProgress: function() { + var up = this.uploader; + + // Scroll to end of file list + this.filelist[0].scrollTop = this.filelist[0].scrollHeight; + + this.progressbar.progressbar('value', up.total.percent); + + this.element + .find('.plupload_total_status') + .html(up.total.percent + '%') + .end() + .find('.plupload_total_file_size') + .html(plupload.formatSize(up.total.size)) + .end() + .find('.plupload_upload_status') + .html(o.sprintf(_('Uploaded %d/%d files'), up.total.uploaded, up.files.length)); + }, + + + _displayThumbs: function() { + var self = this + , tw, th // thumb width/height + , cols + , num = 0 // number of simultaneously visible thumbs + , thumbs = [] // array of thumbs to preload at any given moment + , loading = false + ; + + if (!this.options.views.thumbs) { + return; + } + + + function onLast(el, eventName, cb) { + var timer; + + el.on(eventName, function() { + clearTimeout(timer); + timer = setTimeout(function() { + clearTimeout(timer); + cb(); + }, 300); + }); + } + + + // calculate number of simultaneously visible thumbs + function measure() { + if (!tw || !th) { + var wrapper = $('.plupload_file:eq(0)', self.filelist); + tw = wrapper.outerWidth(true); + th = wrapper.outerHeight(true); + } + + var aw = self.content.width(), ah = self.content.height(); + cols = Math.floor(aw / tw); + num = cols * (Math.ceil(ah / th) + 1); + } + + + function pickThumbsToLoad() { + // calculate index of virst visible thumb + var startIdx = Math.floor(self.content.scrollTop() / th) * cols; + // get potentially visible thumbs that are not yet visible + thumbs = $('.plupload_file .plupload_file_thumb', self.filelist) + .slice(startIdx, startIdx + num) + .filter('.plupload_thumb_toload') + .get(); + } + + + function init() { + function mpl() { // measure, pick, load + if (self.view_mode !== 'thumbs') { + return; + } + measure(); + pickThumbsToLoad(); + lazyLoad(); + } + + if ($.fn.resizable) { + onLast(self.container, 'resize', mpl); + } + + onLast(self.window, 'resize', mpl); + onLast(self.content, 'scroll', mpl); + + self.element.on('viewchanged selected', mpl); + + mpl(); + } + + + function preloadThumb(file, cb) { + var img = new o.Image(); + + img.onload = function() { + var thumb = $('#' + file.id + ' .plupload_file_thumb', self.filelist); + this.embed(thumb[0], { + width: self.options.thumb_width, + height: self.options.thumb_height, + crop: true, + preserveHeaders: false, + swf_url: o.resolveUrl(self.options.flash_swf_url), + xap_url: o.resolveUrl(self.options.silverlight_xap_url) + }); + }; + + img.bind("embedded error", function(e) { + $('#' + file.id, self.filelist) + .find('.plupload_file_thumb') + .removeClass('plupload_thumb_loading') + .addClass('plupload_thumb_' + e.type) + ; + this.destroy(); + setTimeout(cb, 1); // detach, otherwise ui might hang (in SilverLight for example) + }); + + $('#' + file.id, self.filelist) + .find('.plupload_file_thumb') + .removeClass('plupload_thumb_toload') + .addClass('plupload_thumb_loading') + ; + img.load(file.getSource()); + } + + + function lazyLoad() { + if (self.view_mode !== 'thumbs' || loading) { + return; + } + + pickThumbsToLoad(); + if (!thumbs.length) { + return; + } + + loading = true; + + preloadThumb(self.getFile($(thumbs.shift()).closest('.plupload_file').attr('id')), function() { + loading = false; + lazyLoad(); + }); + } + + // this has to run only once to measure structures and bind listeners + this.element.on('selected', function onselected() { + self.element.off('selected', onselected); + init(); + }); + }, + + + _addFiles: function(files) { + var self = this, file_html, html = ''; + + file_html = '
' +
+ '' +
+ '
' +
+ '' +
+ '' +
+ '{percent} ' +
+ '
' +
+ '' +
+ '{name} ' +
+ '
' +
+ '' +
+ '' +
+ '
' +
+ '{size}
' +
+ '
+ Browse...
+
+
+
+ */
+ var dispatches = [
+ /**
+ Dispatched when runtime is connected and file-picker is ready to be used.
+
+ @event ready
+ @param {Object} event
+ */
+ 'ready',
+
+ /**
+ Dispatched right after [ready](#event_ready) event, and whenever [refresh()](#method_refresh) is invoked.
+ Check [corresponding documentation entry](#method_refresh) for more info.
+
+ @event refresh
+ @param {Object} event
+ */
+
+ /**
+ Dispatched when selection of files in the dialog is complete.
+
+ @event change
+ @param {Object} event
+ */
+ 'change',
+
+ 'cancel', // TODO: might be useful
+
+ /**
+ Dispatched when mouse cursor enters file-picker area. Can be used to style element
+ accordingly.
+
+ @event mouseenter
+ @param {Object} event
+ */
+ 'mouseenter',
+
+ /**
+ Dispatched when mouse cursor leaves file-picker area. Can be used to style element
+ accordingly.
+
+ @event mouseleave
+ @param {Object} event
+ */
+ 'mouseleave',
+
+ /**
+ Dispatched when functional mouse button is pressed on top of file-picker area.
+
+ @event mousedown
+ @param {Object} event
+ */
+ 'mousedown',
+
+ /**
+ Dispatched when functional mouse button is released on top of file-picker area.
+
+ @event mouseup
+ @param {Object} event
+ */
+ 'mouseup'
+ ];
+
+ function FileInput(options) {
+ if (MXI_DEBUG) {
+ Env.log("Instantiating FileInput...");
+ }
+
+ var self = this,
+ container, browseButton, defaults;
+
+ // if flat argument passed it should be browse_button id
+ if (Basic.inArray(Basic.typeOf(options), ['string', 'node']) !== -1) {
+ options = { browse_button : options };
+ }
+
+ // this will help us to find proper default container
+ browseButton = Dom.get(options.browse_button);
+ if (!browseButton) {
+ // browse button is required
+ throw new x.DOMException(x.DOMException.NOT_FOUND_ERR);
+ }
+
+ // figure out the options
+ defaults = {
+ accept: [{
+ title: I18n.translate('All Files'),
+ extensions: '*'
+ }],
+ name: 'file',
+ multiple: false,
+ required_caps: false,
+ container: browseButton.parentNode || document.body
+ };
+
+ options = Basic.extend({}, defaults, options);
+
+ // convert to object representation
+ if (typeof(options.required_caps) === 'string') {
+ options.required_caps = Runtime.parseCaps(options.required_caps);
+ }
+
+ // normalize accept option (could be list of mime types or array of title/extensions pairs)
+ if (typeof(options.accept) === 'string') {
+ options.accept = Mime.mimes2extList(options.accept);
+ }
+
+ container = Dom.get(options.container);
+ // make sure we have container
+ if (!container) {
+ container = document.body;
+ }
+
+ // make container relative, if it's not
+ if (Dom.getStyle(container, 'position') === 'static') {
+ container.style.position = 'relative';
+ }
+
+ container = browseButton = null; // IE
+
+ RuntimeClient.call(self);
+
+ Basic.extend(self, {
+ /**
+ Unique id of the component
+
+ @property uid
+ @protected
+ @readOnly
+ @type {String}
+ @default UID
+ */
+ uid: Basic.guid('uid_'),
+
+ /**
+ Unique id of the connected runtime, if any.
+
+ @property ruid
+ @protected
+ @type {String}
+ */
+ ruid: null,
+
+ /**
+ Unique id of the runtime container. Useful to get hold of it for various manipulations.
+
+ @property shimid
+ @protected
+ @type {String}
+ */
+ shimid: null,
+
+ /**
+ Array of selected mOxie.File objects
+
+ @property files
+ @type {Array}
+ @default null
+ */
+ files: null,
+
+ /**
+ Initializes the file-picker, connects it to runtime and dispatches event ready when done.
+
+ @method init
+ */
+ init: function() {
+ self.bind('RuntimeInit', function(e, runtime) {
+ self.ruid = runtime.uid;
+ self.shimid = runtime.shimid;
+
+ self.bind("Ready", function() {
+ self.trigger("Refresh");
+ }, 999);
+
+ // re-position and resize shim container
+ self.bind('Refresh', function() {
+ var pos, size, browseButton, shimContainer;
+
+ browseButton = Dom.get(options.browse_button);
+ shimContainer = Dom.get(runtime.shimid); // do not use runtime.getShimContainer(), since it will create container if it doesn't exist
+
+ if (browseButton) {
+ pos = Dom.getPos(browseButton, Dom.get(options.container));
+ size = Dom.getSize(browseButton);
+
+ if (shimContainer) {
+ Basic.extend(shimContainer.style, {
+ top : pos.y + 'px',
+ left : pos.x + 'px',
+ width : size.w + 'px',
+ height : size.h + 'px'
+ });
+ }
+ }
+ shimContainer = browseButton = null;
+ });
+
+ runtime.exec.call(self, 'FileInput', 'init', options);
+ });
+
+ // runtime needs: options.required_features, options.runtime_order and options.container
+ self.connectRuntime(Basic.extend({}, options, {
+ required_caps: {
+ select_file: true
+ }
+ }));
+ },
+
+ /**
+ Disables file-picker element, so that it doesn't react to mouse clicks.
+
+ @method disable
+ @param {Boolean} [state=true] Disable component if - true, enable if - false
+ */
+ disable: function(state) {
+ var runtime = this.getRuntime();
+ if (runtime) {
+ runtime.exec.call(this, 'FileInput', 'disable', Basic.typeOf(state) === 'undefined' ? true : state);
+ }
+ },
+
+
+ /**
+ Reposition and resize dialog trigger to match the position and size of browse_button element.
+
+ @method refresh
+ */
+ refresh: function() {
+ self.trigger("Refresh");
+ },
+
+
+ /**
+ Destroy component.
+
+ @method destroy
+ */
+ destroy: function() {
+ var runtime = this.getRuntime();
+ if (runtime) {
+ runtime.exec.call(this, 'FileInput', 'destroy');
+ this.disconnectRuntime();
+ }
+
+ if (Basic.typeOf(this.files) === 'array') {
+ // no sense in leaving associated files behind
+ Basic.each(this.files, function(file) {
+ file.destroy();
+ });
+ }
+ this.files = null;
+
+ this.unbindAll();
+ }
+ });
+
+ this.handleEventProps(dispatches);
+ }
+
+ FileInput.prototype = EventTarget.instance;
+
+ return FileInput;
+});
+
+// Included from: src/javascript/core/utils/Encode.js
+
+/**
+ * Encode.js
+ *
+ * Copyright 2013, Moxiecode Systems AB
+ * Released under GPL License.
+ *
+ * License: http://www.plupload.com/license
+ * Contributing: http://www.plupload.com/contributing
+ */
+
+define('moxie/core/utils/Encode', [], function() {
+
+ /**
+ Encode string with UTF-8
+
+ @method utf8_encode
+ @for Utils
+ @static
+ @param {String} str String to encode
+ @return {String} UTF-8 encoded string
+ */
+ var utf8_encode = function(str) {
+ return unescape(encodeURIComponent(str));
+ };
+
+ /**
+ Decode UTF-8 encoded string
+
+ @method utf8_decode
+ @static
+ @param {String} str String to decode
+ @return {String} Decoded string
+ */
+ var utf8_decode = function(str_data) {
+ return decodeURIComponent(escape(str_data));
+ };
+
+ /**
+ Decode Base64 encoded string (uses browser's default method if available),
+ from: https://raw.github.com/kvz/phpjs/master/functions/url/base64_decode.js
+
+ @method atob
+ @static
+ @param {String} data String to decode
+ @return {String} Decoded string
+ */
+ var atob = function(data, utf8) {
+ if (typeof(window.atob) === 'function') {
+ return utf8 ? utf8_decode(window.atob(data)) : window.atob(data);
+ }
+
+ // http://kevin.vanzonneveld.net
+ // + original by: Tyler Akins (http://rumkin.com)
+ // + improved by: Thunder.m
+ // + input by: Aman Gupta
+ // + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
+ // + bugfixed by: Onno Marsman
+ // + bugfixed by: Pellentesque Malesuada
+ // + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
+ // + input by: Brett Zamir (http://brett-zamir.me)
+ // + bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
+ // * example 1: base64_decode('S2V2aW4gdmFuIFpvbm5ldmVsZA==');
+ // * returns 1: 'Kevin van Zonneveld'
+ // mozilla has this native
+ // - but breaks in 2.0.0.12!
+ //if (typeof this.window.atob == 'function') {
+ // return atob(data);
+ //}
+ var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
+ var o1, o2, o3, h1, h2, h3, h4, bits, i = 0,
+ ac = 0,
+ dec = "",
+ tmp_arr = [];
+
+ if (!data) {
+ return data;
+ }
+
+ data += '';
+
+ do { // unpack four hexets into three octets using index points in b64
+ h1 = b64.indexOf(data.charAt(i++));
+ h2 = b64.indexOf(data.charAt(i++));
+ h3 = b64.indexOf(data.charAt(i++));
+ h4 = b64.indexOf(data.charAt(i++));
+
+ bits = h1 << 18 | h2 << 12 | h3 << 6 | h4;
+
+ o1 = bits >> 16 & 0xff;
+ o2 = bits >> 8 & 0xff;
+ o3 = bits & 0xff;
+
+ if (h3 == 64) {
+ tmp_arr[ac++] = String.fromCharCode(o1);
+ } else if (h4 == 64) {
+ tmp_arr[ac++] = String.fromCharCode(o1, o2);
+ } else {
+ tmp_arr[ac++] = String.fromCharCode(o1, o2, o3);
+ }
+ } while (i < data.length);
+
+ dec = tmp_arr.join('');
+
+ return utf8 ? utf8_decode(dec) : dec;
+ };
+
+ /**
+ Base64 encode string (uses browser's default method if available),
+ from: https://raw.github.com/kvz/phpjs/master/functions/url/base64_encode.js
+
+ @method btoa
+ @static
+ @param {String} data String to encode
+ @return {String} Base64 encoded string
+ */
+ var btoa = function(data, utf8) {
+ if (utf8) {
+ data = utf8_encode(data);
+ }
+
+ if (typeof(window.btoa) === 'function') {
+ return window.btoa(data);
+ }
+
+ // http://kevin.vanzonneveld.net
+ // + original by: Tyler Akins (http://rumkin.com)
+ // + improved by: Bayron Guevara
+ // + improved by: Thunder.m
+ // + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
+ // + bugfixed by: Pellentesque Malesuada
+ // + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
+ // + improved by: Rafał Kukawski (http://kukawski.pl)
+ // * example 1: base64_encode('Kevin van Zonneveld');
+ // * returns 1: 'S2V2aW4gdmFuIFpvbm5ldmVsZA=='
+ // mozilla has this native
+ // - but breaks in 2.0.0.12!
+ var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
+ var o1, o2, o3, h1, h2, h3, h4, bits, i = 0,
+ ac = 0,
+ enc = "",
+ tmp_arr = [];
+
+ if (!data) {
+ return data;
+ }
+
+ do { // pack three octets into four hexets
+ o1 = data.charCodeAt(i++);
+ o2 = data.charCodeAt(i++);
+ o3 = data.charCodeAt(i++);
+
+ bits = o1 << 16 | o2 << 8 | o3;
+
+ h1 = bits >> 18 & 0x3f;
+ h2 = bits >> 12 & 0x3f;
+ h3 = bits >> 6 & 0x3f;
+ h4 = bits & 0x3f;
+
+ // use hexets to index into b64, and append result to encoded string
+ tmp_arr[ac++] = b64.charAt(h1) + b64.charAt(h2) + b64.charAt(h3) + b64.charAt(h4);
+ } while (i < data.length);
+
+ enc = tmp_arr.join('');
+
+ var r = data.length % 3;
+
+ return (r ? enc.slice(0, r - 3) : enc) + '==='.slice(r || 3);
+ };
+
+
+ return {
+ utf8_encode: utf8_encode,
+ utf8_decode: utf8_decode,
+ atob: atob,
+ btoa: btoa
+ };
+});
+
// Included from: src/javascript/file/Blob.js
/**
@@ -3044,10 +3523,10 @@ define('moxie/file/Blob', [
data = data || '';
// if dataUrl, convert to binary string
- var matches = data.match(/^data:([^;]*);base64,/);
- if (matches) {
- this.type = matches[1];
- data = Encode.atob(data.substring(data.indexOf('base64,') + 7));
+ if (data.substr(0, 5) == 'data:') {
+ var base64Offset = data.indexOf(';base64,');
+ this.type = data.substring(5, base64Offset);
+ data = Encode.atob(data.substring(base64Offset + 8));
}
this.size = data.length;
@@ -3113,44 +3592,32 @@ define('moxie/file/File', [
@param {Object} file Object "Native" file object, as it is represented in the runtime
*/
function File(ruid, file) {
- var name, type;
-
if (!file) { // avoid extra errors in case we overlooked something
file = {};
}
- // figure out the type
- if (file.type && file.type !== '') {
- type = file.type;
- } else {
- type = Mime.getFileMime(file.name);
+ Blob.apply(this, arguments);
+
+ if (!this.type) {
+ this.type = Mime.getFileMime(file.name);
}
// sanitize file name or generate new one
+ var name;
if (file.name) {
name = file.name.replace(/\\/g, '/');
name = name.substr(name.lastIndexOf('/') + 1);
- } else {
- var prefix = type.split('/')[0];
+ } else if (this.type) {
+ var prefix = this.type.split('/')[0];
name = Basic.guid((prefix !== '' ? prefix : 'file') + '_');
- if (Mime.extensions[type]) {
- name += '.' + Mime.extensions[type][0]; // append proper extension if possible
+ if (Mime.extensions[this.type]) {
+ name += '.' + Mime.extensions[this.type][0]; // append proper extension if possible
}
}
-
- Blob.apply(this, arguments);
+
Basic.extend(this, {
- /**
- File mime type
-
- @property type
- @type {String}
- @default ''
- */
- type: type || '',
-
/**
File name
@@ -3159,6 +3626,15 @@ define('moxie/file/File', [
@default UID
*/
name: name || Basic.guid('file_'),
+
+ /**
+ Relative path to the file inside a directory
+
+ @property relativePath
+ @type {String}
+ @default ''
+ */
+ relativePath: '',
/**
Date of last modification
@@ -3176,343 +3652,6 @@ define('moxie/file/File', [
return File;
});
-// Included from: src/javascript/file/FileInput.js
-
-/**
- * FileInput.js
- *
- * Copyright 2013, Moxiecode Systems AB
- * Released under GPL License.
- *
- * License: http://www.plupload.com/license
- * Contributing: http://www.plupload.com/contributing
- */
-
-define('moxie/file/FileInput', [
- 'moxie/core/utils/Basic',
- 'moxie/core/utils/Mime',
- 'moxie/core/utils/Dom',
- 'moxie/core/Exceptions',
- 'moxie/core/EventTarget',
- 'moxie/core/I18n',
- 'moxie/file/File',
- 'moxie/runtime/Runtime',
- 'moxie/runtime/RuntimeClient'
-], function(Basic, Mime, Dom, x, EventTarget, I18n, File, Runtime, RuntimeClient) {
- /**
- Provides a convenient way to create cross-browser file-picker. Generates file selection dialog on click,
- converts selected files to _File_ objects, to be used in conjunction with _Image_, preloaded in memory
- with _FileReader_ or uploaded to a server through _XMLHttpRequest_.
-
- @class FileInput
- @constructor
- @extends EventTarget
- @uses RuntimeClient
- @param {Object|String|DOMElement} options If options is string or node, argument is considered as _browse\_button_.
- @param {String|DOMElement} options.browse_button DOM Element to turn into file picker.
- @param {Array} [options.accept] Array of mime types to accept. By default accepts all.
- @param {String} [options.file='file'] Name of the file field (not the filename).
- @param {Boolean} [options.multiple=false] Enable selection of multiple files.
- @param {Boolean} [options.directory=false] Turn file input into the folder input (cannot be both at the same time).
- @param {String|DOMElement} [options.container] DOM Element to use as a container for file-picker. Defaults to parentNode
- for _browse\_button_.
- @param {Object|String} [options.required_caps] Set of required capabilities, that chosen runtime must support.
-
- @example
-
- Browse...
-
-
-
- */
- var dispatches = [
- /**
- Dispatched when runtime is connected and file-picker is ready to be used.
-
- @event ready
- @param {Object} event
- */
- 'ready',
-
- /**
- Dispatched right after [ready](#event_ready) event, and whenever [refresh()](#method_refresh) is invoked.
- Check [corresponding documentation entry](#method_refresh) for more info.
-
- @event refresh
- @param {Object} event
- */
-
- /**
- Dispatched when selection of files in the dialog is complete.
-
- @event change
- @param {Object} event
- */
- 'change',
-
- 'cancel', // TODO: might be useful
-
- /**
- Dispatched when mouse cursor enters file-picker area. Can be used to style element
- accordingly.
-
- @event mouseenter
- @param {Object} event
- */
- 'mouseenter',
-
- /**
- Dispatched when mouse cursor leaves file-picker area. Can be used to style element
- accordingly.
-
- @event mouseleave
- @param {Object} event
- */
- 'mouseleave',
-
- /**
- Dispatched when functional mouse button is pressed on top of file-picker area.
-
- @event mousedown
- @param {Object} event
- */
- 'mousedown',
-
- /**
- Dispatched when functional mouse button is released on top of file-picker area.
-
- @event mouseup
- @param {Object} event
- */
- 'mouseup'
- ];
-
- function FileInput(options) {
- var self = this,
- container, browseButton, defaults;
-
- // if flat argument passed it should be browse_button id
- if (Basic.inArray(Basic.typeOf(options), ['string', 'node']) !== -1) {
- options = { browse_button : options };
- }
-
- // this will help us to find proper default container
- browseButton = Dom.get(options.browse_button);
- if (!browseButton) {
- // browse button is required
- throw new x.DOMException(x.DOMException.NOT_FOUND_ERR);
- }
-
- // figure out the options
- defaults = {
- accept: [{
- title: I18n.translate('All Files'),
- extensions: '*'
- }],
- name: 'file',
- multiple: false,
- required_caps: false,
- container: browseButton.parentNode || document.body
- };
-
- options = Basic.extend({}, defaults, options);
-
- // convert to object representation
- if (typeof(options.required_caps) === 'string') {
- options.required_caps = Runtime.parseCaps(options.required_caps);
- }
-
- // normalize accept option (could be list of mime types or array of title/extensions pairs)
- if (typeof(options.accept) === 'string') {
- options.accept = Mime.mimes2extList(options.accept);
- }
-
- container = Dom.get(options.container);
- // make sure we have container
- if (!container) {
- container = document.body;
- }
-
- // make container relative, if it's not
- if (Dom.getStyle(container, 'position') === 'static') {
- container.style.position = 'relative';
- }
-
- container = browseButton = null; // IE
-
- RuntimeClient.call(self);
-
- Basic.extend(self, {
- /**
- Unique id of the component
-
- @property uid
- @protected
- @readOnly
- @type {String}
- @default UID
- */
- uid: Basic.guid('uid_'),
-
- /**
- Unique id of the connected runtime, if any.
-
- @property ruid
- @protected
- @type {String}
- */
- ruid: null,
-
- /**
- Unique id of the runtime container. Useful to get hold of it for various manipulations.
-
- @property shimid
- @protected
- @type {String}
- */
- shimid: null,
-
- /**
- Array of selected mOxie.File objects
-
- @property files
- @type {Array}
- @default null
- */
- files: null,
-
- /**
- Initializes the file-picker, connects it to runtime and dispatches event ready when done.
-
- @method init
- */
- init: function() {
- self.convertEventPropsToHandlers(dispatches);
-
- self.bind('RuntimeInit', function(e, runtime) {
- self.ruid = runtime.uid;
- self.shimid = runtime.shimid;
-
- self.bind("Ready", function() {
- self.trigger("Refresh");
- }, 999);
-
- self.bind("Change", function() {
- var files = runtime.exec.call(self, 'FileInput', 'getFiles');
-
- self.files = [];
-
- Basic.each(files, function(file) {
- // ignore empty files (IE10 for example hangs if you try to send them via XHR)
- if (file.size === 0) {
- return true;
- }
- self.files.push(new File(self.ruid, file));
- });
- }, 999);
-
- // re-position and resize shim container
- self.bind('Refresh', function() {
- var pos, size, browseButton, shimContainer;
-
- browseButton = Dom.get(options.browse_button);
- shimContainer = Dom.get(runtime.shimid); // do not use runtime.getShimContainer(), since it will create container if it doesn't exist
-
- if (browseButton) {
- pos = Dom.getPos(browseButton, Dom.get(options.container));
- size = Dom.getSize(browseButton);
-
- if (shimContainer) {
- Basic.extend(shimContainer.style, {
- top : pos.y + 'px',
- left : pos.x + 'px',
- width : size.w + 'px',
- height : size.h + 'px'
- });
- }
- }
- shimContainer = browseButton = null;
- });
-
- runtime.exec.call(self, 'FileInput', 'init', options);
- });
-
- // runtime needs: options.required_features, options.runtime_order and options.container
- self.connectRuntime(Basic.extend({}, options, {
- required_caps: {
- select_file: true
- }
- }));
- },
-
- /**
- Disables file-picker element, so that it doesn't react to mouse clicks.
-
- @method disable
- @param {Boolean} [state=true] Disable component if - true, enable if - false
- */
- disable: function(state) {
- var runtime = this.getRuntime();
- if (runtime) {
- runtime.exec.call(this, 'FileInput', 'disable', Basic.typeOf(state) === 'undefined' ? true : state);
- }
- },
-
-
- /**
- Reposition and resize dialog trigger to match the position and size of browse_button element.
-
- @method refresh
- */
- refresh: function() {
- self.trigger("Refresh");
- },
-
-
- /**
- Destroy component.
-
- @method destroy
- */
- destroy: function() {
- var runtime = this.getRuntime();
- if (runtime) {
- runtime.exec.call(this, 'FileInput', 'destroy');
- this.disconnectRuntime();
- }
-
- if (Basic.typeOf(this.files) === 'array') {
- // no sense in leaving associated files behind
- Basic.each(this.files, function(file) {
- file.destroy();
- });
- }
- this.files = null;
- }
- });
- }
-
- FileInput.prototype = EventTarget.instance;
-
- return FileInput;
-});
-
// Included from: src/javascript/file/FileDrop.js
/**
@@ -3530,11 +3669,12 @@ define('moxie/file/FileDrop', [
'moxie/core/utils/Dom',
'moxie/core/Exceptions',
'moxie/core/utils/Basic',
+ 'moxie/core/utils/Env',
'moxie/file/File',
'moxie/runtime/RuntimeClient',
'moxie/core/EventTarget',
'moxie/core/utils/Mime'
-], function(I18n, Dom, x, Basic, File, RuntimeClient, EventTarget, Mime) {
+], function(I18n, Dom, x, Basic, Env, File, RuntimeClient, EventTarget, Mime) {
/**
Turn arbitrary DOM element to a drop zone accepting files. Converts selected files to _File_ objects, to be used
in conjunction with _Image_, preloaded in memory with _FileReader_ or uploaded to a server through
@@ -3611,6 +3751,10 @@ define('moxie/file/FileDrop', [
];
function FileDrop(options) {
+ if (MXI_DEBUG) {
+ Env.log("Instantiating FileDrop...");
+ }
+
var self = this, defaults;
// if flat argument passed it should be drop_zone id
@@ -3653,25 +3797,10 @@ define('moxie/file/FileDrop', [
files: null,
- init: function() {
-
- self.convertEventPropsToHandlers(dispatches);
-
+ init: function() {
self.bind('RuntimeInit', function(e, runtime) {
self.ruid = runtime.uid;
-
- self.bind("Drop", function() {
- var files = runtime.exec.call(self, 'FileDrop', 'getFiles');
-
- self.files = [];
-
- Basic.each(files, function(file) {
- self.files.push(new File(self.ruid, file));
- });
- }, 999);
-
runtime.exec.call(self, 'FileDrop', 'init', options);
-
self.dispatchEvent('ready');
});
@@ -3686,8 +3815,12 @@ define('moxie/file/FileDrop', [
this.disconnectRuntime();
}
this.files = null;
+
+ this.unbindAll();
}
});
+
+ this.handleEventProps(dispatches);
}
FileDrop.prototype = EventTarget.instance;
@@ -3695,48 +3828,6 @@ define('moxie/file/FileDrop', [
return FileDrop;
});
-// Included from: src/javascript/runtime/RuntimeTarget.js
-
-/**
- * RuntimeTarget.js
- *
- * Copyright 2013, Moxiecode Systems AB
- * Released under GPL License.
- *
- * License: http://www.plupload.com/license
- * Contributing: http://www.plupload.com/contributing
- */
-
-define('moxie/runtime/RuntimeTarget', [
- 'moxie/core/utils/Basic',
- 'moxie/runtime/RuntimeClient',
- "moxie/core/EventTarget"
-], function(Basic, RuntimeClient, EventTarget) {
- /**
- Instance of this class can be used as a target for the events dispatched by shims,
- when allowing them onto components is for either reason inappropriate
-
- @class RuntimeTarget
- @constructor
- @protected
- @extends EventTarget
- */
- function RuntimeTarget() {
- this.uid = Basic.guid('uid_');
-
- RuntimeClient.call(this);
-
- this.destroy = function() {
- this.disconnectRuntime();
- this.unbindAll();
- };
- }
-
- RuntimeTarget.prototype = EventTarget.instance;
-
- return RuntimeTarget;
-});
-
// Included from: src/javascript/file/FileReader.js
/**
@@ -3755,9 +3846,8 @@ define('moxie/file/FileReader', [
'moxie/core/Exceptions',
'moxie/core/EventTarget',
'moxie/file/Blob',
- 'moxie/file/File',
- 'moxie/runtime/RuntimeTarget'
-], function(Basic, Encode, x, EventTarget, Blob, File, RuntimeTarget) {
+ 'moxie/runtime/RuntimeClient'
+], function(Basic, Encode, x, EventTarget, Blob, RuntimeClient) {
/**
Utility for preloading o.Blob/o.File objects in memory. By design closely follows [W3C FileReader](http://www.w3.org/TR/FileAPI/#dfn-filereader)
interface. Where possible uses native FileReader, where - not falls back to shims.
@@ -3819,8 +3909,9 @@ define('moxie/file/FileReader', [
];
function FileReader() {
- var self = this, _fr;
-
+
+ RuntimeClient.call(this);
+
Basic.extend(this, {
/**
UID of the component instance.
@@ -3900,9 +3991,7 @@ define('moxie/file/FileReader', [
this.readyState = FileReader.DONE;
}
- if (_fr) {
- _fr.getRuntime().exec.call(this, 'FileReader', 'abort');
- }
+ this.exec('FileReader', 'abort');
this.trigger('abort');
this.trigger('loadend');
@@ -3915,83 +4004,63 @@ define('moxie/file/FileReader', [
*/
destroy: function() {
this.abort();
-
- if (_fr) {
- _fr.getRuntime().exec.call(this, 'FileReader', 'destroy');
- _fr.disconnectRuntime();
- }
-
- self = _fr = null;
+ this.exec('FileReader', 'destroy');
+ this.disconnectRuntime();
+ this.unbindAll();
}
});
+
+ // uid must already be assigned
+ this.handleEventProps(dispatches);
+
+ this.bind('Error', function(e, err) {
+ this.readyState = FileReader.DONE;
+ this.error = err;
+ }, 999);
+ this.bind('Load', function(e) {
+ this.readyState = FileReader.DONE;
+ }, 999);
+
function _read(op, blob) {
- _fr = new RuntimeTarget();
+ var self = this;
- function error(err) {
- self.readyState = FileReader.DONE;
- self.error = err;
- self.trigger('error');
- loadEnd();
- }
-
- function loadEnd() {
- _fr.destroy();
- _fr = null;
- self.trigger('loadend');
- }
-
- function exec(runtime) {
- _fr.bind('Error', function(e, err) {
- error(err);
- });
-
- _fr.bind('Progress', function(e) {
- self.result = runtime.exec.call(_fr, 'FileReader', 'getResult');
- self.trigger(e);
- });
-
- _fr.bind('Load', function(e) {
- self.readyState = FileReader.DONE;
- self.result = runtime.exec.call(_fr, 'FileReader', 'getResult');
- self.trigger(e);
- loadEnd();
- });
-
- runtime.exec.call(_fr, 'FileReader', 'read', op, blob);
- }
-
- this.convertEventPropsToHandlers(dispatches);
-
- if (this.readyState === FileReader.LOADING) {
- return error(new x.DOMException(x.DOMException.INVALID_STATE_ERR));
- }
-
- this.readyState = FileReader.LOADING;
this.trigger('loadstart');
- // if source is o.Blob/o.File
- if (blob instanceof Blob) {
- if (blob.isDetached()) {
- var src = blob.getSource();
- switch (op) {
- case 'readAsText':
- case 'readAsBinaryString':
- this.result = src;
- break;
- case 'readAsDataURL':
- this.result = 'data:' + blob.type + ';base64,' + Encode.btoa(src);
- break;
- }
- this.readyState = FileReader.DONE;
- this.trigger('load');
- loadEnd();
- } else {
- exec(_fr.connectRuntime(blob.ruid));
+ if (this.readyState === FileReader.LOADING) {
+ this.trigger('error', new x.DOMException(x.DOMException.INVALID_STATE_ERR));
+ this.trigger('loadend');
+ return;
+ }
+
+ // if source is not o.Blob/o.File
+ if (!(blob instanceof Blob)) {
+ this.trigger('error', new x.DOMException(x.DOMException.NOT_FOUND_ERR));
+ this.trigger('loadend');
+ return;
+ }
+
+ this.result = null;
+ this.readyState = FileReader.LOADING;
+
+ if (blob.isDetached()) {
+ var src = blob.getSource();
+ switch (op) {
+ case 'readAsText':
+ case 'readAsBinaryString':
+ this.result = src;
+ break;
+ case 'readAsDataURL':
+ this.result = 'data:' + blob.type + ';base64,' + Encode.btoa(src);
+ break;
}
+ this.readyState = FileReader.DONE;
+ this.trigger('load');
+ this.trigger('loadend');
} else {
- error(new x.DOMException(x.DOMException.NOT_FOUND_ERR));
+ this.connectRuntime(blob.ruid);
+ this.exec('FileReader', 'read', op, blob);
}
}
}
@@ -4065,7 +4134,7 @@ define('moxie/core/utils/Url', [], function() {
https: 443
}
, uri = {}
- , regex = /^(?:([^:\/?#]+):)?(?:\/\/()(?:(?:()(?:([^:@]*):?([^:@]*))?@)?([^:\/?#]*)(?::(\d*))?))?()(?:(()(?:(?:[^?#\/]*\/)*)()(?:[^?#]*))(?:\\?([^#]*))?(?:#(.*))?)/
+ , regex = /^(?:([^:\/?#]+):)?(?:\/\/()(?:(?:()(?:([^:@\/]*):?([^:@\/]*))?@)?([^:\/?#]*)(?::(\d*))?))?()(?:(()(?:(?:[^?#\/]*\/)*)()(?:[^?#]*))(?:\\?([^#]*))?(?:#(.*))?)/
, m = regex.exec(url || '')
;
@@ -4091,10 +4160,11 @@ define('moxie/core/utils/Url', [], function() {
if (/^[^\/]/.test(uri.path)) {
path = currentUrl.path;
// if path ends with a filename, strip it
- if (!/(\/|\/[^\.]+)$/.test(path)) {
+ if (/\/[^\/]*\.[^\/]*$/.test(path)) {
path = path.replace(/\/[^\/]+$/, '/');
} else {
- path += '/';
+ // avoid double slash at the end (see #127)
+ path = path.replace(/\/?$/, '/');
}
}
uri.path = path + (uri.path || ''); // site may reside at domain.com or domain.com/subdir
@@ -4120,7 +4190,7 @@ define('moxie/core/utils/Url', [], function() {
@method resolveUrl
@static
- @param {String} url Either absolute or relative
+ @param {String|Object} url Either absolute or relative, or a result of parseUrl call
@return {String} Resolved, absolute url
*/
var resolveUrl = function(url) {
@@ -4128,7 +4198,7 @@ define('moxie/core/utils/Url', [], function() {
http: 80,
https: 443
}
- , urlp = parseUrl(url)
+ , urlp = typeof(url) === 'object' ? url : parseUrl(url);
;
return urlp.scheme + '://' + urlp.host + (urlp.port !== ports[urlp.scheme] ? ':' + urlp.port : '') + urlp.path + (urlp.query ? urlp.query : '');
@@ -4160,6 +4230,48 @@ define('moxie/core/utils/Url', [], function() {
};
});
+// Included from: src/javascript/runtime/RuntimeTarget.js
+
+/**
+ * RuntimeTarget.js
+ *
+ * Copyright 2013, Moxiecode Systems AB
+ * Released under GPL License.
+ *
+ * License: http://www.plupload.com/license
+ * Contributing: http://www.plupload.com/contributing
+ */
+
+define('moxie/runtime/RuntimeTarget', [
+ 'moxie/core/utils/Basic',
+ 'moxie/runtime/RuntimeClient',
+ "moxie/core/EventTarget"
+], function(Basic, RuntimeClient, EventTarget) {
+ /**
+ Instance of this class can be used as a target for the events dispatched by shims,
+ when allowing them onto components is for either reason inappropriate
+
+ @class RuntimeTarget
+ @constructor
+ @protected
+ @extends EventTarget
+ */
+ function RuntimeTarget() {
+ this.uid = Basic.guid('uid_');
+
+ RuntimeClient.call(this);
+
+ this.destroy = function() {
+ this.disconnectRuntime();
+ this.unbindAll();
+ };
+ }
+
+ RuntimeTarget.prototype = EventTarget.instance;
+
+ return RuntimeTarget;
+});
+
// Included from: src/javascript/file/FileReaderSync.js
/**
@@ -4451,7 +4563,23 @@ define("moxie/xhr/XMLHttpRequest", [
@uses RuntimeClient
@extends EventTarget
*/
- var dispatches = ['loadstart', 'progress', 'abort', 'error', 'load', 'timeout', 'loadend']; // & readystatechange (for historical reasons)
+ var dispatches = [
+ 'loadstart',
+
+ 'progress',
+
+ 'abort',
+
+ 'error',
+
+ 'load',
+
+ 'timeout',
+
+ 'loadend'
+
+ // readystatechange (for historical reasons)
+ ];
var NATIVE = 1, RUNTIME = 2;
@@ -4693,7 +4821,6 @@ define("moxie/xhr/XMLHttpRequest", [
_p('readyState', XMLHttpRequest.OPENED);
// 20
- this.convertEventPropsToHandlers(['readystatechange']); // unify event handlers
this.dispatchEvent('readystatechange');
},
@@ -4870,9 +4997,6 @@ define("moxie/xhr/XMLHttpRequest", [
} else {
_options = options;
}
-
- this.convertEventPropsToHandlers(dispatches);
- this.upload.convertEventPropsToHandlers(dispatches);
// 1-2
if (this.readyState !== XMLHttpRequest.OPENED || _send_flag) {
@@ -4973,6 +5097,9 @@ define("moxie/xhr/XMLHttpRequest", [
}
});
+ this.handleEventProps(dispatches.concat(['readystatechange'])); // for historical reasons
+ this.upload.handleEventProps(dispatches);
+
/* this is nice, but maybe too lengthy
// if supported by JS version, set getters/setters for specific properties
@@ -5264,6 +5391,10 @@ define("moxie/xhr/XMLHttpRequest", [
_options.required_caps.send_multipart = true;
}
+ if (!Basic.isEmptyObj(_headers)) {
+ _options.required_caps.send_custom_headers = true;
+ }
+
if (!_same_origin_flag) {
_options.required_caps.do_cors = true;
}
@@ -5507,6 +5638,7 @@ define("moxie/image/Image", [
];
function Image() {
+
RuntimeClient.call(this);
Basic.extend(this, {
@@ -5619,13 +5751,6 @@ define("moxie/image/Image", [
@param {Boolean|Object} [mixed]
*/
load: function() {
- // this is here because to bind properly we need an uid first, which is created above
- this.bind('Load Resize', function() {
- _updateInfo.call(this);
- }, 999);
-
- this.convertEventPropsToHandlers(dispatches);
-
_load.apply(this, arguments);
},
@@ -5633,22 +5758,28 @@ define("moxie/image/Image", [
Downsizes the image to fit the specified width/height. If crop is supplied, image will be cropped to exact dimensions.
@method downsize
- @param {Number} width Resulting width
- @param {Number} [height=width] Resulting height (optional, if not supplied will default to width)
- @param {Boolean} [crop=false] Whether to crop the image to exact dimensions
- @param {Boolean} [preserveHeaders=true] Whether to preserve meta headers (on JPEGs after resize)
+ @param {Object} opts
+ @param {Number} opts.width Resulting width
+ @param {Number} [opts.height=width] Resulting height (optional, if not supplied will default to width)
+ @param {Boolean} [opts.crop=false] Whether to crop the image to exact dimensions
+ @param {Boolean} [opts.preserveHeaders=true] Whether to preserve meta headers (on JPEGs after resize)
+ @param {String} [opts.resample=false] Resampling algorithm to use for resizing
*/
downsize: function(opts) {
var defaults = {
width: this.width,
height: this.height,
+ type: this.type || 'image/jpeg',
+ quality: 90,
crop: false,
- preserveHeaders: true
+ preserveHeaders: true,
+ resample: false
};
if (typeof(opts) === 'object') {
opts = Basic.extend(defaults, opts);
} else {
+ // for backward compatibility
opts = Basic.extend(defaults, {
width: arguments[0],
height: arguments[1],
@@ -5667,7 +5798,7 @@ define("moxie/image/Image", [
throw new x.ImageError(x.ImageError.MAX_RESOLUTION_ERR);
}
- this.getRuntime().exec.call(this, 'Image', 'downsize', opts.width, opts.height, opts.crop, opts.preserveHeaders);
+ this.exec('Image', 'downsize', opts.width, opts.height, opts.crop, opts.preserveHeaders);
} catch(ex) {
// for now simply trigger error event
this.trigger('error', ex.code);
@@ -5708,16 +5839,7 @@ define("moxie/image/Image", [
if (!this.size) {
throw new x.DOMException(x.DOMException.INVALID_STATE_ERR);
}
-
- if (!type) {
- type = 'image/jpeg';
- }
-
- if (type === 'image/jpeg' && !quality) {
- quality = 90;
- }
-
- return this.getRuntime().exec.call(this, 'Image', 'getAsBlob', type, quality);
+ return this.exec('Image', 'getAsBlob', type || 'image/jpeg', quality || 90);
},
/**
@@ -5733,7 +5855,7 @@ define("moxie/image/Image", [
if (!this.size) {
throw new x.DOMException(x.DOMException.INVALID_STATE_ERR);
}
- return this.getRuntime().exec.call(this, 'Image', 'getAsDataURL', type, quality);
+ return this.exec('Image', 'getAsDataURL', type || 'image/jpeg', quality || 90);
},
/**
@@ -5757,44 +5879,49 @@ define("moxie/image/Image", [
@method embed
@param {DOMElement} el DOM element to insert the image object into
- @param {Object} [options]
- @param {Number} [options.width] The width of an embed (defaults to the image width)
- @param {Number} [options.height] The height of an embed (defaults to the image height)
+ @param {Object} [opts]
+ @param {Number} [opts.width] The width of an embed (defaults to the image width)
+ @param {Number} [opts.height] The height of an embed (defaults to the image height)
@param {String} [type="image/jpeg"] Mime type
@param {Number} [quality=90] Quality of an embed, if mime type is image/jpeg
@param {Boolean} [crop=false] Whether to crop an embed to the specified dimensions
*/
- embed: function(el) {
+ embed: function(el, opts) {
var self = this
- , imgCopy
- , type, quality, crop
- , options = arguments[1] || {}
- , width = this.width
- , height = this.height
, runtime // this has to be outside of all the closures to contain proper runtime
;
- function onResize() {
+ opts = Basic.extend({
+ width: this.width,
+ height: this.height,
+ type: this.type || 'image/jpeg',
+ quality: 90
+ }, opts || {});
+
+
+ function render(type, quality) {
+ var img = this;
+
// if possible, embed a canvas element directly
if (Env.can('create_canvas')) {
- var canvas = imgCopy.getAsCanvas();
+ var canvas = img.getAsCanvas();
if (canvas) {
el.appendChild(canvas);
canvas = null;
- imgCopy.destroy();
+ img.destroy();
self.trigger('embedded');
return;
}
}
- var dataUrl = imgCopy.getAsDataURL(type, quality);
+ var dataUrl = img.getAsDataURL(type, quality);
if (!dataUrl) {
throw new x.ImageError(x.ImageError.WRONG_FORMAT);
}
if (Env.can('use_data_uri_of', dataUrl.length)) {
- el.innerHTML = '