Search results

Add Confirm Dialog to Remove the Files in JavaScript (ES5) Uploader control

14 Apr 2021 / 1 minute to read

You can customize the uploader component using confirm dialog before removing the files. Here, ej2 dialog is used as confirm dialog. Refer to the following example.

Source
Preview
index.js
index.html
index.css
Copied to clipboard
var removeFile = [];
// initialize Uploader component
var uploadObject = new ej.inputs.Uploader({
    asyncSettings: {
        saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save',
        removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove'
    },
    removing: onremove
});

// render initialized Uploader
uploadObject.appendTo('#fileupload');


function onremove(args) {
  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();
  uploadObject.remove(removeFile[0], false, true);
  removeFile=[];
}
Copied to clipboard
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Uploader</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 Uploader Component">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <input type="file" id="fileupload" name="UploadFiles">
        <div id="dialog"></div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Copied to clipboard
html,
body,    
#container {
    height: 100%;
    overflow: hidden;
    margin: auto 30px;
    padding: 20px 0;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}