1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Help with changing default "Choose File" button image in Upload Form

Discussion in 'PHP' started by chrisj, Jun 30, 2014.

  1. #1
    I'd like to replace the default "Choose File" button with an image of my own.
    Here is the code, I believe, and an image of it currently:
    SEMrush
    <div class='controls'>
    <input id="file" type="file" name="file" />
    <?php //echo form_error('file');   ?></div>
    </div>
    Code (markup):
    Any help will be greatly appreciated.
     

    Attached Files:

    chrisj, Jun 30, 2014 IP
    SEMrush
  2. ThePHPMaster

    ThePHPMaster Well-Known Member

    Messages:
    737
    Likes Received:
    51
    Best Answers:
    33
    Trophy Points:
    150
    #2
    ThePHPMaster, Jun 30, 2014 IP
  3. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    722
    Best Answers:
    152
    Trophy Points:
    470
    #3
    I would have a look at the CSS-file connected to that button. And, besides, why in the world is there an image for this... a simple CSS-button with text on it should do just fine.
     
    PoPSiCLe, Jul 1, 2014 IP
  4. chrisj

    chrisj Well-Known Member

    Messages:
    594
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #4
    I'd like to try "a simple CSS-button with text on it", can you give me a code example, please?
     
    chrisj, Jul 1, 2014 IP
  5. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    722
    Best Answers:
    152
    Trophy Points:
    470
  6. chrisj

    chrisj Well-Known Member

    Messages:
    594
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #6
    Thanks for the links. Yes, I know how to create a button, I just don't know how to add it to the code:

    <div class='controls'>
    <input id="file" type="file" name="file" />
    <?php //echo form_error('file');   ?></div>
    </div>
    HTML:
    Any additional help will be appreciated.
     
    chrisj, Jul 3, 2014 IP
  7. shemseddine

    shemseddine Active Member

    Messages:
    144
    Likes Received:
    4
    Best Answers:
    3
    Trophy Points:
    55
    #7
    I'm not going to provide code here but I will explain to you how I did it.

    I placed an image of the upload button I wanted next to the upload button and then in jquery I hid the original button and when the image is clicked on, you trigger the hidden button.

    I could provide you with example if you haven't understood what I meant
     
    shemseddine, Jul 3, 2014 IP
  8. chrisj

    chrisj Well-Known Member

    Messages:
    594
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #8
    Hi, thanks for your reply. I'm trying to replace the "Choose File" button, not an upload button.
    Any code help would be appreciated.
     
    chrisj, Jul 3, 2014 IP
  9. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    722
    Best Answers:
    152
    Trophy Points:
    470
    #9
    The problem is that "Choose file" is one of the elements in form controls you have almost no control over, apart from what @shemseddine mentioned - ie, use another element which you have full control over, and when you click on that, just trigger the normal event from the <input type="file">-button.
     
    PoPSiCLe, Jul 3, 2014 IP
  10. shemseddine

    shemseddine Active Member

    Messages:
    144
    Likes Received:
    4
    Best Answers:
    3
    Trophy Points:
    55
    #10
    Yeah sorry, I misspelled that. meant to say the choose file button
     
    shemseddine, Jul 3, 2014 IP
  11. chrisj

    chrisj Well-Known Member

    Messages:
    594
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #11
    Thanks for your replies.
    However, now I've gotten this far, any additional help will be appreciated:

    Original code (see image1):

    <div class='controls'>
    <input id="file" type="file" name="file" />
    <?php //echo form_error('file'); ?> <br /><br /></div>
    </div>
    HTML:
    image1.png

    My new code(see image2):

    <div class='controls'>
    <div id="File button">
    <div style="position:absolute;">
    <label for="fileButton"><img src="../images/ChooseF.png"></label></div>
    <input id="fileButton" type="file" name="file" />
    <?php //echo form_error('file'); ?> <br /><br /></div>
    </div></div>
    HTML:
    image2.png
    As you can see I have an image (image2) button that works successfully, but the "No file chosen" is under the image, as you can now see only "osen".
    Can anyone somehow help me move "no file chosen" out to the right of the image button?
    Thanks
     
    chrisj, Jul 8, 2014 IP
  12. inetwebhost

    inetwebhost Member

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #12
    The solution is to keep a non-visible file input for functionality while using some other visible element, such as a div or image, as the interface element. Relaying the click from the div to the input is easy.
     
    inetwebhost, Jul 11, 2014 IP
  13. Menthol

    Menthol Member

    Messages:
    47
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #13
    It's easy, find the text "No file chosen" and erase it.
     
    Menthol, Jul 14, 2014 IP
  14. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    722
    Best Answers:
    152
    Trophy Points:
    470
    #14
    Are you stupid? Or just don't know what you're talking about? The "No file chosen" is part of the input type="file", automatically rendered by the browser. It's not possible to "find the text and remove it". It is, however, possible to hide the original element entirely.
     
    PoPSiCLe, Jul 15, 2014 IP
  15. Menthol

    Menthol Member

    Messages:
    47
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #15
    hey, talk nice please. i said it wrong. you can put whatever the hell you want there, or no text at all, use something like this <input type="file" title="">, or the equivalent that works on any browser.
     
    Menthol, Jul 17, 2014 IP
  16. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    722
    Best Answers:
    152
    Trophy Points:
    470
    #16
    Okay... when you have no clue, you really shouldn't speak, at all. It _DOESN'T MATTER_ if you put in an empty value, an empty title, or whatever else you wanna throw at it. The browser renders an input type="file" however it choses, including displaying the "no file chosen" (Chrome) or "no file selected" (Firefox) - the only browser that doesn't show any text (but on the other hand, an empty input box), is IE.
     
    PoPSiCLe, Jul 18, 2014 IP
  17. Menthol

    Menthol Member

    Messages:
    47
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #17
    http://jsfiddle.net/ZDgRG/280/ . what do you say now?
     
    Menthol, Jul 19, 2014 IP
  18. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    722
    Best Answers:
    152
    Trophy Points:
    470
    #18
    Uhm... and that has got what to do with your first statement? Or your second, for that matter? It's basically just what we've told him to do already, albeit in a worse form - onchange-property on the input-element, for one.
    Although, yes, you do have one point, the fact that if you make the width of the file-input box as small as possible, you won't see the text. You will, of course, have to use js or something similar to actually show the filename when it is selected.
     
    PoPSiCLe, Jul 19, 2014 IP