Refresh dropzone area after remove file - call a 'refresh function'

[izabellamatos]

Expected behavior

Hi!

I have a classic report which union a database table and dropzone collection. So, when I add a file in dropzone, this report is refreshed with it. But I'd like to find a way to refresh dropzone area after removing file from my 'trash icon'. I can remove it from collection, but I can't find a way to refresh this area. Is there any way or any function for that? I read the code, but couldn't find a way.

Thanks!

PS.: in this picture, I added a file, and it's on my report, when I click on trash icon, dropzone collection will remove it, but dropzone area won't refresh and this file will be like 'ghost'.

PS 2.: this is my global function:

function removerArquivo(id, origem){
        var get = new htmldb_Get(null,$v('pFlowId'),'APPLICATION_PROCESS=RemoverArquivo',$v('pFlowStepId'));
        get.addParam('x01',id);
                get.addParam('x02',origem);
        retorno = get.get();

        if(retorno == "sucesso"){
                //Do something to refresh dropzone area!
        }
        else{ alert("Error"); }
}

Actual behavior

Dropzone area isn't refreshed.

Steps to reproduce the issue

APEX version (4.2.6 / 5.0.3)

Application Express 5.1.1.00.08

Used web server / version and platform (ORDS 3.0.3 / Tomcat 7 / Apache 2.4 / Linux x64)

--

Used web browser / version and platform (Chrome 48 Mac / Firefox 44 Windows)

Google Chrome 61

[Dani3lSun]

Hi @izabellamatos the dropzone region doesn´t support refreshing itself. Dropzone is more an file uploader than an file explorer that shows the files already saved...So it´s more an snapshot of the files currently uploaded... Thus your collection / or table can be very huge (1000+ files), how should dropzone show this after refresh?!

But you can use some kind of javascript function to remove particular files:

function removeDropzoneFile(pStaticRegionid, pFileId) {
  // get dropzone element + object
  var dropzoneElement = $('div#' + pStaticRegionid + '_dropzone').get(0);
  var myDropzone = dropzoneElement.dropzone;
  // get all files inside of dropzone region
  var fileArray = myDropzone.getAcceptedFiles();
  // find specific file using file ID
  jQuery.grep(fileArray, function(e) {
    if (e.id == pFileId) {
      // remove file with dropzone function
      try {
        myDropzone.removeFile(e);
      } catch (err) {
        // if error --> remove only DOM element with jQuery
        $(e.previewElement).remove();
      }
    }
  });
};

Give your dropzone region a static id, this would be the first parameter, the second parameter "pFileId" is either the SEQ_ID of APEX collection or the PK value of your custom table...

Hope this helps! ;)

[izabellamatos]

Hi @Dani3lSun ,

Thanks for reply! I think I didn't explain it so good. But, I'm not trying to make my dropzone load files from my table, I'm trying to refresh dropzone area after delete a file in dropzone collection, loaded in my classic report, like when we click in remove file link in dropzone area. It's an update of list of uploaded files. I tried this code, but it didn't work. I don't know why I had problems with var myDropzone = dropzoneElement.dropzone; It doesn't recognize .dropzone. =/ Thanks for your help and time. I'll figure out another way to deal with this situation with my client.

=] Regards!

[Dani3lSun]

Hi @izabellamatos

I think I understood you, but that´s exactly the thing, after refresh showing only the icons from a collection. Let´s say you uploaded 5 file, on the second try (reload the page) you upload another 3, so in the collection are 8 files, but the dropzone region shows only the 3 from last upload, what should a refresh display if you delete a file from the collection? :)

The Javascript Code works here on different environments from APEX 5.0.4 to 5.1.3...Maybe you have forgotten to give your Dropzone region a static id?

Then the Function call would look like this (for file with ID: 1):

removeDropzoneFile('UPLOAD_FILES', 1);

[izabellamatos]

@Dani3lSun

Thanks for the help! I tried it again and it worked! I can't explain what had happened. Sorry for my delay!

=]

Regards!

[heno-dave]

I realize this is a closed issue from a few years ago, but I modified the suggested code to run in a FOR loop based on the file array length and remove 1 or many with a single call.

`` // orig call / function removeDropzoneFile('UPLOAD_FILES', 1); // only gets the first file uploaded, ignores the others if they exist

function removeDropzoneFile(pStaticRegionid, pFileId) { // get dropzone element + object var dropzoneElement = $('div#' + pStaticRegionid + '_dropzone').get(0); var myDropzone = dropzoneElement.dropzone; // get all files inside of dropzone region var fileArray = myDropzone.getAcceptedFiles(); // find specific file using file ID jQuery.grep(fileArray, function(e) { if (e.id == pFileId) { // remove file with dropzone function try { myDropzone.removeFile(e); } catch (err) { // if error --> remove only DOM element with jQuery $(e.previewElement).remove(); } } }); };

// revised call / function to remove multiple files at once // - takes single parameter of REGION STATIC ID // - 2nd parameter (pFileId) is set within function, being the "fileArray" length // - jQuery.grep call is shoved into a for loop based on the fileArray.length.

removeDropzoneFile('UPLOAD_FILES');

function removeDropzoneFile(pStaticRegionid) { var pFileId; // get dropzone element + object var dropzoneElement = $('div#' + pStaticRegionid + '_dropzone').get(0); var myDropzone = dropzoneElement.dropzone; // get all files inside of dropzone region var fileArray = myDropzone.getAcceptedFiles();

for (pFileId=0; pFileId < fileArray.length + 1; pFileId++) { // find specific file using file ID jQuery.grep(fileArray, function(e) { if (e.id == pFileId) { // remove file with dropzone function try { myDropzone.removeFile(e); } catch (err) { // if error --> remove only DOM element with jQuery $(e.previewElement).remove(); } } });
}
};``

[jeffreykemp]

FWIW this is the function I've used to clear out a dropzone:

function removeDropzoneFiles(pStaticRegionid) {
  apex.debug("removeDropzoneFiles",pStaticRegionid);
  var dropzoneElement = $('div#' + pStaticRegionid + '_dropzone').get(0)
     ,fileArray = dropzoneElement.dropzone.getAcceptedFiles();
  apex.debug("fileArray count",fileArray.length);
  fileArray.forEach(function(e) {
    apex.debug("removeFile",e.id,e.name);
    try {
      dropzoneElement.dropzone.removeFile(e);
    } catch(err) {
      $(e.previewElement).remove();
    }
  });
};