Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Allow to pass in objects instead of just element IDs #283

Closed
wants to merge 3 commits into from
Closed

Allow to pass in objects instead of just element IDs #283

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f8a3512
allow to pass in elements instead of just ids
omricohen May 5, 2011
f10c254
modified Readme
omricohen May 5, 2011
79c7883
merged
omricohen Sep 7, 2011
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
18 changes: 18 additions & 0 deletions readme.md
View file
Open in desktop
@@ -1,6 +1,24 @@
Plupload - Cross browser and platform uploader API
===================================================

I modified all files to be able to pass in objects instead of just ids. This way, you can reference plupload browse_button using jquery or prototype elements. Makes it a little more Object Oriented and allows for multiple upload forms per page.

Example:

var uploader = new plupload.Uploader({
runtimes : 'html5,gears,flash,silverlight,browserplus',
browse_button : $('.attachment_file')[0],
container : $('.attachment_container')[0],
max_file_size : '10mb',
chunk_size : '1mb',
url : '/attachments',
flash_swf_url : '/javascripts/plupload/plupload.flash.swf',
silverlight_xap_url : '/javascripts/plupload/plupload.silverlight.xap',
resize : {width : 1024, height : 1024, quality : 120},
multipart : true,
headers : {'X-CSRF-Token' : $('meta[name="csrf-token"]').attr('content') }
});

What is Plupload
-----------------
Plupload is a JavaScript API for dealing with file uploads it supports features like multiple file selection, file type filtering,
Expand Down
26 changes: 15 additions & 11 deletions src/javascript/plupload.flash.js
View file
Open in desktop
Expand Up @@ -32,6 +32,10 @@

return parseFloat(version[0] + '.' + version[1]);
}

function getElement(element){
return typeof(element) == "object" ? element : document.getElementById(element);
}

