First pass at async upload, multi-upload, and gallery feature. Modified names from patch. Hat tip: tellyworth, skeltoac.

git-svn-id: https://develop.svn.wordpress.org/trunk@6659 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Matt Mullenweg
2008-01-25 19:21:11 +00:00
parent 0db02d1e0d
commit dd37de2de7
15 changed files with 2323 additions and 24 deletions
+298
View File
@@ -0,0 +1,298 @@
function fileDialogStart() {
jQuery("#media-upload-error").empty();
}
// progress and success handlers for multimedia multi uploads
function fileQueuedMultimedia(fileObj) {
// Create a progress bar containing the filename
jQuery('#multimedia-items').append('<div id="multimedia-item-' + fileObj.id + '" class="multimedia-item"><span class="filename original">' + fileObj.name + '</span><div class="progress"><div class="bar"></div></div></div>');
// Disable the submit button
jQuery('#insert-multimedia').attr('disabled', 'disabled');
}
function uploadProgressMultimedia(fileObj, bytesDone, bytesTotal) {
// Lengthen the progress bar
jQuery('#multimedia-item-' + fileObj.id + ' .bar').width(620*bytesDone/bytesTotal);
}
function uploadSuccessMultimedia(fileObj, serverData) {
// if async-upload returned an error message, place it in the multimedia item div and return
if ( serverData.match('media-upload-error') ) {
jQuery('#multimedia-item-' + fileObj.id).html(serverData);
return;
}
// Move the progress bar to 100%
jQuery('#multimedia-item-' + fileObj.id + ' .bar').remove();
// Append the HTML returned by the server -- thumbnail and form inputs
jQuery('#multimedia-item-' + fileObj.id).append(serverData);
// Clone the thumbnail as a "pinkynail" -- a tiny image to the left of the filename
jQuery('#multimedia-item-' + fileObj.id + ' .thumbnail').clone().attr('className', 'pinkynail').prependTo('#multimedia-item-' + fileObj.id);
// Replace the original filename with the new (unique) one assigned during upload
jQuery('#multimedia-item-' + fileObj.id + ' .filename.original').replaceWith(jQuery('#multimedia-item-' + fileObj.id + ' .filename.new'));
// Bind toggle function to a new mask over the progress bar area
jQuery('#multimedia-item-' + fileObj.id + ' .progress').clone().empty().addClass('clickmask').bind('click', function(){jQuery(this).siblings('.slidetoggle').slideToggle(150);jQuery(this).siblings('.toggle').toggle();}).appendTo('#multimedia-item-' + fileObj.id);
// Also bind toggle to the links
jQuery('#multimedia-item-' + fileObj.id + ' a.toggle').bind('click', function(){jQuery(this).siblings('.slidetoggle').slideToggle(150);jQuery(this).parent().eq(0).children('.toggle').toggle();jQuery(this).siblings('a.toggle').focus();return false;});
// Bind AJAX to the new Delete button
jQuery('#multimedia-item-' + fileObj.id + ' a.delete').bind('click',function(){jQuery.ajax({url:'admin-ajax.php',type:'post',data:{id:this.id.replace(/del/,''),action:'delete-post',_ajax_nonce:this.href.replace(/^.*wpnonce=/,'')}});jQuery(this).parents(".multimedia-item").eq(0).slideToggle(300, function(){jQuery(this).remove();});return false;});
}
function uploadCompleteMultimedia(fileObj) {
// If no more uploads queued, enable the submit button
if ( swfu.getStats().files_queued == 0 )
jQuery('#insert-multimedia').attr('disabled', '');
}
// progress and success handlers for single image upload
function uploadLoadedImage() {
jQuery('#image-alt').attr('disabled', true);
jQuery('#image-url').attr('disabled', true);
jQuery('#image-title').attr('disabled', true);
jQuery('#image-add').attr('disabled', true);
}
function fileQueuedImage(fileObj) {
jQuery('#flash-upload-ui').append('<div id="image-progress"><p class="filename">' + fileObj.name + '</p><div class="progress"><div class="bar"></div></div></div>');
}
function uploadProgressImage(fileObj, bytesDone, bytesTotal) {
jQuery('#image-progress .bar').width(450*bytesDone/bytesTotal);
}
function uploadSuccessImage(fileObj, serverData) {
if ( serverData.match('media-upload-error') ) {
jQuery('#media-upload-error').replaceWith(serverData);
jQuery('#image-progress').replaceWith('');
}
else {
jQuery('#media-upload-error').replaceWith('');
jQuery('#flash-upload-ui').replaceWith(serverData);
}
}
// wp-specific error handlers
// generic message
function wpQueueError(message) {
jQuery('#media-upload-error').show().text(message);
}
// file-specific message
function wpFileError(fileObj, message) {
jQuery('#media-upload-error-' + fileObj.id).show().text(message);
}
function fileQueueError(fileObj, error_code, message) {
// Handle this error separately because we don't want to create a FileProgress element for it.
if ( error_code == SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED ) {
wpQueueError(swfuploadL10n.queue_limit_exceeded);
}
else if ( error_code == SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT ) {
wpQueueError(swfuploadL10n.file_exceeds_size_limit);
}
else if ( error_code == SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE ) {
wpQueueError(swfuploadL10n.zero_byte_file);
}
else if ( error_code == SWFUpload.QUEUE_ERROR.INVALID_FILETYPE ) {
wpQueueError(swfuploadL10n.invalid_filetype);
}
else {
wpQueueError(swfuploadL10n.default_error);
}
function fileQueued(fileObj) {
try {
var txtFileName = document.getElementById("txtFileName");
txtFileName.value = fileObj.name;
} catch (e) { }
}
function fileDialogComplete(num_files_queued) {
try {
if (num_files_queued > 0) {
this.startUpload();
}
} catch (ex) {
this.debug(ex);
}
}
function uploadProgress(fileObj, bytesLoaded, bytesTotal) {
try {
var percent = Math.ceil((bytesLoaded / bytesTotal) * 100)
fileObj.id = "singlefile"; // This makes it so FileProgress only makes a single UI element, instead of one for each file
var progress = new FileProgress(fileObj, this.customSettings.progress_target);
progress.SetProgress(percent);
progress.SetStatus("Uploading...");
} catch (e) { }
}
function uploadSuccess(fileObj, server_data) {
try {
fileObj.id = "singlefile"; // This makes it so FileProgress only makes a single UI element, instead of one for each file
var progress = new FileProgress(fileObj, this.customSettings.progress_target);
progress.SetComplete();
progress.SetStatus("Complete.");
progress.ToggleCancel(false);
if (server_data === " ") {
this.customSettings.upload_successful = false;
} else {
this.customSettings.upload_successful = true;
document.getElementById("hidFileID").value = server_data;
}
} catch (e) { }
}
function uploadComplete(fileObj) {
try {
if (this.customSettings.upload_successful) {
document.getElementById("btnBrowse").disabled = "true";
uploadDone();
} else {
fileObj.id = "singlefile"; // This makes it so FileProgress only makes a single UI element, instead of one for each file
var progress = new FileProgress(fileObj, this.customSettings.progress_target);
progress.SetError();
progress.SetStatus("File rejected");
progress.ToggleCancel(false);
var txtFileName = document.getElementById("txtFileName");
txtFileName.value = "";
//validateForm();
alert("There was a problem with the upload.\nThe server did not accept it.");
}
} catch (e) { }
}
function uploadError(fileObj, error_code, message) {
// first the file specific error
if ( error_code == SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL ) {
wpFileError(fileObj, swfuploadL10n.missing_upload_url);
}
else if ( error_code == SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED ) {
wpFileError(fileObj, swfuploadL10n.upload_limit_exceeded);
}
else {
wpFileError(fileObj, swfuploadL10n.default_error);
}
// not sure if this is needed
fileObj.id = "singlefile"; // This makes it so FileProgress only makes a single UI element, instead of one for each file
var progress = new FileProgress(fileObj, this.customSettings.progress_target);
progress.SetError();
progress.ToggleCancel(false);
// now the general upload status
if ( error_code == SWFUpload.UPLOAD_ERROR.HTTP_ERROR ) {
wpQueueError(swfuploadL10n.http_error);
}
else if ( error_code == SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED ) {
wpQueueError(swfuploadL10n.upload_failed);
}
else if ( error_code == SWFUpload.UPLOAD_ERROR.IO_ERROR ) {
wpQueueError(swfuploadL10n.io_error);
}
else if ( error_code == SWFUpload.UPLOAD_ERROR.SECURITY_ERROR ) {
wpQueueError(swfuploadL10n.security_error);
}
else if ( error_code == SWFUpload.UPLOAD_ERROR.FILE_CANCELLED ) {
wpQueueError(swfuploadL10n.security_error);
}
}
/* ********************************************************
* Utility for displaying the file upload information
* This is not part of SWFUpload, just part of the demo
* ******************************************************** */
function FileProgress(fileObj, target_id) {
this.file_progress_id = fileObj.id;
this.fileProgressElement = document.getElementById(this.file_progress_id);
if (!this.fileProgressElement) {
this.fileProgressElement = document.createElement("div");
this.fileProgressElement.className = "progressContainer";
this.fileProgressElement.id = this.file_progress_id;
var progressCancel = document.createElement("a");
progressCancel.className = "progressCancel";
progressCancel.href = "#";
progressCancel.style.visibility = "hidden";
progressCancel.appendChild(document.createTextNode(" "));
var progressText = document.createElement("div");
progressText.className = "progressName";
progressText.appendChild(document.createTextNode(fileObj.name));
var progressBar = document.createElement("div");
progressBar.className = "progressBarInProgress";
var progressStatus = document.createElement("div");
progressStatus.className = "progressBarStatus";
progressStatus.innerHTML = "&nbsp;";
this.fileProgressElement.appendChild(progressCancel);
this.fileProgressElement.appendChild(progressText);
this.fileProgressElement.appendChild(progressStatus);
this.fileProgressElement.appendChild(progressBar);
document.getElementById(target_id).appendChild(this.fileProgressElement);
}
}
FileProgress.prototype.SetStart = function() {
this.fileProgressElement.className = "progressContainer";
this.fileProgressElement.childNodes[3].className = "progressBarInProgress";
this.fileProgressElement.childNodes[3].style.width = "";
}
FileProgress.prototype.SetProgress = function(percentage) {
this.fileProgressElement.className = "progressContainer green";
this.fileProgressElement.childNodes[3].className = "progressBarInProgress";
this.fileProgressElement.childNodes[3].style.width = percentage + "%";
}
FileProgress.prototype.SetComplete = function() {
this.fileProgressElement.className = "progressContainer blue";
this.fileProgressElement.childNodes[3].className = "progressBarComplete";
this.fileProgressElement.childNodes[3].style.width = "";
}
FileProgress.prototype.SetError = function() {
this.fileProgressElement.className = "progressContainer red";
this.fileProgressElement.childNodes[3].className = "progressBarError";
this.fileProgressElement.childNodes[3].style.width = "";
}
FileProgress.prototype.SetCancelled = function() {
this.fileProgressElement.className = "progressContainer";
this.fileProgressElement.childNodes[3].className = "progressBarError";
this.fileProgressElement.childNodes[3].style.width = "";
}
FileProgress.prototype.SetStatus = function(status) {
this.fileProgressElement.childNodes[2].innerHTML = status;
}
FileProgress.prototype.ToggleCancel = function(show, upload_obj) {
this.fileProgressElement.childNodes[0].style.visibility = show ? "visible" : "hidden";
if (upload_obj) {
var file_id = this.file_progress_id;
this.fileProgressElement.childNodes[0].onclick = function() { upload_obj.cancelUpload(file_id); return false; };
}
}
@@ -0,0 +1,50 @@
/*
Cookie Plug-in
This plug in automatically gets all the cookies for this site and adds them to the post_params.
Cookies are loaded only on initialization. The refreshCookies function can be called to update the post_params.
The cookies will override any other post params with the same name.
*/
var SWFUpload;
if (typeof(SWFUpload) === "function") {
SWFUpload.prototype.initSettings = function (old_initSettings) {
return function (init_settings) {
if (typeof(old_initSettings) === "function") {
old_initSettings.call(this, init_settings);
}
this.refreshCookies(false); // The false parameter must be sent since SWFUpload has not initialzed at this point
};
}(SWFUpload.prototype.initSettings);
// refreshes the post_params and updates SWFUpload. The send_to_flash parameters is optional and defaults to True
SWFUpload.prototype.refreshCookies = function (send_to_flash) {
if (send_to_flash !== false) send_to_flash = true;
// Get the post_params object
var post_params = this.getSetting("post_params");
// Get the cookies
var i, cookie_array = document.cookie.split(';'), ca_length = cookie_array.length, c, eq_index, name, value;
for(i = 0; i < ca_length; i++) {
c = cookie_array[i];
// Left Trim spaces
while (c.charAt(0) == " ") {
c = c.substring(1, c.length);
}
eq_index = c.indexOf("=");
if (eq_index > 0) {
name = c.substring(0, eq_index);
value = c.substring(eq_index+1);
post_params[name] = value;
}
}
if (send_to_flash) {
this.setPostParams(post_params);
}
};
}
@@ -0,0 +1,102 @@
/*
DocumentReady Plug-in
This plugin loads SWFUpload as soon as the document is ready. You should not load SWFUpload inside window.onload using this plugin.
You can also chain other functions by calling SWFUpload.DocumentReady(your function).
Warning: Embedded Ads or other scripts that overwrite window.onload or use their own document ready functions may interfer with this plugin. You
should not set window.onload when using this plugin.
Usage Example:
var swfu = new SWFUpload(your settings object);
SWFUpload.DocumentReady(function () { alert('Document Ready!'; });
*/
var SWFUpload;
if (typeof(SWFUpload) === "function") {
// Override iniSWFUpload so SWFUpload gets inited when the document is ready rather than immediately
SWFUpload.prototype.initSWFUpload = function (old_initSWFUpload) {
return function (init_settings) {
var self = this;
if (typeof(old_initSWFUpload) === "function") {
SWFUpload.DocumentReady(function () {
old_initSWFUpload.call(self, init_settings);
});
}
}
}(SWFUpload.prototype.initSWFUpload);
// The DocumentReady function adds the passed in function to
// the functions that will be executed when the document is ready/loaded
SWFUpload.DocumentReady = function (fn) {
// Add the function to the chain
SWFUpload.DocumentReady.InternalOnloadChain = function (previous_link_fn) {
return function () {
if (typeof(previous_link_fn) === "function") {
previous_link_fn();
}
fn();
};
}(SWFUpload.DocumentReady.InternalOnloadChain);
};
SWFUpload.DocumentReady.InternalOnloadChain = null;
SWFUpload.DocumentReady.Onload = function () {
// Execute the onload function chain
if (typeof(SWFUpload.DocumentReady.InternalOnloadChain) === "function") {
SWFUpload.DocumentReady.InternalOnloadChain();
}
};
SWFUpload.DocumentReady.SetupComplete = false;
/* ********************************************
This portion of the code gets executed as soon it is loaded.
It binds the proper event for executing JavaScript is
early as possible. This is a per browser function and so
some browser sniffing is used.
This solution still has the "exposed" issue (See the Global Delegation section at http://peter.michaux.ca/article/553 )
Base solution from http://dean.edwards.name/weblog/2006/06/again/ and http://dean.edwards.name/weblog/2005/09/busted/
******************************************** */
if (!SWFUpload.DocumentReady.SetupComplete) {
// for Internet Explorer (using conditional comments)
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if (this.readyState == "complete") {
SWFUpload.DocumentReady.Onload(); // call the onload handler
}
};
SWFUpload.DocumentReady.SetupComplete = true;
/*@end @*/
}
if (!SWFUpload.DocumentReady.SetupComplete && /WebKit/i.test(navigator.userAgent)) { // sniff
var _timer = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
clearInterval(_timer);
SWFUpload.DocumentReady.Onload(); // call the onload handler
}
}, 10);
SWFUpload.DocumentReady.SetupComplete = true;
}
/* for Mozilla */
if (!SWFUpload.DocumentReady.SetupComplete && document.addEventListener) {
document.addEventListener("DOMContentLoaded", SWFUpload.DocumentReady.Onload, false);
SWFUpload.DocumentReady.SetupComplete = true;
}
/* for other browsers */
if (!SWFUpload.DocumentReady.SetupComplete) {
window.onload = SWFUpload.DocumentReady.Onload;
SWFUpload.DocumentReady.SetupComplete = true;
}
}
@@ -0,0 +1,63 @@
/*
SWFUpload Graceful Degradation Plug-in
This plugin allows SWFUpload to display only if it is loaded successfully. Otherwise a default form is left displayed.
Usage:
To use this plugin create two HTML containers. Each should have an ID defined. One container should hold the SWFUpload UI. The other should hold the degraded UI.
The SWFUpload container should have its CSS "display" property set to "none".
If SWFUpload loads successfully the SWFUpload container will be displayed ("display" set to "block") and the
degraded container will be hidden ("display" set to "none").
Use the settings "swfupload_element_id" and "degraded_element_id" to indicate your container IDs. The default values are "swfupload_container" and "degraded_container".
*/
var SWFUpload;
if (typeof(SWFUpload) === "function") {
SWFUpload.gracefulDegradation = {};
SWFUpload.prototype.initSettings = function (old_initSettings) {
return function (init_settings) {
if (typeof(old_initSettings) === "function") {
old_initSettings.call(this, init_settings);
}
this.addSetting("swfupload_element_id", init_settings.swfupload_element_id, "swfupload_container");
this.addSetting("degraded_element_id", init_settings.degraded_element_id, "degraded_container");
this.addSetting("user_swfUploadLoaded_handler", init_settings.swfupload_loaded_handler, SWFUpload.swfUploadLoaded);
this.swfUploadLoaded_handler = SWFUpload.gracefulDegradation.swfUploadLoaded;
};
}(SWFUpload.prototype.initSettings);
SWFUpload.gracefulDegradation.swfUploadLoaded = function () {
var swfupload_container_id, swfupload_container, degraded_container_id, degraded_container, user_swfUploadLoaded_handler;
try {
swfupload_element_id = this.getSetting("swfupload_element_id");
degraded_element_id = this.getSetting("degraded_element_id");
// Show the UI container
swfupload_container = document.getElementById(swfupload_element_id);
if (swfupload_container !== null) {
swfupload_container.style.display = "block";
// Now take care of hiding the degraded UI
degraded_container = document.getElementById(degraded_element_id);
if (degraded_container !== null) {
degraded_container.style.display = "none";
}
}
} catch (ex) {
this.debug(ex);
}
user_swfUploadLoaded_handler = this.getSetting("user_swfUploadLoaded_handler");
if (typeof(user_swfUploadLoaded_handler) === "function") {
user_swfUploadLoaded_handler.apply(this);
}
};
}
@@ -0,0 +1,58 @@
/*
Queue Plug-in
Features:
cancelQueue method for cancelling the entire queue.
All queued files are uploaded when startUpload() is called.
If false is returned from uploadComplete then the queue upload is stopped. If false is not returned (strict comparison) then the queue upload is continued.
*/
var SWFUpload;
if (typeof(SWFUpload) === "function") {
SWFUpload.queue = {};
SWFUpload.prototype.initSettings = function (old_initSettings) {
return function (init_settings) {
if (typeof(old_initSettings) === "function") {
old_initSettings.call(this, init_settings);
}
this.customSettings.queue_cancelled_flag = false;
this.addSetting("user_upload_complete_handler", init_settings.upload_complete_handler, SWFUpload.uploadComplete);
this.uploadComplete_handler = SWFUpload.queue.uploadComplete;
};
}(SWFUpload.prototype.initSettings);
SWFUpload.prototype.cancelQueue = function () {
var stats = this.getStats();
this.customSettings.queue_cancelled_flag = false;
if (stats.in_progress > 0) {
this.customSettings.queue_cancelled_flag = true;
}
while(stats.files_queued > 0) {
this.cancelUpload();
stats = this.getStats();
}
};
SWFUpload.queue.uploadComplete = function (file) {
var user_upload_complete_handler = this.getSetting("user_upload_complete_handler");
var continue_upload = true;
if (typeof(user_upload_complete_handler) === "function") {
continue_upload = (user_upload_complete_handler.call(this, file) === false) ? false : true;
}
if (continue_upload) {
var stats = this.getStats();
if (stats.files_queued > 0 && this.customSettings.queue_cancelled_flag === false) {
this.startUpload();
} else {
this.customSettings.queue_cancelled_flag = false;
}
}
};
}
File diff suppressed because it is too large Load Diff
Binary file not shown.