Flexible jQuery Based AJAX File Uploader - FileUp

FileUp is a lightweight, flexible, customizable file upload jQuery plugin that handles multiple file selection, drag-and-drop functionality, and real-time upload progress tracking. 

Features:

• Multiple File Selection: Select and queue multiple files simultaneously with built-in limit controls.
• Drag-and-Drop Interface: Create dropzones where users can drag files directly from their desktop.
• Upload Progress Tracking: Display real-time progress bars for each file during upload.
• File Validation: Enforce size limits, file type restrictions, and upload quantity constraints before sending to server.
• Preview Generation: Automatically generate image previews using FileReader API for visual feedback.
• Event System: Hook into select, upload, abort, and error events for custom behavior.
• Customizable Templates: Modify the HTML structure of file display elements to match your design system.
• Multi-Language Support: Built-in translations for English, Russian, Spanish, and Portuguese interfaces.
• No Server Dependencies: Works with any backend that accepts multipart/form-data file uploads.

How to use it:

1. Load the jQuery FileUp plugin's files in the webpage which has jQuery library loaded.

<!-- OPTIONAL BUT RECOMMENDED -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />

<!-- REQUIRED -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- jQuery FileUp Plugin -->
<link href="dist/fileup.min.css" rel="stylesheet">
<script src="dist/fileup.min.js"></script> 

2. Insert the file input into a file select button as this:

<button type="button" class="fileup-btn">
  Select file
  <input type="file" id="upload-demo">
</button>

3. Create a DIV container to display the upload status.

<div id="upload-demo-queue" class="queue"></div>

4. Initialize the plugin to generate a basic file uploader:

fileUp.create({
  url: 'upload.php',
  input: 'upload-demo',
  queue: 'upload-demo-queue',
  onSuccess: function(response, file_number, file) {
    // do something
  },
  onError: function(event, file, file_number) {
    // do something
  }
});

5. Restrict file types and enforce size limits:

<div class="btn btn-success fileup-btn">
  Select images
  <input type="file" id="image-upload" multiple accept="image/*">
</div>
<div id="image-queue"></div>

fileUp.create({
  url: '/api/upload',
  input: 'image-upload',
  queue: 'image-queue',
  autostart: true, // Upload immediately after selection
  filesLimit: 3, // Maximum 3 files can be selected
  sizeLimit: 1048576, // 1 MB maximum per file (in bytes)
  filesUploadLimit: 10 // Maximum 10 concurrent uploads
});

6. Create a drag'n'drop area for file dropping:

<input type="file" id="upload-drop" multiple style="display: none">
<div id="upload-drop-dropzone" class="fileup-dropzone p-4 d-inline-block 
   text-primary-emphasis fs-5 rounded-4 text-center">
  <i class="bi bi-folder2-open"></i> Drop your files here or click
  <div class="fs-6 mt-2">Maximum file size 50MB</div>
</div>
<div id="drop-queue"></div>

let fileUpDrop = fileUp.create({
  url: '/api/upload',
  input: 'upload-drop',
  queue: 'drop-queue',
  dropzone: 'upload-drop-dropzone'  // Element that accepts dropped files
});

// Use event emitter pattern for drag feedback
fileUpDrop.on('load_success', function(file, response) {
  alert('Upload success');
});

fileUpDrop.on('error', function(errorType, options) {
  alert('Upload error');
});

// Visual feedback during drag operations
fileUpDrop.on('dragEnter', function(event) {
  console.log('File entered dropzone');
});

fileUpDrop.on('dragLeave', function(event) {
  console.log('File left dropzone');
});

7. Override default HTML structure for file display. Template placeholders get replaced automatically:

• [NAME]: File name
• [SIZE]: Human-readable file size
• [TYPE]: CSS class based on file type
• [PREVIEW_SRC]: Preview image URL
• [UPLOAD], [REMOVE], [ABORT]: Localized button text

