How to add confirm dialog to remove files in Vue Uploader

03 Sep 20267 minutes to read

You can customize the Uploader component to use a confirm dialog before removing the files. In the following example, the ej2 Dialog is used as a confirm dialog for making a confirmation on removing the files by using the remove method.

Composition API (~/src/App.vue)

<template>
  <div>
    <ejs-uploader ref="uploadObj" id='defaultfileupload' :removing="onremove" name="UploadFiles"
      :asyncSettings="path"></ejs-uploader>
    <div id="dlgContainer">
      <ejs-dialog ref="dialogObj" :buttons="dlgButtons" :target="dlgContainer" :visible="false" :width='width'
        :content='dialogContent'>
      </ejs-dialog>
    </div>
  </div>
</template>
<script setup>

import { UploaderComponent as EjsUploader } from '@syncfusion/ej2-vue-inputs';
import { DialogComponent as EjsDialog } from '@syncfusion/ej2-vue-popups';
import { ref } from 'vue';

let removeFile = [];
const dialogObj = ref(null);
const uploadObj = ref(null);
const dlgContainer = "#dlgContainer";
const path = {
  saveUrl: 'https://services.syncfusion.com/vue/production/api/FileUploader/Save',
  removeUrl: 'https://services.syncfusion.com/vue/production/api/FileUploader/Remove'
};
const dialogContent = 'Confirm to remove the file?';
const width = '250px';

const onremove = (args) => {
  removeFile = [];
  args.cancel = true;
  removeFile.push(args.filesData);
  dialogObj.value.ej2Instances.show();
};
const dlgButtonClick = () => {
  dialogObj.value.ej2Instances.hide();
  uploadObj.value.ej2Instances.remove(removeFile[0], false, true);
  removeFile = [];
};
const cancelClick = () => {
  dialogObj.value.ej2Instances.hide()
};
const dlgButtons = [{ click: dlgButtonClick, buttonModel: { content: 'OK', isPrimary: true } },
{ click: cancelClick, buttonModel: { content: 'Cancel' } }];

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

#container {
  visibility: hidden;
  padding-left: 5%;
  width: 100%;
}

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

#dlgContainer {
  min-height: 350px;
  width: 100%;
}
</style>

Options API (~/src/App.vue)

<template>
  <div>
    <ejs-uploader ref="uploadObj" id='defaultfileupload' :removing="onremove" name="UploadFiles"
      :asyncSettings="path"></ejs-uploader>
    <div id="dlgContainer">
      <ejs-dialog ref="dialogObj" :buttons="dlgButtons" :target="dlgContainer" :visible="false" :width='width'
        :content='dialogContent'>
      </ejs-dialog>
    </div>
  </div>
</template>
<script>
import { UploaderComponent } from '@syncfusion/ej2-vue-inputs';
import { DialogComponent } from '@syncfusion/ej2-vue-popups';

export default {
  name: "App",
  components: {
    "ejs-uploader": UploaderComponent,
    "ejs-dialog": DialogComponent
  },
  data: function () {
    return {
      dlgContainer: "#dlgContainer",
      path: {
        saveUrl: 'https://services.syncfusion.com/vue/production/api/FileUploader/Save',
        removeUrl: 'https://services.syncfusion.com/vue/production/api/FileUploader/Remove'
      },
      allowedExtensions: 'image/*',
      dialogContent: 'Confirm to remove the file?',
      width: '250px',
      removeFile: [],
      dlgButtons: [{ click: this.dlgButtonClick, buttonModel: { content: 'OK', isPrimary: true } },
      { click: this.cancelClick, buttonModel: { content: 'Cancel' } }]
    }
  },
  methods: {
    onremove: function (args) {
      this.removeFile = [];
      args.cancel = true;
      this.removeFile.push(args.filesData);
      this.$refs.dialogObj.show();
    },
    dlgButtonClick: function () {
      this.$refs.dialogObj.hide();
      this.$refs.uploadObj.remove(this.removeFile[0], false, true);
      this.removeFile = [];
    },
    cancelClick: function () {
      this.$refs.dialogObj.hide()
    }
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

#container {
  visibility: hidden;
  padding-left: 5%;
  width: 100%;
}

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

#dlgContainer {
  min-height: 350px;
  width: 100%;
}</style>

You can also explore Vue File Upload feature tour page for its groundbreaking features. You can also explore our Vue File Upload example to understand how to browse the files which you want to upload to the server.