File Upload Input Field Design

[gaffling]

I would suggest the following for a nice File Upload Input Field:

      file {        
        padding: .7rem 3rem .3rem 1rem;
        display: block;
        width: 100%;
        border: 1px solid #e3e6e8;
        background: #fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDBWMHoiLz48cGF0aCBkPSJNNCAxMmwxLjQxIDEuNDFMMTEgNy44M1YyMGgyVjcuODNsNS41OCA1LjU5TDIwIDEybC04LTgtOCA4eiIvPjwvc3ZnPg==) no-repeat right 1rem center;
        background-size: 2rem;
        border-radius: 2px;
        height: 4rem;
        font-size: 1.4rem;
        font-weight: 300;
        text-indent: .5rem;
        margin: .5rem 0 2rem;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        cursor: pointer;
      }
      file:before {
        content: attr(data-text);
      }
      file[primary]:after {
        color: white;
        background-color: #679;
        content: 'Upload';
        position: absolute;
        top: 0;
        right: 0;
        padding: .7rem 1.5rem .6rem 1rem;
        margin: 0;
      }
      file[primary]:hover::after {
        background-color: #5a6987;
      }
      file input {
        border-bottom: 1px solid white !important;
        opacity: 0;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 99;
        height: 40px;
        margin: 0;
        padding: 0;
        display: block;
        cursor: pointer;
        width: 100%;
      }
      file:hover {
        border-color: #679;
        outline: 0;
      }

can be use like this:

        <file data-text="Select your file!">
          <input name="filename" type="file" id="filename" required>
        </file>

or like this:

        <file primary data-text="Select your file!">
          <input name="filename" type="file" id="filename" required>
        </file>

and this will show the selected filename:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
      $('form').on('change', '#filename', function(){ 
        $(this).parent('file').attr('data-text', $(this).val().replace(/.*(\/|\\)/, '') );
      });
    </script>

Please Comment what do you think about ;-)

[craigmc08]

Bringing in jquery doesn't really make sense for this use. jquery is around 4x bigger than the entire BareCSS library (I think). Probably better to write that script in plain javascript:

document.querySelectorAll('#filename').forEach(function(filenameElement) {
  filenameElement.addEventListener('change', function(event) {
    const parent = filenameElement.parentNode;
    if (parent) {
      const filename = filenameElement.value.replace(/.*(\/|\\)/, '');
      parent.setAttribute('data-text', filename);
  });
});

I didn't test this code, but it should be the same as your jquery.

Note: does not work in I.E. 6-7, 8 and Firefox 2-3. This is because of the usage of querySelectorAll and forEach array function. It's simple to replace forEach. querySelectorAll can probably be replaced by getElementsByTagName with some extra effort.

[gaffling]

@craigmc08 the size hint is so right. Thanks for this!