adding file into uploaded list of upload

[Ramazan]

Hello, I've made html editor and uploading it's content to the server then adding as file into the upload control's uploaded list.

All good when adding files into list, removing is good too but, when i upload another text via html editor (after removing uploaded files from upload control's list), deleted files coming back to the list.

Steps to reproduce problem: upload a text via html editor -> delete uploaded file -> upload another text with html editor

I'm using the following javascript to insert file into the upload control.

     document.getElementById("btnUploadText").addEventListener('click', function () {
            var file1 = document.getElementById("file1").ej2_instances[0];
            //console.log(file1.inputElement.innerText);
            var instance = document.getElementById("UploadFiles").ej2_instances[0];
            $.ajax({
              type: "POST",
              url: '@Url.Action("UploadText", "Home")',
              data: { text: file1.inputElement.innerHTML },
              success: function(data){
                  //console.log(data); // returns: {"name":"upload_1","size":75,"type":".txt"}
                  instance.files.push(data);
                  instance.refresh();
                  file1.inputElement.innerHTML = "";
                  },
            });
        });

Attachment: SyncfusionWebApplication4_c10deb4.zip

[Ponmani Murugaiyan]

Hi Ramazan, 

Thanks for contacting Syncfusion support. 

The files property has maintaining the previously loaded files, so we suggest you to slice the deleting file from the files property as like below code snippet. 

function onFileRemove(args) 

{ 

  var name = args.filesData[0].name.split(".")[0]; 

  var files = document.getElementById("UploadFiles").ej2_instances[0].files; 

  for (var i = 0; i < files.length; i++) { 

    if (files[i].name == name) { 

      files = files.slice(i+1, 1); 

      document.getElementById("UploadFiles").ej2_instances[0].files = files; 

    } 

  } 

  args.postRawFile = false; 

 } 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionWebApplication42113415656 

Regards, 

Ponmani M 

[Ramazan]

Hi Ramazan, 

Thanks for contacting Syncfusion support. 

The files property has maintaining the previously loaded files, so we suggest you to slice the deleting file from the files property as like below code snippet. 

function onFileRemove(args) 

{ 

  var name = args.filesData[0].name.split(".")[0]; 

  var files = document.getElementById("UploadFiles").ej2_instances[0].files; 

  for (var i = 0; i < files.length; i++) { 

    if (files[i].name == name) { 

      files = files.slice(i+1, 1); 

      document.getElementById("UploadFiles").ej2_instances[0].files = files; 

    } 

  } 

  args.postRawFile = false; 

 } 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionWebApplication42113415656 

Regards, 

Ponmani M 

Hello Ponmani thanks for answer,

I've tried that sample code you have given. It removes correct but also uploader's list brokens. got a short video about that.

Also I've tried "splice" function by referring your sample code. It failed too

Or maybe upload function is brokes the list.

success: function(data){
                 
                  instance.files.push(data);
                  instance.refresh();
                  file1.inputElement.innerHTML = "";
                  },

after this code, could be problem begins

Attachment: bandicam_20210615_143205683_50db395e.zip

[Ponmani Murugaiyan]

Hi Ramazan, 

We have resolved the reported issue in the below attached sample. Please modify the code snippet as like below. 

function onFileRemove(args) 

{ 

  var name = args.filesData[0].name.split(".")[0]; 

  var files = document.getElementById("UploadFiles").ej2_instances[0].files; 

  for (var i = 0; i < files.length; i++) { 

    if (files[i].name == name) { 

      files = files.splice(i, 1); 

    } 

  } 

  args.postRawFile = false; 

} 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionWebApplication4-2088801569 

Regards, 

Ponmani M 

[Ramazan]

Thank you Ponmani. It works great. have a nice day!

[Ponmani Murugaiyan]

Hi Ramazan, 

Welcome. Please get back us if you need further assistance. 

Regards, 

Ponmani M