fileUp.create({
  url: '/api/upload',
  input: 'upload6',
  queue: 'upload6-queue',
  templateFile:
    '<div style="width:125px" class="fileup-file [TYPE] mb-2 p-1 d-flex flex-column gap-2 bg-light border border-secondary-subtle rounded rounded-1">' +
      '<div class="fileup-preview">' +
        '<img src="[PREVIEW_SRC]" alt="[NAME]" class="border rounded"/>' +
        '<i class="fileup-icon fs-4 text-secondary"></i>' +
      '</div>' +
      '<div class="flex-fill">' +
        '<div class="fileup-description">' +
          '<span class="fileup-name">[NAME]</span> ' +
          '<small class="fileup-size text-nowrap text-secondary">([SIZE])</small>' +
        '</div>' +
        '<div class="fileup-controls mt-1 d-flex gap-2">' +
          '<span class="fileup-remove" title="[REMOVE]">✕</span>' +
          '<span class="fileup-upload link-primary">[UPLOAD]</span>' +
          '<span class="fileup-abort link-primary" style="display:none">[ABORT]</span>' +
        '</div>' +
        '<div class="fileup-result"></div>' +
        '<div class="fileup-progress progress mt-2 mb-1">' +
          '<div class="fileup-progress-bar progress-bar"></div>' +
        '</div>' +
      '</div>' +
    '</div>'
});

8. Customize the behavior and appearance of the file upload plugin.

• id (string): A unique identifier for the instance. Defaults to a unique hash.
• url (string): The server address where files will be uploaded.
• input (HTMLElement|string): The identifier or object of the input[type=file] element.
• queue (HTMLElement|string): The identifier or object of the element where the file list will be rendered.
• dropzone (HTMLElement|string): The identifier or object of the element used as a drag-and-drop zone.
• fieldName (string): The name of the variable in the POST request containing the file. Defaults to file.
• files (array): An array of previously uploaded files to display on initialization.
• extraFields (object): Additional data fields (key-value pairs) to send with the upload request.
• showRemove (bool): Flag to display the "remove" button for files. Defaults to true.
• lang (string): The interface language code (e.g., 'en'). Defaults to en.
• langItems (object): A list of key phrases and translations. Use this to override existing translations or add new ones.
• sizeLimit (integer): The maximum allowed file size in bytes. Defaults to 0 (no limit).
• filesLimit (integer): Limits the number of files that can be selected at once. Defaults to 0 (no limit).
• filesUploadLimit (integer): Limits the number of simultaneous uploads. Defaults to 10.
• httpMethod (string): The HTTP method used for the upload request. Defaults to post.
• timeout (integer): The timeout limit for the upload request in milliseconds.
• autostart (boolean): If true, uploads begin automatically upon selection. Defaults to false.
• templateFile (string): The HTML template used to render file items in the queue.
• iconDefault (string): The CSS class for the default file icon. Defaults to bi bi-file-earmark-text.
• mimeTypes (object): A mapping of file types to icon classes. Supported types: archive, word, excel, video, audio, pdf, binary.
• onSelect (function|string): Callback triggered when a file is selected.
• onRemove (function|string): Callback triggered when a file is removed.
• onBeforeStart (function|string): Callback triggered before the upload starts.
• onStart (function|string): Callback triggered when the upload begins.
• onProgress (function|string): Callback triggered during upload progress.
• onAbort (function|string): Callback triggered when the upload is aborted.
• onSuccess (function|string): Callback triggered when the upload completes successfully.
• onError (function|string): Callback triggered when an error occurs.
• onDragEnter (function|string): Callback triggered when a file enters the dropzone.
• onDragOver (function|string): Callback triggered when a file hovers over the dropzone.
• onDragLeave (function|string): Callback triggered when a file leaves the dropzone.
• onDragEnd (function|string): Callback triggered when the drag operation ends.

fileUp.create({
  id: 'fileup-unique-id',
  url: '/path/to/upload',
  input: 'upload-input-id',
  queue: 'upload-queue-id',
  dropzone: 'upload-dropzone-id',
  fieldName: 'file',
  files: [],
  extraFields: {},
  showRemove: true,
  lang: 'en',
  langItems: {},
  sizeLimit: 0,
  filesLimit: 0,
  filesUploadLimit: 10,
  httpMethod: 'post',
  timeout: null,
  autostart: false,
  templateFile: null,
  iconDefault: 'bi bi-file-earmark-text',
  mimeTypes: {},
  onSelect: function(file) {},
  onRemove: function(file) {},
  onBeforeStart: function(file, xhr) {},
  onStart: function(file) {},
  onProgress: function(file, progressEvent) {},
  onAbort: function(file) {},
  onSuccess: function(file, response) {},
  onError: function(errorType, options) {},
  onDragEnter: function(event) {},
  onDragOver: function(event) {},
  onDragLeave: function(event) {},
  onDragEnd: function(event) {}
});

9. Event handlers:

// Triggered when a file is selected
instance.on('select', function(file) {
  console.log('File selected:', file);
});

