Draggable File Upload Component With jQuery - aksFileUpload.js

aksFileUpload.js is a jQuery plugin to help create a nice-looking, drag-and-drop file upload zone that provides an easy to select, preview, and upload files to your server.

Features:

• Single & Multiple file upload.
• File preview before uploading.
• AJAX file upload.
• Validates file size and file type before uploading.

How to use it:

1. To get started, import jQuery library and the aksFileUpload.js plugin's files into the HTML document.

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

2. Add the <aks-file-upload> component to the page.

<aks-file-upload></aks-file-upload>

3. Initialize the plugin to create a default file upload zone.

$(function () {
  $("aks-file-upload").aksFileUpload({
    // options here
  });
});

4. Enable an element to save the data (JSON or Input) of files to be uploaded.

<p id="uploadfile" type="json"></p>

$("aks-file-upload").aksFileUpload({
  fileUpload: "#uploadfile"
});

// or an input filed
$("aks-file-upload").aksFileUpload({
  fileUpload: "#uploadInput"
});

5. Customize the ID for the hidden file input field generated by the plugin.

$(function () {
  $("aks-file-upload").aksFileUpload({
    input: "#aksfileupload"
  });
});

6. Determine the accepted file types for uploads.

$("aks-file-upload").aksFileUpload({
  fileType: [
    "pdf",
    "docx",
    "rtf",
    "jpg",
    "jpeg",
    "png",
    "txt",
    "mpa",
    "ogg",
    "aif",
    "cda",
    "mid",
    "midi",
    "mp3",
    "wav",
    "wma",
    "wpl",
    "7z",
    "arj",
    "deb",
    "pkg",
    "rar",
    "rpm",
    "tar.gz",
    "z",
    "zip",
    "csv",
    "dat",
    "db",
    "dbf",
    "log",
    "mdb",
    "sav",
    "sql",
    "tar",
    "xml",
    "apk",
    "exe",
    "jar",
    "py",
    "fnt",
    "fon",
    "otf",
    "ttf",
    "ai",
    "bmp",
    "gif",
    "ico",
    "jpeg",
    "jpg",
    "png",
    "ps",
    "psd",
    "svg",
    "tif",
    "tiff",
    "asp",
    "aspx",
    "css",
    "htm",
    "html",
    "js",
    "jsp",
    "php",
    "rss",
    "pps",
    "ppt",
    "pptx",
    "avi",
    "flv",
    "mov",
    "mp4",
    "mpg",
    "mpeg",
    "vob",
    "wmv",
    "doc",
    "rtf",
    "eps",
    "opus",
    "aep",
    "fig",
    "sketch"
  ]
});

7. Determine whether to allow multiple files. Default: false.

$(function () {
  $("aks-file-upload").aksFileUpload({
    multiple: true
  });
});

8. Determine whether to add files via drag and drop. Default: true.

$(function () {
  $("aks-file-upload").aksFileUpload({
    dragDrop: true
  });
});

9. Specify the maximum number of files allowed to upload. Default: unlimited.

$(function () {
  $("aks-file-upload").aksFileUpload({
    maxFile: 10
  });
});

10. Specify the maximum number of files allowed to upload. Default: 9999999999999999999.

$(function () {
  $("aks-file-upload").aksFileUpload({
    maxFile: 10
  });
});

11. Specify the maximum file size. Default: empty.

$(function () {
  $("aks-file-upload").aksFileUpload({
    maxSize: "1 GB"
  });
});

12. Enable AJAX file upload. Default: false.

$("aks-file-upload").aksFileUpload({
  ajaxUpload: false,
  ajax: {
    directlyLoad: false,
    url: "upload.php",
    type: "POST",
    data: "formData",
    contentType: false,
    processData: false,
    cache: false,
    async: true,
    enctype: "multipart/form-data"
  },
});

13. Customize the label for the file upload zone.

$(function () {
  $("aks-file-upload").aksFileUpload({
    label: "Drag & Drop your files or Browse"
  });
});

14. Customize the feedback messages.

$("aks-file-upload").aksFileUpload({
  maxFileError: "File exceeds upload limit. - Max limit:",
  maxSizeError: "File exceeds size. - Max limit:",
  fileTypeError: "Disallowed file format.",
});

---

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