Convinient File Preview Before Uploading - jQuery Fily

Fily is a small jQuery plugin that provides a user-friendly way to manage, preview, and verify files before uploading.

Once you select files from your device, the plugin automatically generates a file preview area below the original file input field. This area lists all the selected files with their basic information including names, sizes, and thumbnails.

Fily currently supports previews for .png, .jpg, .jpeg, .jfif, .webp, .svg, .mp3, .pdf, and .mp4 files. For unsupported formats, it displays an icon based on the file extension.

A simple click on any thumbnail lets you to expand and view images and videos in fullscreen, open PDFs in a new tab, or play audio files directly. This can reduce errors by allowing users to verify their selections visually before submission.

How to use it:

1. Include the required jQuery library and Bootstrap's stylesheet within your document.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>

2. Download the Fily plugin and include its CSS and JavaScript files.

<link rel="stylesheet" href="css/jquery.fily.css" />
<script src="js/jquery.fily.js"></script>

3. Fily automatically initializes itself on all file inputs found in your document. You can also manually initialize it by calling the fily() function on specific file inputs:

$(document).ready(function() {
  if( $("input[type='file']").length ) {
    $("input[type='file']").each(function() {
      $(this).fily();
    });
  }
});

---

This awesome jQuery plugin is developed by web-stair. For more Advanced Usages, please check the demo page or visit the official website.