HTML file input, name in the input

Question

I'm working on an upload option, now I'm working on the lay-out of my file input. What I want to make is an input where the filename changes with the browse of the file input.

Code Now

<form action="" method="post" enctype="multipart/form-data">
  <label for="file">Filename:</label><input type="file" name="file" id="file"><br>
  <input class="btn btn-success btn-block uploadform" type="submit" name="submit" value="Submit">
</form>

What I get now

https://scrshot.eu/s/4a157f9.png

What I want to get

https://scrshot.eu/s/b73c306.png - It has to be still clickable

Does somebody has an idea how to do this?

Thanks.

You can look here: http://stackoverflow.com/questions/4909228/style-input-type-file — Bunyomayn, Oct 08 '14 at 09:37
@Bunyomayn I've found that page before, couldn't find the answer to my question there. — N. Hamelink, Oct 08 '14 at 10:01
@The_Monster it's the file input. (See first link in begin post) — N. Hamelink, Oct 08 '14 at 10:16
Isn't the default behaviour of the file input to show the name of the selected file? — David Jones, Oct 08 '14 at 10:49
@DavidJones Yes, but I want it not next to it, I want to let the 'Browser' part change to the name of the file. — N. Hamelink, Oct 08 '14 at 10:52
@DevNiels so the button text will change to the name of the file? — David Jones, Oct 08 '14 at 11:11
@DevNiels Seem like a lot of effort for something so small.You first task would be too look reading the filename from the upload. See this article http://www.html5rocks.com/en/tutorials/file/dndfiles/ — David Jones, Oct 08 '14 at 11:18

score 0 · Accepted Answer · answered Oct 08 '14 at 11:23

0

I found the answer, thank you all

data-filename-placement="inside"

answered Oct 08 '14 at 11:23

N. Hamelink

603
5
14

HTML file input, name in the input

1 Answers1