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

Category: Form , Javascript | November 5, 2018
Author: pb03
Views Total: 2,851
Official Page: Go to website
Last Update: November 5, 2018
License: MIT

Preview:

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

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'
});

You Might Be Interested In:


Leave a Reply