View Full Version : invoking "file selection box"

09-15-2006, 06:32 PM
Hi again,

I now have this dilemma: I want to implement user-selectable background on my site, however I'm not willing to have the background files being uploaded, rather I want local filenames to be used (like file:///c:/blah/mynicepic.jpg), plain easy to implement "site-wise" (cookie magic), but there's a catch:
I'd like to use UAs "file selection box" (like with uploading) to appear. Do you know any way to invoke that?

09-15-2006, 09:12 PM
well, the temporary- and probably permanent solution is checking if the <input type="file"> element has value, and grab it.

09-16-2006, 12:34 PM
That's really not going to work. Most browsers won't allow you to do this for security reasons.

09-16-2006, 01:24 PM
Yup, just tested, grabbing values works, but FF disallows using anything with file://

here's a test of the "control panel", http://rambo.id.uw.edu.pl/test.html
I have now a different task bothering me, populating the selection box with names and values of options taken from the array on top:

backgrounds = new Array();
backgrounds['Solid'] = new Array("solid", bgvalue);
backgrounds['Scatter'] = new Array("image", "/pictures/back.png");

The name is backgrounds[x], values are just position in main backgrounds[] array;
The question is the code which would fill in the options in selection box. Of course I can do it manually, but that would be pain if I would want to add or remove stuff...

09-16-2006, 01:39 PM
You haven't declared "backgrounds." Also, the ["solid", bgvalue] syntax is marginally better than new Array() for some obscure reason I can't currently remember.

window.onload = function() {
var select = document.getElementById("backgroundSelect");
for(var i in backgrounds)
select.options.add(new Option(backgrounds[i][0], backgrounds[i][1]), select.options.length);

09-16-2006, 02:06 PM
Implemented, now the another thing: need to split "HTML color" into rgb:

I know that I can do parseInt(value, 16), but haven't done any splitting yet, so is

function fromHEXtoRGB(value) {
r = parseInt(value.substr(1, 3), 16);
g = parseInt(value.substr(3, 5), 16);
b = parseInt(value.substr(5), 16);
return r, g, b;

is ok?

How with oposite, ho to convert decimal to hex?

09-16-2006, 03:40 PM
return r, g, b;You can only return one value. Use an object. In fact, the whole thing can be made into an object:
String.prototype.splitEvery = function(n) {
var s = this,
p = [];

while(s.length < 0) {
p.push(s.substr(0, n));
s = s.substr(n);

return p;

String.prototype.padFront = function(n, c) {
var d = c || "0",
s = this;

while(s.length < n)
s = d + s;

return s;

function Colour(r, g, b) {
this.red = r;
this.green = g;
this.blue = b;

Colour.fromThreeDigitHex = function(str) {
var rgb = str.substr(1).splitEvery(1);

for(var i = 0; i < rgb.length; ++i)
rgb[i] = parseInt(rgb[i] + rgb[i], 16);

return new Colour(rgb[0], rgb[1], rgb[2]);

Colour.prototype.toThreeDigitHex = function() {
return "#" + this.red.toString(16).padFront(2).charAt(0)
+ this.green.toString(16).padFront(2).charAt(0)
+ this.blue.toString(16).padFront(2).charAt(0);

Colour.fromSixDigitHex = function(str) {
var rgb = str.substr(1).splitEvery(2);

for(var i = 0; i < rgb.length; ++i)
rgb[i] = parseInt(rgb[i], 16);

return new Colour(rgb[0], rgb[1], rgb[2]);

Colour.prototype.toSixDigitHex = function() {
return "#" + this.red.toString(16).padFront(2)
+ this.green.toString(16).padFront(2)
+ this.blue.toString(16).padFront(2);

Colour.fromCSSRGB = function(str) {
var rgb = str.substr(4).substr(0, rgb.length - 1).replace(/ /g, "").split(",");

for(var i = 0; i < rgb.length; ++i)
rgb[i] = parseInt(rgb[i], 10);

return new Colour(rgb[0], rgb[1], rgb[2]);

Colour.prototype.toCSSRGB = function() {
return "rgb(" + [this.red, this.green, this.blue].join(", ") + ")";

Colour.fromString = function(str) {
if(str.charAt(0) === "#" && str.length === 4)
return Colour.fromThreeDigitHex(str);
else if(str.charAt(0) === "#" && str.length === 7)
return Colour.fromSixDigitHex(str);
else if(str.indexOf("rgb(") === 0)
return Colour.fromCSSRGB(str);
else throw new Error("Bad colour passed to Colour.fromString()");

09-16-2006, 04:07 PM
*plunk* that was my jaw dropping...

while I'll deliberate more if I need to implement that (well, maybe later, when I implement color schemes), here's another obstacle I encountered:
document.body.style.backgroundColor is... null?

Found it: document.body.bgColor ... pheeeewww....

09-16-2006, 04:12 PM
It's empty, not null. It probably hasn't been set.

09-16-2006, 04:27 PM
anyway, check out the result
now just client- and server-side cookie handling, and I'm set

09-16-2006, 04:34 PM
Found it: document.body.bgColor ... pheeeewww....Outdated property, analogous to <body bgcolor="color">. CSS should be used instead.

09-16-2006, 04:48 PM
Outdated property, analogous to <body bgcolor="color">. CSS should be used instead.
it should, but DOM inspector tells me that Mozilla clears the .style.backgroundColor, and moves it to .bgColor, I'll use these two as conditional statement

09-16-2006, 08:30 PM
Well, testing's over, FF works perfectly well- can anyone help me debug the page for IE now?