At default when the file upload tag is used it shows
choose file or chose on its upload button, just like the on on Nairaland when u want to make a post. What i want to do is to change the choose text to something like 'upload now'.
I have tried this:
<input type='file' value='upload now'>
but its not working , i know this i acheivable as facebook have it on their web app..
Pls can anyone help..
cc: dhtml18 , guru01 , CodeHouse , scoutlebest4

I know I did that stuff on my Nairaland.com, but it has been long, I have forgotten the how. All I remember is that it is a very long something.

...

dhtml18:
I know I did that stuff on my Nairaland.com, but it has been long, I have forgotten the how. All I remember is that it is a very long something.

Does it involve using javscript's file upload API?
help me make a google search on it and post the answers here pls, right now am using freebasics(facebook's free internet service) and i cannot access google with it no megabyte sef..

Nmeri17:

Explain please

teampregar:
Explain please

OK. I've whipped up a jQuery snippet. More like a hack with which you can use to simulate it.It looks like this:

var input = $("input"\)[0].getBoundingClientRect();
$("div"\).css({"top": input.top, "height": input.height}).click(function () {
	$(input).trigger("click"\).focus();
});

I've added a working bin here to demonstrate a use case for you.
https://output.jsbin.com/qoqoxa

Modified
It seems to only work on chrome because I used vendor specific prefixes. Use other prefixes for broader access.

^^^the hack i did on Nairaland works even on IE 6 (as does the entire website) as well as all browsers i tested in. These days, too much JAVA and other languages have somewhat reduced my efficiency in css/javaScript.
Let me see if I can whip up a little tutorial from my past work on this matter. What I know I did not do is that your trigger click event - i remember that method failed woefully back then.

during lecture was thought how to create file form...
.
but usinq freebasics now cant help now
.
but i know its done with <input type="file"> with some extra code

will provide the answer tomorrow...

^^^While we are still awaiting your lectures, me, i have been having a sleepless night over this matter.

@OP just go straight to http://blogs.Nairaland.com/archives/8-How-To-Customize-The-HTML-Form-File-Upload-Element.html for the solution.

This is the sample code here - http://blogs.Nairaland.com/demos/html_file_upload_customized/customized.php (you can decompile that and skip all the long long blog message jare - that is for newbies)

dhtml18:
^^^i have been having a sleepless night over this matter.

And it took me just 80 seconds Just kidding sha. Anyway your own hack uses one form, one element; which is a lot like one man, one wife . So if I need other form elements, I have to add other forms . Besides, how do I submit the image if I add other forms Your own solution didn't even work on opera mini nor when I paste it into jsbin.com .

On a more serious note, as far as I'm concerned, whatever would cause you to seek to customize an upload button beyond simple styling, is evil and should be ostracised from your mind entirely. The guy that gave instances of sites using it should take cognition of the fact that LinkedIn and the Facebook mobile applications are web applications that cannot be accessed by smaller devices hence they have stronger control over how it displays. For one, Opera for mobile and IE display the button on the right. Opera for PC displays it on the left and uses webkit approved prefixes but the event never triggers regardless of if you strike the button with a stick . So instead of having a thousand user agent conditions that won't scale, they resort to making those dedicated applications which gives them more environmental control.

@dhtml18 I hardly give a fûck about how my project appears on other devices/browsers. If you do not use PC Chrome, well, fûck you and your shitty browsers All those FF fan boys, kuku kill me Mbok how will I be building IE6 compatible applications Was I sent to the world to suffer like Job? Abi who still uses IE6? Even my great grandfather browsing from the underworld upgrades his browsers often cuz Data is free over there and a nigga gats to be up to date

Finally, OP, best advice; ditch the entire setup. If you wanno style the button to the point where it sings and dance, I can help you with that also(Although this also would be a hack and is not reliable across browsers other than good old Chrome ). But since there's no consolidated solution, hacks will always desert you someday.

laughing like a mad man, this is unbelievable, and they call me the master troll. . . . . . . . . . .

but one thing is for sure, it is better to just use the normal way, unless you really really really have to do it.

Easiest way would be to hide the file input element, style a span, input text, whatever and a button to look like a file input if it is absolutely necessary and simulate a click event on the hidden file input when the styled button is clicked. Did that sometime ago.

Nmeri17:
And it took me just 80 seconds Just kidding sha. Anyway your own hack uses one form, one element; which is a lot like one man, one wife . So if I need other form elements, I have to add other forms . Besides, how do I submit the image if I add other forms Your own solution didn't even work on opera mini nor when I paste it into jsbin.com .

On a more serious note, as far as I'm concerned, whatever would cause you to seek to customize an upload button beyond simple styling, is evil and should ostracised from your mind entirely. The guy that gave instances of sites using it should take cognition of the fact that LinkedIn and the Facebook mobile applications are web applications that cannot be accessed by smaller devices hence they have stronger control over how it displays. For one, Opera for mobile and IE display the button on the right. Opera for PC displays it on the left and uses webkit approved prefixes but the event never triggers regardless of if you strike the button with a stick . So instead of having a thousand user agent conditions that won't scale, they resort to making those dedicated applications which gives them more environmental control.

@dhtml18 I hardly give a fûck about how my project appears on other devices/browsers. If you do not use PC Chrome, well, fûck you and your shitty browsers All those FF fan boys, kuku kill me Mbok how will I be building IE6 compatible applications Was I sent to the world to suffer like Job? Abi who still uses IE6? Even my great grandfather browsing from the underworld upgrades his browsers often cuz Data is free over there and a nigga gats to be up to date

Finally, OP, best advice; ditch the entire setup. If you wanno style the button to the point where it sings and dance, I can help you with that also(Although this also would be a hack and is not reliable across browsers other than good old Chrome ). But since there's no consolidated solution, hacks will always desert you someday.

True true pesin no come this world come suffer ooo

Nmeri17:


The guy that gave instances of sites using it should take cognition of the fact that LinkedIn and the Facebook mobile applications are web applications that cannot be accessed by smaller devices hence they have stronger control over how it displays. For one, Opera for mobile and IE display the button on the right. Opera for PC displays it on the left and uses webkit approved prefixes but the event never triggers regardless of if you strike the button with a stick . So instead of having a thousand user agent conditions that won't scale, they resort to making those dedicated applications which gives them more environmental control.

I dont understand dis part, the stuff i am talkig about works on mobile.facebook.com with an opera mini for android browser. Do u also mean that Facebook for Andorid,IOS and windows phone are not actually native applications but web applications?

teampregar:

I dont understand dis part, the stuff i am talkig about works on mobile.facebook.com with an opera mini for android browser. Do u also mean that Facebook for Andorid,IOS and windows phone are not actually native applications but web applications?

You are mixing up technologies bro. There are other ways of doing it - but since i speak in codes, i will rather provide another example when i have time.

bot101:
Easiest way would be to hide the file input element, style a span, input text, whatever and a button to look like a file input if it is absolutely necessary and simulate a click event on the hidden file input when the styled button is clicked. Did that sometime ago.

This will fail in most browsers like internet explorer. I mentioned that in my blog post.

dhtml18:
^^^While we are still awaiting your lectures, me, i have been having a sleepless night over this matter.

@OP just go straight to http://blogs.Nairaland.com/archives/8-How-To-Customize-The-HTML-Form-File-Upload-Element.html for the solution.

This is the sample code here - http://blogs.Nairaland.com/demos/html_file_upload_customized/customized.php (you can decompile that and skip all the long long blog message jare - that is for newbies)

Nice

Another hack would be to style a button blah blah blah and overlay it with a completely transparent file input element.

bot101:
Another hack would be to style a button blah blah blah and overlay it with a completely transparent file input element.

I already mentioned something like that. This is programming section, you need to speak in codes - talk is cheap.
Write a code to make your point. I am the only person that have provided a likely solution on this thread. We need other alternatives.

[s]

dhtml18:

I already mentioned something like that. This is programming section, you need to speak in codes - talk is cheap.
Write a code to make your point. I am the only person that have provided a likely solution on this thread. We need other alternatives.

[/s]

The poster above me needs to be e-flogged thoroughly.

Nmeri17:

dhtml18:

I already mentioned something like that. This is programming section, you need to speak in codes - talk is cheap.
Write a code to make your point. I am the only person that have provided a likely solution on this thread. We need other alternatives.

As someone said earlier, I no come this world come suffer.

bot101:


As someone said earlier, I no come this world come suffer.

Ha ha ha ha!