plupload.flash = {
/**
Expand Down Expand Up @@ -99,7 +103,7 @@
uploadInstances[uploader.id] = uploader;

// Find browse button and set to to be relative
browseButton = document.getElementById(uploader.settings.browse_button);
browseButton = getElement(uploader.settings.browse_button);

// Create flash container and insert it at an absolute position within the browse button
flashContainer = document.createElement('div');
Expand All @@ -117,7 +121,7 @@
flashContainer.className = 'plupload flash';

if (uploader.settings.container) {
container = document.getElementById(uploader.settings.container);
container = getElement(uploader.settings.container);
if (plupload.getStyle(container, 'position') === 'static') {
container.style.position = 'relative';
}
Expand All @@ -135,7 +139,7 @@
'<param name="allowscriptaccess" value="always" /></object>';

function getFlashObj() {
return document.getElementById(uploader.id + '_flash');
return getElement(uploader.id + '_flash');
}

function waitLoad() {
Expand Down Expand Up @@ -284,7 +288,7 @@
uploader.bind('Flash:StageEvent:rollOver', function(up) {
var browseButton, hoverClass;

browseButton = document.getElementById(uploader.settings.browse_button);
browseButton = getElement(uploader.settings.browse_button);
hoverClass = up.settings.browse_button_hover;

if (browseButton && hoverClass) {
Expand All @@ -295,7 +299,7 @@
uploader.bind('Flash:StageEvent:rollOut', function(up) {
var browseButton, hoverClass;

browseButton = document.getElementById(uploader.settings.browse_button);
browseButton = getElement(uploader.settings.browse_button);
hoverClass = up.settings.browse_button_hover;

if (browseButton && hoverClass) {
Expand All @@ -306,7 +310,7 @@
uploader.bind('Flash:StageEvent:mouseDown', function(up) {
var browseButton, activeClass;

browseButton = document.getElementById(uploader.settings.browse_button);
browseButton = getElement(uploader.settings.browse_button);
activeClass = up.settings.browse_button_active;

if (browseButton && activeClass) {
Expand All @@ -322,7 +326,7 @@
uploader.bind('Flash:StageEvent:mouseUp', function(up) {
var browseButton, activeClass;

browseButton = document.getElementById(uploader.settings.browse_button);
browseButton = getElement(uploader.settings.browse_button);
activeClass = up.settings.browse_button_active;

if (browseButton && activeClass) {
Expand Down Expand Up @@ -363,12 +367,12 @@
// Set file filters incase it has been changed dynamically
getFlashObj().setFileFilters(uploader.settings.filters, uploader.settings.multi_selection);

browseButton = document.getElementById(up.settings.browse_button);
browseButton = getElement(up.settings.browse_button);
if (browseButton) {
browsePos = plupload.getPos(browseButton, document.getElementById(up.settings.container));
browsePos = plupload.getPos(browseButton, getElement(up.settings.container));
browseSize = plupload.getSize(browseButton);

plupload.extend(document.getElementById(up.id + '_flash_container').style, {
plupload.extend(getElement(up.id + '_flash_container').style, {
top : browsePos.y + 'px',
left : browsePos.x + 'px',
width : browseSize.w + 'px',
Expand All @@ -385,7 +389,7 @@
delete initialized[up.id];
delete uploadInstances[up.id];

flashContainer = document.getElementById(up.id + '_flash_container');
flashContainer = getElement(up.id + '_flash_container');
if (flashContainer) {
container.removeChild(flashContainer);
}
Expand Down
10 changes: 7 additions & 3 deletions src/javascript/plupload.gears.js
View file
Open in desktop
Expand Up @@ -99,6 +99,10 @@

(function(window, document, plupload, undef) {
var blobs = {};

function getElement(element){
return typeof(element) == "object" ? element : document.getElementById(element);
}

function scaleImage(image_blob, resize, mime) {
var percentage, canvas, context, scale;
Expand Down Expand Up @@ -200,7 +204,7 @@

// Add drop handler
uploader.bind("PostInit", function() {
var settings = uploader.settings, dropElm = document.getElementById(settings.drop_element);
var settings = uploader.settings, dropElm = getElement(settings.drop_element);

if (dropElm) {
// Block browser default drag over
Expand All @@ -225,7 +229,7 @@
}

// Add browse button
plupload.addEvent(document.getElementById(settings.browse_button), 'click', function(e) {
plupload.addEvent(getElement(settings.browse_button), 'click', function(e) {
var filters = [], i, a, ext;

e.preventDefault();
Expand Down Expand Up @@ -412,7 +416,7 @@

// Unbind event handlers
for (name in elements) {
element = document.getElementById(elements[name]);
element = getElement(elements[name]);
if (element) {
plupload.removeAllEvents(element, up.id);
}
Expand Down
2 changes: 1 addition & 1 deletion src/javascript/plupload.html4.js
View file
Open in desktop
Expand Up @@ -14,7 +14,7 @@

(function(window, document, plupload, undef) {
function getById(id) {
return document.getElementById(id);
return typeof(id) == "object" ? id : document.getElementById(id);
}

/**
Expand Down
33 changes: 20 additions & 13 deletions src/javascript/plupload.html5.js
View file
Open in desktop
Expand Up @@ -12,6 +12,12 @@
/*global plupload:false, File:false, window:false, atob:false, FormData:false, FileReader:false, ArrayBuffer:false, Uint8Array:false, BlobBuilder:false, unescape:false */

(function(window, document, plupload, undef) {
var fakeSafariDragDrop;

function getElement(element){
return typeof(element) == "object" ? element : document.getElementById(element);
}

var html5files = {}, // queue of original File objects
fakeSafariDragDrop;

Expand Down Expand Up @@ -265,7 +271,7 @@
inputContainer.className = 'plupload html5';

if (uploader.settings.container) {
container = document.getElementById(uploader.settings.container);
container = getElement(uploader.settings.container);
if (plupload.getStyle(container, 'position') === 'static') {
container.style.position = 'relative';
}
Expand Down Expand Up @@ -301,7 +307,7 @@
mimes.join(',') + '" ' +
(uploader.settings.multi_selection ? 'multiple="multiple"' : '') + ' />';

inputFile = document.getElementById(uploader.id + '_html5');
inputFile = getElement(uploader.id + '_html5');
inputFile.onchange = function() {
// Add the selected files from file input
addSelectedFiles(this.files);
Expand All @@ -314,7 +320,7 @@
browse_button loses interactivity, here we try to neutralize this issue highlighting browse_button
with a special class
TODO: needs to be revised as things will change */
browseButton = document.getElementById(up.settings.browse_button);
browseButton = getElement(up.settings.browse_button);
if (browseButton) {
var hoverClass = up.settings.browse_button_hover,
activeClass = up.settings.browse_button_active,
Expand All @@ -341,7 +347,7 @@
// Route click event to the input[type=file] element for supporting browsers
if (up.features.triggerDialog) {
plupload.addEvent(browseButton, 'click', function(e) {
document.getElementById(up.id + '_html5').click();
getElement(up.id + '_html5').click();
e.preventDefault();
}, up.id);
}
Expand All @@ -350,7 +356,7 @@

// Add drop handler
uploader.bind("PostInit", function() {
var dropElm = document.getElementById(uploader.settings.drop_element);
var dropElm = getElement(uploader.settings.drop_element);

if (dropElm) {
// Lets fake drag/drop on Safari by moving a input type file in front of the mouse pointer when we drag into the drop zone
Expand All @@ -360,7 +366,7 @@
var dropInputElm, dropPos, dropSize;

// Get or create drop zone
dropInputElm = document.getElementById(uploader.id + "_drop");
dropInputElm = getElement(uploader.id + "_drop");
if (!dropInputElm) {
dropInputElm = document.createElement("input");
dropInputElm.setAttribute('type', "file");
Expand All @@ -379,7 +385,7 @@
dropElm.appendChild(dropInputElm);
}

dropPos = plupload.getPos(dropElm, document.getElementById(uploader.settings.container));
dropPos = plupload.getPos(dropElm, getElement(uploader.settings.container));
dropSize = plupload.getSize(dropElm);

if (plupload.getStyle(dropElm, 'position') === 'static') {
Expand Down Expand Up @@ -424,11 +430,11 @@
uploader.bind("Refresh", function(up) {
var browseButton, browsePos, browseSize, inputContainer, pzIndex;

browseButton = document.getElementById(uploader.settings.browse_button);
browseButton = getElement(uploader.settings.browse_button);
if (browseButton) {
browsePos = plupload.getPos(browseButton, document.getElementById(up.settings.container));
browsePos = plupload.getPos(browseButton, getElement(up.settings.container));
browseSize = plupload.getSize(browseButton);
inputContainer = document.getElementById(uploader.id + '_html5_container');
inputContainer = getElement(uploader.id + '_html5_container');

plupload.extend(inputContainer.style, {
top : browsePos.y + 'px',
Expand Down Expand Up @@ -746,19 +752,19 @@

// Unbind event handlers
for (name in elements) {
element = document.getElementById(elements[name]);
element = getElement(elements[name]);
if (element) {
plupload.removeAllEvents(element, up.id);
}
}
plupload.removeAllEvents(document.body, up.id);

if (up.settings.container) {
container = document.getElementById(up.settings.container);
container = getElement(up.settings.container);
}

// Remove mark-up
container.removeChild(document.getElementById(elements.inputContainer));
container.removeChild(getElement(elements.inputContainer));
});

callback({success : true});
Expand Down Expand Up @@ -1387,4 +1393,5 @@
}
};
};

})(window, document, plupload);
26 changes: 15 additions & 11 deletions src/javascript/plupload.silverlight.js
View file
Open in desktop
Expand Up @@ -13,7 +13,11 @@

(function(window, document, plupload, undef) {
var uploadInstances = {}, initialized = {};


function getElement(element){
return typeof(element) == "object" ? element : document.getElementById(element);
}

function jsonSerialize(obj) {
var value, type = typeof obj, isArray, i, key;

Expand Down Expand Up @@ -208,7 +212,7 @@
silverlightContainer.className = 'plupload silverlight';

if (uploader.settings.container) {
container = document.getElementById(uploader.settings.container);
container = getElement(uploader.settings.container);
if (plupload.getStyle(container, 'position') === 'static') {
container.style.position = 'relative';
}
Expand All @@ -230,7 +234,7 @@
'</object>';

function getSilverlightObj() {
return document.getElementById(uploader.id + '_silverlight').content.Upload;
return getElement(uploader.id + '_silverlight').content.Upload;
}

uploader.bind("Silverlight:Init", function() {
Expand Down Expand Up @@ -289,12 +293,12 @@
uploader.bind("Refresh", function(up) {
var browseButton, browsePos, browseSize;

browseButton = document.getElementById(up.settings.browse_button);
browseButton = getElement(up.settings.browse_button);
if (browseButton) {
browsePos = plupload.getPos(browseButton, document.getElementById(up.settings.container));
browsePos = plupload.getPos(browseButton, getElement(up.settings.container));
browseSize = plupload.getSize(browseButton);

plupload.extend(document.getElementById(up.id + '_silverlight_container').style, {
plupload.extend(getElement(up.id + '_silverlight_container').style, {
top : browsePos.y + 'px',
left : browsePos.x + 'px',
width : browseSize.w + 'px',
Expand Down Expand Up @@ -372,7 +376,7 @@
uploader.bind('Silverlight:MouseEnter', function(up) {
var browseButton, hoverClass;

browseButton = document.getElementById(uploader.settings.browse_button);
browseButton = getElement(uploader.settings.browse_button);
hoverClass = up.settings.browse_button_hover;

if (browseButton && hoverClass) {
Expand All @@ -383,7 +387,7 @@
uploader.bind('Silverlight:MouseLeave', function(up) {
var browseButton, hoverClass;

browseButton = document.getElementById(uploader.settings.browse_button);
browseButton = getElement(uploader.settings.browse_button);
hoverClass = up.settings.browse_button_hover;

if (browseButton && hoverClass) {
Expand All @@ -394,7 +398,7 @@
uploader.bind('Silverlight:MouseLeftButtonDown', function(up) {
var browseButton, activeClass;

browseButton = document.getElementById(uploader.settings.browse_button);
browseButton = getElement(uploader.settings.browse_button);
activeClass = up.settings.browse_button_active;

if (browseButton && activeClass) {
Expand All @@ -410,7 +414,7 @@
uploader.bind('Sliverlight:StartSelectFiles', function(up) {
var browseButton, activeClass;

browseButton = document.getElementById(uploader.settings.browse_button);
browseButton = getElement(uploader.settings.browse_button);
activeClass = up.settings.browse_button_active;

if (browseButton && activeClass) {
Expand All @@ -426,7 +430,7 @@
delete initialized[up.id];
delete uploadInstances[up.id];

silverlightContainer = document.getElementById(up.id + '_silverlight_container');
silverlightContainer = getElement(up.id + '_silverlight_container');
if (silverlightContainer) {
container.removeChild(silverlightContainer);
}
Expand Down