Card List

Render each file as a styled card with thumbnail, name, size, and progress bar.

What you should see: each file rendered as your own card with thumbnail, name, size and its own bar. The built-in queue is not used at all — the cards are built from the onSelect, onProgress and onComplete callbacks.

var uploader = CoreUpload.create('#cardlist-uploader', {
 uploadUrl: '/api/upload/upload',
 multiple: true,
 autoUpload: true,
 onFileAdded: function(file) {
 addCard(file);
 },
 onTaskProgress: function(file, percent) {
 updateCardProgress(file.name, percent);
 },
 onTaskComplete: function(file) {
 markCardComplete(file.name);
 },
 onTaskError: function(file, error) {
 markCardError(file.name, error);
 }
});

Rendering the queue as cards

The callbacks give you the events; where you render them is your choice. Cards suit a layout where each file needs more than a row — a thumbnail, metadata, an action or two — and they reflow better on narrow screens than a table does.

Keep the failure visible

Whatever the layout, a card that failed must be distinguishable from one that uploaded, and it needs a retry the user can reach. That is the part of the built-in queue most easily lost when replacing it.