Styling File Upload Inputs with ButtonReplacement.JS

Here’s a quick and dirty way to style file upload (<input type="file" />) boxes with a few lines of JavaScript and ButtonReplacement.JS, so they look like this:

instead of this:

The Init Script:

<script type="text/javascript">
  uploadjs.init('100', 'Browse for File...'); // width and text of the "Browse..." button
  </script>

The HTML – any number of file input boxes:

<form id="Form1" action="" method="post">
   <input type="file" name="File1" />
   <input type="file" name="File2" />
   <input type="file" name="File3" />
   <input type="file" name="File4" />
  </form>

The JavaScript:

var brjsSkin = 'WeMakeSites'; // Set skin to ButtonReplacement.JS
var brjsFolder = 'Scripts'; // Root folder of ButtonReplacement.JS
var brjsEnabled = true; // Is ButtonReplacement.JS enabled or not? (true | false)
var isIE = window.ActiveXObject;
var uploadjs = {};
uploadjs.init = function(width, text)
{
 if(window.addEventListener)
 {
  window.addEventListener('load', function(event)
  {
   initUploadJs(width, text);
  }, false);
 }
 if(window.ActiveXObject)
 {
  window.attachEvent('onload', function(event)
   {
    initUploadJs(width, text);
   }
  );
 }
};
function initUploadJs(width, text)
{
 var uploadinputs = $tag('input');
 for(i = 0; i < uploadinputs.length; i ++)
 {
  if(uploadinputs[i].type == 'file')
  {
   var parent = $create('span');
   var upload = uploadinputs[i];
   var fakewrapper = $create('span');
   
   parent.className = 'UploadJsWrapper';
   upload.className = 'UploadJsRealUpload';
   parent.style.width = width + 'px';
   
   if(isIE)
   {
    upload.style.display = 'none';
    fakewrapper.innerHTML = [
     '<input type="button" value="' + text + '" onclick="this.parentNode.previousSibling.click();" style="width: ' + width + 'px;" />'
    ];
   }
   else
   {
    fakewrapper.innerHTML = [
     '<span><!-- / --></span><input type="button" value="' + text + '" style="width: ' + width + 'px;" /><span><!-- / --></span>'
    ];
   }
   upload.parentNode.insertBefore(parent, upload);
   parent.appendChild(upload);
   parent.appendChild(fakewrapper);
  }
 }
 replaceButtons();
}

And a little bit of CSS:

<style type="text/css">
  .UploadJsWrapper
  {
   display: inline-block;
   overflow: hidden;
   position: relative;
   height: 22px;
   padding-right: 10px;
  }
  .UploadJsRealUpload
  {
   position: absolute;
   display: block;
   float: left;
   -moz-opacity: 0;
   opacity: 0;
  }
  </style>

The full example is available for download here. If you have missed the demo link – here it goes again.

Alternative way for styling file input boxes is provided by Upload.XML – a skinnable AJAX control for creating file upload lists.