Styling input type file element having single or multiple file selection functionality

Styling input type file element having single or multiple file selection functionality

5 min. read

HTML markup

<div id="file_input">
    <input type="file" id="file_button">
    <label for="file_button" id="file_button_label"><i class="fas fa-folder-open"></i>Select file(s)</label>
    <div id="multiple_file" class=""><i class="fas fa-clone"></i></div>
</div>

The HTML markup is self explanatory. There is div#file_input element which covers the whole file input button application, #file_button input type file button and a label for it label#file_button_label element. Finally there is div#multiple_file element through which multiple file selection will be enabled or disabled using JavaScript.

CSS rules

For font icons like folder icon FontAwesome icons are used. <i class="fas fa-folder-open"></i> will generate a folder icon in the HTML. Click here to know more about FontAwesome icons.

Some basic css rules to make body element cover the whole viewport vertically and removing its default 8px margin.

html, body
{
    height: 100%;
}

body
{
    margin: 0;
}

Styling the cover element for input type file application i.e. div#file_input element.

#file_input
{
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    width: 178px;
    font-family: Arial;
    margin: 0 auto;
    transform: translateY(-50%);
    cursor: pointer;
}

In the HTML code we have created a label (#file_button_label) for the input type file element so clicking on label element is same as clicking on input type file element itself. Clicking on label element will also open the file selection dialog box so there is no need to show file input button on webpage we can hide it.

#file_button
{
    display: none;
}

Styling the label element

#file_button_label
{
    display: block;
    color: #fff;
    font-size: 17px;
    line-height: 1;
    text-align: center;
    padding: 10px;
    margin-right: 36px;
    background-color: #F44336;
    border-radius: 3px 0 0 3px;
    cursor: pointer;
}

#file_button_label i
{
    margin-right: 8px;
}

Styling the multiple file selection toggler div element i.e div#multiple_file element. We will write multiple file selection functionality using JavaScript very shortly.

#multiple_file
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 16px;
    padding: 10px;
    border-radius: 0 3px 3px 0;
    background-color: #ebeff1;
}

#multiple_file i
{
    display: block;
    color: #a7b9c4;
    font-size: 16px;
}

See the result in the fiddle below:

Creating custom CSS tooltip for file selection. The tooltip will tell the user which functionality can be triggered when they click on div#multiple_file element.

Functionalities are:

  1. Single file selection
  2. Multiple file selection
#multiple_file:before
{
    content: 'Click for multiple file selection';
    position: absolute;
    top: -40px;
    right: 0;
    font-size: 12px;
    color: #fff;
    padding: 8px 10px;
    background-color: #000;
    white-space: pre;
    border-radius: 2px;
}

#multiple_file:after
{
    content: '';
    position: absolute;
    top: -11px;
    right: 6px;
    border: 6px solid transparent;
    border-width: 6px 6px 0 6px;
    border-top-color: #000;
    transform: translateX(-50%);
}

#multiple_file:before, #multiple_file:after
{
    display: none;
}

#multiple_file:hover:before, #multiple_file:hover:after
{
    display: block;
}

Initially the tooltip will be hidden and will be made visible only when the user hovers over the multiple file selection toggle button (div##multiple_file element).

Below image shows how the tooltip will look like:

Input type file element with tooltip

Changing the tooltip content.

This works with combination of JavaScript. When there will be click on div#multiple_file element JavaScript will add or remove active class on this element and according to the class on this element tooltip content is changed.

#multiple_file.active:before
{
    content: 'Click for single file selection';
}

#multiple_file.active i
{
    color: #f44336;
}

If there is active class on div#multiple_file element that means multiple file selection is enabled and user can select multiple files.

JavaScript

var file_button = document.querySelector('#file_button');
var multiple_file_button = document.querySelector('#multiple_file');

function toggleMultipleFileSelection()
{
    file_button.value = '';

    if( multiple_file_button.classList.contains('active') )
    {
        multiple_file_button.className = '';
        file_button.removeAttribute('multiple');
    }
    else
    {
        multiple_file_button.className += 'active';
        file_button.setAttribute('multiple',true);
    }
}

multiple_file_button.addEventListener('click',toggleMultipleFileSelection,false);

Expanation of above JavaScript code:

  1. We are declaring and initializing two variables which are pointing to the input type file and multiple file selection(div#multiple_file) elements respectively in the HTML markup.
  2. A function named toggleMultipleFileSelection is defined. It will be invoked when user clicks on div#multiple_file element.
  3. We are listening for click event on the div#multiple_file element and for that an addEventListener is added to it and the function toggleMultipleFileSelection is attached to the addEventListener.

Working of toggleMultipleFileSelection function:

  1. Clear the selected files from input type file element, if there are selected files then they will be removed.
  2. Check if the div#multiple_file_button element has active class or not:
    1. If yes, that means multiple file selection functionality is active so to deactivate it remove active class from div#multiple_file_button and remove the multiple attribute from div#file_button element i.e. input type file element.
    2. If no, then activate the multiple file selection functionality by adding active class to div#multiple_file_button element and setting the multiple attribute to true on div#file_button element i.e. input type file element.

Fiddle below shows final application:

Write comments