Remove File Confirm Dialog not working

[Stephan Schrade]

Hi Support,

I'm trying to add a confirm dialog to the uploader control.

This is described at your documentation here

https://ej2.syncfusion.com/javascript/documentation/uploader/how-to/add-confirm-dialog-to-remove-the-files/

but it does not work.

The confirm dialog does not even appear.

On my server the dialog appears, but the file is not removed if I click "OK".

The url to the backend (which is defined in asyncSettings) is not called.

If I remove the code of the confirm dialog, the url is called and the file is deleted. So my backend is working.

Second error:

Also if I upload a file via drag and drop, two upload rows appear inside the control in your example.

The same thing happens on my server.

There should be only one.

If I upload the file via the button, everything works good. Only one row does appear.

Please help.

Regards, 

Stephan

[Sureshkumar P]

Hi Stephan, 

 

Greetings from Syncfusion support. 

 

Based on your shared information, we have checked the attached documentation sample. We have modified the sample and now we can remove the file. Please check the sample changed code example here 

[index.js] 

 

function onremove(args) { 

  removeFile=[]; 

  args.cancel = true; 

  removeFile.push(args.filesData); 

  dialog.show(); 

} 

 

// Initialize Dialog component 

var dialog = new ej.popups.Dialog({ 

    content: 'Confirm to remove the file?', 

    buttons: [{'click': () => { onClick() }, buttonModel: { content: 'OK', cssClass: 'e-flat'}}, 

        {'click': () => {dialog.hide(); }, buttonModel: { content: 'Cancel', cssClass: 'e-flat'} }], 

    width: '250px', 

    visible: false, 

    target: '#container' 

}); 

dialog.appendTo('#dialog'); 

 

function onClick() { 

  dialog.hide(); 

  var uploadObj = document.getElementById('fileupload').ej2_instances[0]; 

  uploadObj.remove(removeFile[0], false, true); 

  removeFile=[]; 

} 

 

 

Please check the modifies sample here: https://stackblitz.com/edit/gjzvr7-5blpe4?file=index.js  

 

Regards, 

Sureshkumar P 

[Stephan Schrade]

Many thanks for your quick reply.

The dialog now works, but I can't send any csrf token with the request.

Right now I have added the token like this:

// Initialize the control by preload files

var uploadObj = new ej.inputs.Uploader({

asyncSettings: {

saveUrl: '<?=Url::base(false)?>/file/filesave',

removeUrl: '<?=Url::base(false)?>/file/fileremove',

},

multiple: true,

files: <?= $filesJS ?>,

uploading: onFileUpload,

removing: onFileRemove,

dropArea: dropElement

});

uploadObj.appendTo('#fileupload');

function onFileRemove(args) {

args.customFormData = [{'<?= Yii::$app->request->csrfParam; ?>' : '<?= Yii::$app->request->csrfToken; ?>'}];

removeFile = [];

args.cancel = true;

removeFile.push(args.filesData);

dialog.show();

}

function onFileUpload(args) {

// add addition data as key-value pair.

args.customFormData = [

{'<?= Yii::$app->request->csrfParam; ?>' : '<?= Yii::$app->request->csrfToken; ?>'},

{'filefolderid' : <?= $filefolderid ?>},

];

}

Without using the confirm dialog, the csrf token works very well.

By the way this is a common problem with all your javascript components.

Modern backend frameworks do very often need a csrf token to fight attacks against hackers.

This should be a built-in feature in every component, where you can set a special property of the component and then the csrf token is added to all the requests sent to the backend automatically.

Regards,

Stephan

[Sureshkumar P]

Hi Stephan, 

 

Based on your shared information, we suspect that you want to add the additional data to protect the uploaded file. We suggest you refer the below documentation to know more about adding additional data to the selected files from the uploader component. 

 

Documentation: https://ej2.syncfusion.com/javascript/documentation/uploader/how-to/add-additional-data-on-upload/  

 

Regards, 

Sureshkumar P 

[Stephan Schrade]

Hi support,

I'm sorry but if you look at the code snippet I had attached, you can see that I already add the necessary parameters exactly the way you describe in your documentation

There is no problem to add the additional parameter to the file during upload. This works without any problem.

The problem is, that I can't add an additional parameter to the "remove file" request.

Without the confirm dialog I can add the additional parameter.

But when I add the confirm dialog to my program, the additional parameter is not sent.

Regards,

Stephan

[Sureshkumar P]

Hi Stephan, 

 

Thanks for your update. 

 

When we load the dialog for confirming, we have stop the removing event flow through args.cancel as true. so, the normal removing event functionalities are stops here. That is the reason the additional parameter are not present when we use the confirm dialogue in our sample.  

 

Regards, 

Sureshkumar P 

[Stephan Schrade]

Hi support,

this is a pity.

Perhaps you can consider to expand the data manger in a way that the user can add additional parameters to whatever requests.

With only one upgrade you can improve all the data driven components and make a lot of people happy which do need the feature to add additional parameters.

Many backends do need extra parameters like csrf-tokens or user-ids or .....

Regards,

Stephan 

[Sureshkumar P]

Hi Stephan, 

 

Thanks for your patience. 

 

We have modified the sample based on your requirements. Please find the sample below. 

 

Sample link: https://stackblitz.com/edit/gjzvr7-o2eebr?file=index.js  

 

Regards, 

Sureshkumar P 

[Stephan Schrade]

Hi Sureshkumar,

many thanks for the code.

This works now :-)

Regards,

Stephan

[Sureshkumar P]

Hi Stephan, 

 

Thanks for your update. Please get back to us if you need any further assistance on this.  

 

Regards, 

Sureshkumar P