Custom Upload Button

Question

hi i was just wondering how you can create you own custom file upload button, because the best i can do is

and what i want to achieve is

if there is anyway of doing this i would be very thankful, and please can i have answers that explain how to do it with code and not answers with links to websites that allow you to download a button or something like that,Thank You :)

Answer 1

Although some of these answers will create something that looks like you want it to work, they will break down when they try to perform the way that you expect. The file input doesn't style well directly and you will have trouble trying it. However, there is a trick.

The trick is to turn the opacity of the input to 0 and then change the background underneath it to the button style that you want.

.file_button_container,
.file_button_container input {
     height: 47px;
     width: 263px;
 }

 .file_button_container {
     background: transparent url(https://i.stack.imgur.com/BT5AB.png) left top no-repeat;
 }

 .file_button_container input {
     opacity: 0;
 }

<div class="file_button_container"><input type="file" /></div>

Answer 2

I think you can also try doing it this way:
Creating an additional <label for="X"></label> element which you can style easily with CSS

<div class="container">
  <label for="upload" class="uploadButton">Upload</label>
  <input type="file" name="upload" id="upload">
</div>

like

.container {
  position: relative;
}
.uploadButton {
  height: 25px;
  width: 66px;
  display: block;
  cursor: pointer;
  background: url('http://www.ifunia.com/images/christmas/youtube-upload-button.gif') center center no-repeat;
}
input[type="file"] {
  display: block;
  width: 66px;
  height: 25px;
  clip: rect(0px 0px 0px 0px);
  position: absolute;
  left: 0;
  top: 0;
}

<form>
  <div class="container">
    <label for="upload" class="uploadButton"></label>
    <input type="file" name="upload" id="upload" required />
  </div>
  <hr/>
  <button type="submit">Submit</button>
</form>

Answer 3

The arrow isn't something you can "just do with code" and the rounded corners would work fine in firefox, but not in ie using css... if you just need to use a custom image it's easy:

css:

#my_upload_button{
  background-image:url(path-to-file.png);
  border:none;
}

Answer 4

In Vue JS If you wanna put the upload image button inside the textarea use Relative and Absolute position to put the camera icon inside the textarea use bottom-3 right-4 to find the proper position

<div class="field relative">
        <label>Description</label>
        <textarea class="textarea" v-model="description" type="text" maxlength="10000"> </textarea>
        <label for="upload-file" class="icn icn-camera cursor-pointer absolute bottom-3 right-4">
          <input type="file" id="upload-file" hidden ref="file" @change="getImage($event)" accept="image/**" />
        </label>
  </div>

if not inside the textarea box, just one custom upload button then just keep the code like this

 <label for="upload-file" class="icn icn-camera cursor-pointer">
      <input type="file" id="upload-file" hidden ref="file" @change="getImage($event)" accept="image/**" />
    </label>

change the default upload file icon to a camera icon

Answer 5

Step 1. Create a simple html markup

<div class="fileUpload btn btn-primary">
    <span>Upload</span>
    <input type="file" class="upload" />
</div>

Step 2. CSS: Tricky Part

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

For demo see here http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/

Answer 6

Use the input's label as custom upload button:

<label for="pic" class="uploadfilelabel" >upload </label>
<input type="hidden" name="MAX_FILE_SIZE" value="110000">
<input id="pic" name="pic" type="file" size="110000">

and CSS:

 label.uploadfilelabel{/*custom label here*/}
 input[type=file]{display:none;}

Notice that we did not display the main input button, because otherwise it will occupy space

Answer 7

I'm too late to answer but someone surely will find this useful in future, no need to use of Javascript or Hidden field too. If you are using Bootstrap then definitely there's no need of btn CSS as well.

#upload_file 
{
    display: none;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
}

.btn {
    -moz-user-select: none;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    display: inline-block;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    padding: 0.375rem 0.75rem;
    text-align: center;
    transition: color 0.15s ease-in-out 0s, background-color 0.15s ease-in-out 0s, border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    vertical-align: middle;
    white-space: nowrap;
}

<label for="upload_file" class="custom-file-upload btn btn-primary"><i class="fa fa-cloud-upload"></i> File Upload</label>
<input class="margin" type="file" formnovalidate id="upload_file" name="file" accept="*">

Answer 8

Here is an approximation to the button you want with css/html

html

<button class="upload">Choose a file to upload...</button>

css

.upload{
    border:0;
    padding:10px 20px;
    -moz-border-radius:10px;
    border-radius:10px;
    background-color:#4488ee;
    color:white;
    font-size:16px;
}

demo http://jsfiddle.net/gaby/qdX5d/2/

for rounded corners in pre-IE9 use css3pie