// Triggered when a file is removed from the queue
instance.on('remove', function(file) {
  console.log('File removed:', file);
});

// Triggered immediately before the upload request starts
instance.on('load_before_start', function(file, xhr) {
  console.log('Upload initializing for:', file);
});

// Triggered when the upload actually begins
instance.on('load_start', function(file) {
  console.log('Upload started');
});

// Triggered periodically as the upload progresses
instance.on('load_progress', function(file, progressEvent) {
  console.log('Progress:', progressEvent);
});

// Triggered if the upload is aborted by the user
instance.on('load_abort', function(file) {
  console.log('Upload aborted');
});

// Triggered when the upload completes successfully
instance.on('load_success', function(file, response) {
  console.log('Server response:', response);
});

// Triggered when an error occurs (validation, network, etc.)
instance.on('error', function(errorType, options) {
  console.error('Error:', errorType, options);
});

// Triggered when the request finishes, regardless of success or failure
instance.on('load_finish', function(file) {
  console.log('Request finished');
});

// Triggered when a dragged file enters the dropzone
instance.on('drag_enter', function(event) {
  // Add highlighting class
});

// Triggered when a file is dragged over the dropzone
instance.on('drag_over', function(event) {
  // Prevent default browser behavior
});

// Triggered when a dragged file leaves the dropzone
instance.on('drag_leave', function(event) {
  // Remove highlighting class
});

// Triggered when the drag operation ends (drop or cancel)
instance.on('drag_end', function(event) {
  // Cleanup
});

10. API methods.

// Create a new FileUp instance
let instance = fileUp.create(options);

// Retrieve an existing instance by its ID
let existingInstance = fileUp.get('instanceId');

// Get the current configuration options
instance.getOptions();

// Get the unique ID of the instance
instance.getId();

// Get the jQuery object for the input element
instance.getInput();

// Get the jQuery object for the queue container
instance.getQueue();

// Get the jQuery object for the dropzone element
instance.getDropzone();

// Subscribe to an event
instance.on('eventName', callback, context);

// Subscribe to an event that triggers only once
instance.one('eventName', callback, context);

// Get the current language settings
instance.getLang();

// Get an object containing all file objects
instance.getFiles();

// Get a specific file object by its ID
instance.getFileById(fileId);

// Remove all files from the queue
instance.removeAll();

// Start uploading all files in the queue
instance.uploadAll();

// Cancel all active uploads
instance.abortAll();

How It Works:

FileUp works by wrapping a standard HTML file input. When a user selects files or drops them into the configured dropzone, the library intercepts the event. It then validates the files against your settings (size, type, count). If the files pass validation, the library generates a preview using the templateFile HTML string and appends it to the queue container.

For the upload process, FileUp uses XMLHttpRequest (XHR). It creates a FormData object, appends the file and any extraFields, and sends a POST request to your specified url. It attaches listeners to the XHR object to track progress, success, and errors. This updates the UI elements (like the progress bar) in real-time.

Alternatives:

• FilePond: A flexible, adapter-based library known for its polished UI and image editing capabilities.
• Best File Upload Libraries: 10 Best File Upload Libraries In jQuery And Vanilla JS

FAQs:

Q: Does FileUp require Bootstrap to work?
A: No, Bootstrap is not strictly required for functionality. However, the default templates use Bootstrap classes for styling. If you do not use Bootstrap, you will need to provide your own CSS or customize the templateFile option to match your design system.

Q: How do I handle the uploaded file on the server?
A: The library sends a standard HTTP POST request. On your server (PHP, Node.js, Python, etc.), you handle the incoming request just as you would a standard HTML form submission with enctype="multipart/form-data". Access the file using the key defined in fieldName (default is file).

Q: Can I customize the look of the file preview?
A: Yes. You can pass a custom HTML string to the templateFile option. The library uses placeholders like [NAME], [SIZE], and [PREVIEW_SRC] which it replaces with actual file data during rendering.

Q: Does it support folder uploads?
A: FileUp supports standard file selection. Folder uploading depends on the browser's support for the webkitdirectory attribute on the input element. If your input tag includes this attribute, the library will process the files within the selected folder.

Changelog:

2026-02-01

• Added filesUploadLimit
• Updaed DOC and Demos

2024-05-17

• Update

2024-05-16

• Changed drag event names

2024-04-03

• Add Turkish lang

2020-12-07

• Added a new method that allows you to add files to the queue.

2020-11-07

• added new events

2018-01-09

• allows to specify the file

---

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