Deleting images preloaded from the server does not work.

[hwanideveloper]

Hello! Deleting images after uploading works fine. However, deleting images preloaded from the server does not work. Is there a way?

<template>
    <div>
        <VueFileAgent
            ref="vueFileAgent"
            :theme="'tile'"
            :uploadUrl="uploadUrl"
            :multiple="true"
            :deletable="true"
            :meta="true"
            :accept="'image/*,.zip'"
            :maxSize="'10MB'"
            :maxFiles="14"
            :helpText="'select image'"
            :errorText="{
                type: 'Invalid file type. Only images or zip Allowed',
                size: 'Files should not exceed 10MB in size',
            }"
            @select="filesSelected($event)"
            @beforedelete="onBeforeDelete($event)"
            @delete="fileDeleted($event)"
            v-model="fileRecords"
        >
            <template v-slot:file-preview-new>
                <div key="new" class="file-preview-wrapper grid-box-item grid-block file-preview-new">
                    <span class="file-preview"
                        ><span
                            style="position: absolute; top: 50%; height: 100px; 
              margin-top: -30px; right: 0px; bottom: 0px; left: 0px;"
                        >
                            <v-icon large color="orange darken-2" align>
                                mdi-arrow-up-bold-box-outline
                            </v-icon>
                            <span class="help-text">select file</span>
                        </span></span
                    >
                </div>
            </template>
        </VueFileAgent>
        <div class="mt-5">fileRecords : {{ getfileRecords }}</div>
        <div class="mt-5">fileRecordsForUpload : {{ getFileRecordsForUpload }}</div>
    </div>
</template>

<script>
import VueFileAgentPlugin from 'vue-file-agent';
// import VueFileAgentStyles from 'vue-file-agent/dist/vue-file-agent.css';
export default {
    data: function() {
        return {
            fileRecords: [
                {
                    name: 'HouseSparrow.jpg',
                    fileName: '4f9e7457-73c6-4f4c-bd9a-47bae2cbca8d.jpg',
                    filePath: '/product/uplaod/image/2020/12/14/4f9e7457-73c6-4f4c-bd9a-47bae2cbca8d.jpg',
                    url:
                        'http://localhost:3000/api/product/displayFile?fileName=/product/uplaod/image/2020/12/14/4f9e7457-73c6-4f4c-bd9a-47bae2cbca8d.jpg',
                    lastModified: 1583992794341,
                    sizeText: '14 KB',
                    size: 14403,
                    type: 'image/jpeg',
                    ext: 'jpg',
                },
            ],
            uploadUrl: 'http://localhost:3000/api/product/img',
            uploadHeaders: { 'X-Test-Header': 'vue-file-agent' },
            fileRecordsForUpload: [], // maintain an upload queue
        };
    },
    components: {
        VueFileAgent: VueFileAgentPlugin.VueFileAgent,
    },
    computed: {
        getfileRecords() {
            return this.fileRecords;
        },
        getFileRecordsForUpload() {
            return this.fileRecordsForUpload;
        },
    },
    methods: {
        uploadFiles: function() {
            // Using the default uploader. You may use another uploader instead.
            this.$refs.vueFileAgent.upload(this.uploadUrl, this.uploadHeaders, this.fileRecordsForUpload);
            this.fileRecordsForUpload = [];
        },
        deleteUploadedFile: function(fileRecord) {
            // Using the default uploader. You may use another uploader instead.

            this.$refs.vueFileAgent.deleteUpload(this.uploadUrl, this.uploadHeaders, fileRecord);
        },
        filesSelected: function(fileRecordsNewlySelected) {
            var validFileRecords = fileRecordsNewlySelected.filter(fileRecord => !fileRecord.error);
            this.fileRecordsForUpload = this.fileRecordsForUpload.concat(validFileRecords);
        },
        onBeforeDelete: function(fileRecord) {
            var i = this.fileRecordsForUpload.indexOf(fileRecord);
            if (i !== -1) {
                this.fileRecordsForUpload.splice(i, 1);
                var k = this.fileRecords.indexOf(fileRecord);
                if (k !== -1) this.fileRecords.splice(k, 1);
            } else {
                if (confirm('Are you sure you want to delete?')) {
                    this.$refs.vueFileAgent.deleteFileRecord(fileRecord); // will trigger 'delete' event
                }
            }
        },
        fileDeleted: function(fileRecord) {
            var i = this.fileRecordsForUpload.indexOf(fileRecord);
            if (i !== -1) {
                this.fileRecordsForUpload.splice(i, 1);
            } else {
                this.deleteUploadedFile(fileRecord);
            }
        },
    },
};
</script>

<style lang="scss">
@import '../scss/vue-file-agent.scss';
</style>

[fd6130]

Before that, try to put your code in markdown code style, refer this to learn markdown https://guides.github.com/features/mastering-markdown/

And, what's the error if you delete the image preloaded from the server?

[hwanideveloper]

sorry! I don't know Markdown well.

I don't know why files preloaded from the server are not deleted. However, I successfully defined the deletion url and deleted it using axios.

The source code is as follows.

    deleteUploadedFile: function (fileRecord) {
         // Using the default uploader. You may use another uploader instead.
         this.actionDeleteFile(fileRecord)
     },
    async actionDeleteFile(fileRecord) {
        const fineInfo = {
            fileName : fileRecord.savedFileName,
            filePath : fileRecord.filePath
        }
       await deleteFilePost(fineInfo)
  },

[safrazik]

You need to set uploadData. Please see this issue: #57 for explanation

[hwanideveloper]

Thank you. It works with uploadData.

deleteUploadedFile: function(fileRecord){
                let uploadUrl = this.uploadUrl + '/' + fileRecord.name();

                let uploadData = { someFileId: ‘someId’ };

this.$refs.documentsRef.deleteUpload(uploadUrl, this.uploadHeaders, fileRecord, uploadData);