Illustration for Resumable.js Methods API reference

Methods

Resumable.js instance methods: upload(), pause(), cancel(), addFile(), removeFile(), getSize(), and more.

API·Updated 2025-11-12

Methods

Resumable.js exposes methods on two levels: the main Resumable instance (managing the overall upload queue) and individual ResumableFile objects (controlling per-file behavior). Knowing which methods live where — and when to call them — is the difference between a clean integration and a tangled mess of race conditions. This reference documents every method with its signature, behavior, and usage context. For the full API surface, see the API hub.

Resumable Instance Methods

upload()

r.upload();

Starts or resumes uploading all queued files. If uploads were paused, calling upload() picks up from the exact chunk where it stopped — not from the beginning. Safe to call multiple times; it's a no-op if uploads are already in progress.

pause()

r.pause();

Pauses all active uploads. In-flight chunk requests complete, but no new chunks are sent. The upload can be resumed later with upload(). This does not cancel or remove any files from the queue.

cancel()

r.cancel();

Aborts all uploads and removes all files from the queue. In-flight XHRs are aborted. This is a hard stop — there's no undo. Use this for "cancel all" buttons or component teardown. If you only want to cancel a specific file, use the file-level cancel() instead.

progress()

var pct = r.progress(); // Returns 0 to 1

Returns overall upload progress as a float between 0 and 1, calculated across all files in the queue. Multiply by 100 for a percentage. This value updates as chunk acknowledgments arrive.

isUploading()

if (r.isUploading()) {
  console.log('Uploads in progress');
}

Returns true if any file in the queue is currently uploading. Useful for guarding against duplicate upload() calls or warning users before they navigate away.

addFile(file)

// file is a native File object from an <input> or drag event
r.addFile(file);

Manually adds a File object to the upload queue. Triggers the fileAdded event. This is the programmatic alternative to assignBrowse() — useful when you receive files from a third-party file picker, clipboard paste, or any source outside of Resumable.js's built-in handlers.

removeFile(resumableFile)

r.removeFile(resumableFile);

Removes a ResumableFile from the queue. If the file is currently uploading, its in-flight chunks are aborted. The file will not appear in the files array after removal.

getFromUniqueIdentifier(uniqueIdentifier)

var file = r.getFromUniqueIdentifier('12345-myfile.zip');

Retrieves a ResumableFile by its unique identifier string. Returns false if no matching file exists in the queue. Handy for reconciling server-side records with client-side state — for example, marking a file as complete after a server callback.

getSize()

var totalBytes = r.getSize(); // Total bytes across all queued files

Returns the combined size in bytes of all files currently in the queue. Useful for displaying "3 files, 142 MB total" summaries.

assignBrowse(domNode, isDirectory)

r.assignBrowse(document.getElementById('upload-btn'));

// For folder uploads (where supported):
r.assignBrowse(document.getElementById('folder-btn'), true);

Binds a DOM element as a file browse trigger. Clicking the element opens the native file picker. Pass true as the second argument to enable directory selection (uses webkitdirectory attribute). Multiple elements can be assigned — each triggers the same file picker.

assignDrop(domNode)

r.assignDrop(document.getElementById('dropzone'));

Registers a DOM element as a drop target. Files dragged onto this element are added to the queue. Internally binds dragover, dragenter, dragleave, and drop events. Call on as many elements as you need — they all feed into the same Resumable instance.

unAssignDrop(domNode)

r.unAssignDrop(document.getElementById('dropzone'));

Removes drag-and-drop event listeners from a previously assigned element. Use this when dynamically removing drop zones from the DOM to prevent memory leaks from orphaned listeners.

support (Property)

if (!r.support) {
  alert('Your browser does not support chunked uploads.');
}

A boolean property (not a method) that indicates whether the browser supports the File API features Resumable.js requires: File, Blob, and Blob.prototype.slice. Check this before binding any UI elements. All modern browsers return true; you'll only see false in very old environments.

files (Property)

r.files.forEach(function (file) {
  console.log(file.fileName, file.progress());
});

An array of ResumableFile objects currently in the queue. Iterate over this to build file list UIs, calculate stats, or find specific files by property.


ResumableFile Methods

Each file added to the queue becomes a ResumableFile instance. These methods control individual file behavior.

file.abort()

file.abort();

Aborts the upload of this specific file. In-flight chunk requests are cancelled. The file remains in the queue with its current progress — calling file.retry() or r.upload() later will resume it.

file.cancel()

file.cancel();

Cancels the upload and removes the file from the queue entirely. After calling this, the file is gone — it won't appear in r.files and cannot be retried. Use abort() if you want to stop temporarily without removing.

file.retry()

file.retry();

Restarts the upload for this file from the first incomplete chunk. Useful in fileError handlers where you want to give the user a per-file retry button:

r.on('fileError', function (file, message) {
  var btn = document.createElement('button');
  btn.textContent = 'Retry ' + file.fileName;
  btn.onclick = function () { file.retry(); };
  document.getElementById('errors').appendChild(btn);
});

file.progress()

var filePct = file.progress(); // 0 to 1

Returns upload progress for this specific file as a float between 0 and 1. Based on the number of completed chunks relative to total chunks.

file.isUploading()

if (file.isUploading()) {
  console.log(file.fileName + ' is active');
}

Returns true if chunks for this file are currently being transferred.

file.isComplete()

if (file.isComplete()) {
  console.log(file.fileName + ' finished');
}

Returns true if all chunks for this file have been successfully uploaded. Once complete, calling upload() again won't re-upload this file.

Useful ResumableFile Properties

PropertyTypeDescription
file.fileNamestringOriginal file name.
file.relativePathstringRelative path (relevant for directory uploads).
file.sizenumberFile size in bytes.
file.uniqueIdentifierstringThe identifier used for chunk tracking.
file.chunksarrayArray of ResumableChunk objects.
file.fileFileReference to the native browser File object.

Common Patterns

Pause/Resume toggle:

document.getElementById('toggle-btn').addEventListener('click', function () {
  if (r.isUploading()) {
    r.pause();
    this.textContent = 'Resume';
  } else {
    r.upload();
    this.textContent = 'Pause';
  }
});

Remove a specific file by identifier:

function removeByIdentifier(id) {
  var file = r.getFromUniqueIdentifier(id);
  if (file) r.removeFile(file);
}

Guard navigation during active uploads:

window.addEventListener('beforeunload', function (e) {
  if (r.isUploading()) {
    e.preventDefault();
    e.returnValue = '';
  }
});

The method API is intentionally small. Most complexity lives in configuration and events — the methods are just the levers you pull to drive the upload lifecycle forward.