Configurable File Input / Upload Enhancement Plugin - ezfile.js

ezfile.js is a lightweight jQuery plugin used to enhance the native file input for your uploader that features custom styles, icons and allows to limit the size/extension/aspect-ratio of an file you want to upload to the server. Compatible with Bootstrap form styles.

How to use it:

1. Include the following JS files on the webpage and the ezfile.js plugin is ready for use.

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="jquery.babypaunch.ezfile.js"></script>

2. Create a placeholder element for the file input:

<div id="demo"></div>

3. Call the function on the DIV element and specify the name value of the file input.

$("#demo").ezfile({
  name: "myName"
});

5. Validate the size, file type and aspect ratio of your file.

$("#demo").ezfile({
  ext: ["gif", "jpg", "jpeg", "png"], 
  size: [900, 300],
  ratio: [8, 2],
  byte: "10mb"
});

6. Customize the styles & icons.

style: {
  icon: "style='display: none; background: gray; color: white; padding: 3px; margin-right: 5px;'", 
  file: "style='float: right; border: 0; background: gray; color: white; padding: 0 2px;'", 
  "delete": "style='display: none; float: right; border: 0; background: gray; color: white; padding: 0 2px;'"
}, 
icon: {
  pdf: "red",
  ppt: "maroon",
  pptx: "maroon",
  csv: "limegreen",
  xls: "limegreen",
  xlsx: "limegreen",
  doc: "dodgerblue",
  docx: "dodgerblue",
  "7z": "black",
  zip: "black",
  jar: "black",
  tar: "black",
  tgz: "black",
  alz: "black",
  html: "skyblue",
  htm: "skyblue",
  png: "orange",
  gif: "orange",
  jpg: "orange",
  jpeg: "orange",
  bmp: "orange"
}

7. Specify how many files allowed to upload.

$("#demo").ezfile({
  limit: 0 
});

---

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