Upload file without the BROWSE box

[matsko]

Websites like gmail.com use a file attachment system where the sender selects the file from his/her computer to be included within the message. The thing about this is that when the file is browsed upon there is NO browse input element to be shown.

I believe this somewhat prevents the user from messing around with the embedded filepath within the browse box (if they can mess it up). It also doesn't display such an ugly looking browsing box and it's file path.

Soooo, does anyone know how to make the BROWSE action occur (where explorer basically pops up)?

[Raffles]

I don't see what you mean about Gmail. When I click "attach a file", the normal file input text box appears with the "Browse..." button on the right. Once this is done and the user's focus goes elsewhere Gmail uploads the file (via Ajax or some other method) while the user is doing something else, to speed up the process when the user clicks "Send". Is this what you mean?

Basically, it is impossible to make the "Open file" box appear without the Browse... button. It is impossible because browsers are designed like this to avoid security problems. It is possible to make it seem like it isn't there and "replace" it with something else (e.g. an image) by some CSS trickery (setting the opacity of the input element to 0.01 and letting this other image show through it from below). deviantart.com is a place that does this and it does appear quite cool. But you're messing with what people are used to. In the vast, vast majority of websites, people are used to a familiar button that says "Browse..." with a text field next to it and it is my opinion that this is a good thing and you shouldn't mess with it.

[matsko]

This is what I mean

http://digitarald.de/playground/uplooad.html

You see how there is not PATH input box, only a <button> that allows for a file to be selected.

[Raffles]

If you look at the HTML source, you'll see some embedded javascript that includes this:

var uplooad2 = new FancyUpload($('photoupload2-filedata-1'), {
                swf: 'swiff/Swiff.Uploader.swf',
                queueList: 'photoupload-queue-2'
            });

Looks like it's a plugin for Mootools: http://digitarald.de/project/fancyupload/

So it uses Flash and lots of Javascript. That said, I'd never seen that before and I think it's pretty damn cool. And it degrades nicely into a normal input box if Javascript is off.

I might use that...

[matsko]

Yeah. I actually have seen this "idea" in use before (having no input box when uploading a file).

But I didn't know that it was a flash file performing the upload.

WOW! That multi-upload feature is sick!!!