Easy Custom File Input With JavaScript And CSS – Input-file.js

Preview:

Description:

Input-file.js is a super lightweight JavaScript plugin which replaces the native file input with your own CSS styles. Supports drag’n’drop and multi file selection.

How to use it:

Insert the required JavaScript and CSS files into the html file.

<link rel="stylesheet" href="input-file.css">
<script src="input-file.min.js"></script>

Insert file input fields into your html form.

<form>
  <input type="file" name="files" multiple>
  <br><br>
  <input type="file" name="files" multiple>
</form>

Initialize the Input-file.js and done.

new InputFile({
    // options
});

Change the label for the file select button.

new InputFile({
    buttonText: 'Choose files'
});

Customize the help text.

new InputFile({
    hint: 'or drag and drop files here'
});

Set the message to show after selection.

new InputFile({
    message: 'files chosen'
});