14 Replies - 25431 Views - Last Post: 04 June 2015 - 07:38 AM

#1 arvindthakur  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 133
  • Joined: 07-June 11

how to change default label of input type="file" button elemen

Posted 02 December 2011 - 03:53 AM

Hello Guys,

Well I am developing a simple page in html, in which i am using input element type="file".
By default we get a textbox and a button to browse a file from the system. Default label of this button is Browse. But I want to change the label of this button with some other name, like 'Open' or 'Select File'. But I don't
have any idea how to accomplish this.

Is anyone know how to do this?

Thanks in Advance!!!!

Regards,

Arvind

Is This A Good Question/Topic? 0
  • +

Replies To: how to change default label of input type="file" button elemen

#2 Atli  Icon User is offline

  • Enhance Your Calm
  • member icon

Reputation: 3858
  • View blog
  • Posts: 6,364
  • Joined: 08-June 10

Re: how to change default label of input type="file" button elemen

Posted 02 December 2011 - 05:00 AM

Hey.

You can't change that. The browsers don't allow you access to it, and instead display the file input element as they see fit. (WebKit browsers, for instance, show this completely different from FF, IE and Opera.)

If you really need to alter the appearance of this type of input, check out this article:
http://www.quirksmod.../inputfile.html
Was This Post Helpful? 2
  • +
  • -

#3 arvindthakur  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 133
  • Joined: 07-June 11

Re: how to change default label of input type="file" button elemen

Posted 02 December 2011 - 05:16 AM

View PostAtli, on 02 December 2011 - 05:00 AM, said:

Hey.

You can't change that. The browsers don't allow you access to it, and instead display the file input element as they see fit. (WebKit browsers, for instance, show this completely different from FF, IE and Opera.)

If you really need to alter the appearance of this type of input, check out this article:
http://www.quirksmod.../inputfile.html


Thanks Atli..
Was This Post Helpful? 0
  • +
  • -

#4 techsavant  Icon User is offline

  • New D.I.C Head

Reputation: -8
  • View blog
  • Posts: 13
  • Joined: 04-June 15

Re: how to change default label of input type="file" button elemen

Posted 04 June 2015 - 05:18 AM

I know this is old, but in case anyone else is looking for help with this like I was.

I ended up making my own button and hiding the input.

Non-JQuery

<script>
function fireEvent(element,event) {
   if (document.createEvent) {
       // dispatch for firefox + others
       var evt = document.createEvent("HTMLEvents");
       evt.initEvent(event, true, true ); // event type,bubbling,cancelable
       return !element.dispatchEvent(evt);
   } else {
       // dispatch for IE
       var evt = document.createEventObject();
       return element.fireEvent('on'+event,evt)
   }
}
</script>

<input style="display: none; visibility: hidden;" id="myFileInput" type="file">
<button type="button" onclick="fireEvent(document.getElementById('myFileInput'));">Custom Text</button>





JQuery (Even simpler)
<input style="display: none; visibility: hidden;" id="myFileInput" type="file">
<button type="button" onclick="$('#myFileInput').trigger('click');">Custom Text</button>

Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is online

  • I'm not here to twist your niblets
  • member icon

Reputation: 4686
  • View blog
  • Posts: 17,363
  • Joined: 12-December 12

Re: how to change default label of input type="file" button elemen

Posted 04 June 2015 - 05:33 AM

That JS code doesn't work for me in either GC or FF, probably because you haven't supplied the event argument. This does:
<button type="button" onclick="document.getElementById('myFileInput').click();">Custom Text</button>

This post has been edited by andrewsw: 04 June 2015 - 05:36 AM

Was This Post Helpful? 0
  • +
  • -

#6 techsavant  Icon User is offline

  • New D.I.C Head

Reputation: -8
  • View blog
  • Posts: 13
  • Joined: 04-June 15

Re: how to change default label of input type="file" button elemen

Posted 04 June 2015 - 05:41 AM

The jQuery version should work, I'm using it myself... the javascript version should too but might need a tweak or two. Are you having issues with the jQuery version I posted ? If yes, what version of jQuery are you using ?

You can see the code working at JSFIDDLE

This post has been edited by andrewsw: 04 June 2015 - 05:44 AM
Reason for edit:: Removed previous quote, just press the REPLY button

Was This Post Helpful? 0
  • +
  • -

#7 andrewsw  Icon User is online

  • I'm not here to twist your niblets
  • member icon

Reputation: 4686
  • View blog
  • Posts: 17,363
  • Joined: 12-December 12

Re: how to change default label of input type="file" button elemen

Posted 04 June 2015 - 05:49 AM

Note that you don't have to quote a previous post, there is a REPLY button further down the page.

The jQuery works but if you are providing this as an example then I'd prefer that you attach the event using on(), and not encourage the use of event attributes - mixing HTML and JS/jQuery. In which case, you might propose it as a Snippet, and not attach it to a four year old post ;)

This post has been edited by andrewsw: 04 June 2015 - 05:50 AM

Was This Post Helpful? 0
  • +
  • -

#8 techsavant  Icon User is offline

  • New D.I.C Head

Reputation: -8
  • View blog
  • Posts: 13
  • Joined: 04-June 15

