adding file into uploaded list of upload

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

5 Replies 1 reply marked as answer

PM Ponmani Murugaiyan Syncfusion Team June 14, 2021 03:07 PM UTC

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; 
 } 


Regards, 
Ponmani M 



RA Ramazan replied to Ponmani Murugaiyan June 15, 2021 12:10 PM UTC

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; 
 } 


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


PM Ponmani Murugaiyan Syncfusion Team June 16, 2021 01:52 PM UTC

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; 
} 


Regards, 
Ponmani M 


Marked as answer

RA Ramazan June 18, 2021 04:18 PM UTC

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


PM Ponmani Murugaiyan Syncfusion Team June 21, 2021 06:05 AM UTC

Hi Ramazan, 

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

Regards, 
Ponmani M 


Loader.
Up arrow icon