kessi-cpa Library logo (4.0 KB)

How to Customize an Input File Upload

Concept

The Input File Upload is an HTML DOM object that allows the browser to access a client computer, select a file, and download it to the web server through a form submission. This object allows very little customization and is displayed differently by each browser.

In this tutorial, we will customize the Input File Upload to be displayed according to our design and uniformly across all browsers.

Example

How To

1. Add HTML

<table>
  <tr>
      <td>
        <input id="lblFileName" type="text" class="lblUploadedFile" readonly="true" />
      </td>
      <td style="padding-left:10px;">
        <div class="fileUploadContainer">
          <div class="dvUnder">
            <input type="button" class="browseButton" value="Browse" />
          </div>
          <div class="dvUpper">
            <input id="FileUpload" type="file" class="fileUpload" onchange="changed()" />
          </div>
        </div>
      </td>
    </tr>
</table>

2. Add CSS

.browseButton
{
  height: 100%;
  width: 100%;
  border: none;
  border-radius: 1px;
  background-color: #0596c7;
  background-image: -webkit-linear-gradient(top,#06bcf9,#0596c7);
  cursor: pointer;
  color: #fff;
  font-size: 16px;
}

.lblUploadedFile
{
  width: 500px;
  padding: 7px 12px;
  font-size: 16px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 1px;
  color: #666;
  background-color: #fff;
  transition: 0.3s;
}

.fileUpload
{
  width: 100px;
  height: 34px;
  opacity: 0;
  border-radius: 1px;
  cursor: pointer;
}

.fileUploadContainer
{
  width: 100px;
  height: 34px;
  position: relative;
}

.fileUploadContainer:hover
{
  box-shadow: 0 3px 5px 0 rgba(0,0,0,0.3);
}

.dvUpper
{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0;
}

.dvUnder
{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

3. Add JavaScript

<script type="text/javascript">
    function changed() {
        try {
            var fileUploaded = document.getElementById("FileUpload").value;
            document.getElementById("lblFileName").value = fileUploaded;
        }
        catch (err) {
            window.alert(err.message);
        }
    }
</script>
js for dialogbox (39 kb)
Author of this article:
Mahmoud Kessi, CPA, CGA
mkessi@kessi-cpa.com
(204) 226-9576

Comments & Questions

Add New Comment or Question




Post

REPLY/COMMENT



Email Link


Link to be shared:

×

Confirmation

Copyright © 2016-2019 KESSITEK.