Re: how to change default label of input type="file" button elemen

Posted 04 June 2015 - 05:49 AM

You are right about the second argument in the pure JS version. I forgot to add it :)

just put 'click' there

Here it is working on JSFIDDLE
Was This Post Helpful? 0
  • +
  • -

#9 techsavant  Icon User is offline

  • New D.I.C Head

Reputation: -8
  • View blog
  • Posts: 13
  • Joined: 04-June 15

Re: how to change default label of input type="file" button elemen

Posted 04 June 2015 - 06:04 AM

I was just trying to be helpful. Thanks for the like 10 things you expect me to do.

Reasons I disagree with you:

  • Your argument is for readability I'm assuming. While readability is one advantage of using .on(), .on() is slower and I prefer performance over readability.
  • .on() should only be used (IMO) if you need to are supporting DHTML libraries or Mozilla extensions that need to work well even if other libraries/extensions are used or you need more than a single event handler for an event.


I signed up just now to answer this. (that's how nice a guy I am haha)... how do I create a snippet? I'd be happy to if you think it would be helpful. :)

If you want me to code the snippet with .on() that's no problem.

I'm going to post a jQuery question. I'd be thankful if you would take a look at it. Should I post the link here or will you be able to find it ?
Was This Post Helpful? 0
  • +
  • -

#10 andrewsw  Icon User is online

  • I'm not here to twist your niblets
  • member icon

Reputation: 4686
  • View blog
  • Posts: 17,363
  • Joined: 12-December 12

Re: how to change default label of input type="file" button elemen

Posted 04 June 2015 - 06:23 AM

I appreciate that you are helping. Thank you. However, the JS was wrong and digging up a four year old question is discouraged. This is why I was suggesting a Snippet as possibly a better option. There is a Snippets button at the top of the screen, read the Snippet guidelines.

I don't review the Snippets myself, but I suspect that a snippet with separation of JS/jQuery from HTML is more likely to be accepted, which is why I mentioned it. I may be wrong though, it depends how strongly the reviewer(s) feel about it.



Just post a new question in the jQuery forum.
Was This Post Helpful? 0
  • +
  • -

#11 techsavant  Icon User is offline

  • New D.I.C Head

Reputation: -8
  • View blog
  • Posts: 13
  • Joined: 04-June 15

Re: how to change default label of input type="file" button elemen

Posted 04 June 2015 - 06:30 AM

I accidentally put it in HTML/CSS... reported to mod trying to get it moved.

I left out one little argument on a function, it's a typo, I hardly think that counts as my JS being "wrong". Anyone who inspected their console could easily see the second argument was missing and add it. When 99% of your code works and you leave one word out because of a brainfart, I don't think that should be considered "wrong" and I think it's still pretty helpful.

I didn't "dig" this post up, I got it by searching google for my question. It was one of the top results. So I figured, like I said, that I would post in case anyone else is searching for the same thing. Or do you not feel everyone should benefit, only the person who originally asked the question? I, personally, hate it when I go to a Q/A site and there is a question and no answer just someone saying "Thanks anyway, figured it out!" ... . "POST THE SOLUTION!" I scream at the screen in vain.

OR even worse, like this, where the "answer" that was given is "Not Possible". Anything is possible.
Was This Post Helpful? 0
  • +
  • -

#12 andrewsw  Icon User is online

  • I'm not here to twist your niblets
  • member icon

Reputation: 4686
  • View blog
  • Posts: 17,363
  • Joined: 12-December 12

Re: how to change default label of input type="file" button elemen

Posted 04 June 2015 - 06:43 AM

Your post is helpful, once corrected.

The term "digging" is often encountered when discussing "necro-posting" :). I didn't say that there was anything particularly wrong with your post, just that adding to a four-year old question "is discouraged". (If it was much older than this then I probably would have hidden it.)
Was This Post Helpful? 0
  • +
  • -

#13 techsavant  Icon User is offline

  • New D.I.C Head

Reputation: -8
  • View blog
  • Posts: 13
  • Joined: 04-June 15

Re: how to change default label of input type="file" button elemen

Posted 04 June 2015 - 06:44 AM

OK, I gotcha, I'll create a snippet instead from now on for necro-posts :) Thanks for the heads up
Was This Post Helpful? 0
  • +
  • -

#14 andrewsw  Icon User is online

  • I'm not here to twist your niblets
  • member icon

Reputation: 4686
  • View blog
  • Posts: 17,363
  • Joined: 12-December 12

Re: how to change default label of input type="file" button elemen

Posted 04 June 2015 - 06:45 AM

No problem.
Was This Post Helpful? 0
  • +
  • -

#15 Atli  Icon User is offline

  • Enhance Your Calm
  • member icon

Reputation: 3858
  • View blog
  • Posts: 6,364
  • Joined: 08-June 10

Re: how to change default label of input type="file" button elemen

Posted 04 June 2015 - 07:38 AM

View Posttechsavant, on 04 June 2015 - 01:30 PM, said:

OR even worse, like this, where the "answer" that was given is "Not Possible". Anything is possible.

You should have paid closer attention. I did actually post a link to a workaround in my original answer; pretty much the exact workaround, in fact, that you posted. (A hidden file input triggered by a custom element.)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1