danielm / uploader

A lightweight and very configurable jQuery plugin for file uploading using ajax(a sync); includes support for queues, progress tracking and drag and drop.
https://danielmg.org/demo/java-script/uploader
MIT License
1.17k stars 384 forks source link

Reset queue #54

Open pavanray opened 7 years ago

pavanray commented 7 years ago

Hi, I have a scenario like, I will choose the files and maxFile limit is 4. I am giving the delete icon to delete uploaded file. Now consider I have uploaded 2 images so now remaining count is 2. And if I delete 1 then remaining count should be 3.

But I couldn't reset the queue back. Can you please help me with this.

Thanks in advance.

Viren0007 commented 7 years ago

Same issue I am also facing. Any help guys ?

debasispanda commented 7 years ago

Hey, can you make some example in plunker or jsfiddle? It would be easy to get the issue correctly.

danielatwhitegrid commented 6 years ago

Hi there, I needed a way to reset a queue and I did it like this:

This line shows the current queue. $('#drop-area').data('dmUploader').queue;

You can create a new Array, fill it with the wanted items and just override the queue with the following line:

$('#drop-area').data('dmUploader').queue = newArray;

I hope this helps you. :)

7aadhi commented 6 years ago

The array become empty but the progress line and image is not changing

danielatwhitegrid commented 6 years ago

The array become empty but the progress line and image is not changing

Could you explain your problem a bit more?

SapientHetero commented 6 years ago

I call this function to reset the queue to its original state when a button is clicked:

<button id='qClearButton' class='qClearButton' onclick=clearQ() disabled>Clear Queue</button>

function clearQ() { // clear any files currently in queue $('.media').remove(); // add 'No files uploaded' $('#fileQ ul').append('<li class=\"text-muted text-center empty\">No files uploaded.'); // Disable "Clear Queue" button until files have been uploaded $("#qClearButton").prop("disabled", true); }

The button is initially disabled. I enable it when the upload of a queue of files completes:

DmUploader.prototype.processQueue = function() { this.queuePos++;

if (this.queuePos >= this.queue.length) {
  if (this.activeFiles === 0) {
    this.settings.onComplete.call(this.element);
    // When finished, enable "Clear Queue" button
    $("#qClearButton").prop("disabled",false);
  } ... <remainder of function omitted; it's the original code from github>

The function called on the button click disables the button again, and it stays that way until more files are uploaded.

This approach has the benefit of preventing the user from clicking the button and clearing the queue while upload(s) are in progress.

It does NOT, however, reset the queue.length setting. Any thoughts about how this can be done?

SapientHetero commented 6 years ago

Found a solution.

function clearQ() {
    // clear any files currently in queue
    $('.media').remove();
    // restore 'No files uploaded' message in user-visible file queue
    $('#files').find('li.empty').fadeIn(); 
    // disable "Clear Queue" button until more files have been uploaded
    $("#qClearButton").prop("disabled", true);
    // get reference to dmUploader plugin in order to access queue-related variables
    var myUploader = $('#drag-and-drop-zone').dmUploader().data();
    myUploader.queue = [];
    myUploader.queuePos = -1;
    myUploader.activeFiles = 0;
}