how to delete a selected file from multiple input file from a button click

Question

In my application, I have one input file which lists the selected files below it. each selected file has a button to remove, I need to remove that specific file when clicking the button. but I find it hard, I could remove a single file but when it comes to multiple files it's hard for me to delete. please someone help me with this. thank you.

input field:

<div class="form-group mb-3">
                    <div class="custom-file">
                        <input
                            type="file"
                            class="custom-file-input"
                            id="referenceLetters"
                            name="referenceLetters[]"
                            aria-describedby="inputGroupFileAddon01"
                            onchange="updateReferenceList()"
                            multiple="multiple"
                            accept=".doc,.docx,.pdf"
                        />
                        <label class="custom-file-label" for="referenceLetters">Choose file</label>
                    </div>
                </div>
                <div id="selectedRefereceLetters">
                </div>

by this function listing the selected files:

function updateReferenceList() {
        var ref_input = document.getElementById('referenceLetters');
        var ref_output = document.getElementById('selectedRefereceLetters');
        var ref_children = "";
        for (var i = 0; i < ref_input.files.length; ++i) {
            ref_children += '<ul class="mb-2 file-preview">' +
                                    '<li class="d-flex align-items-center pb-2">'+
                                        '<button id="deleteRef" style="background: transparent; border: none !important; font-size:0;"><i class="ri-close-line mr-2"></i></button>'+
                                        '<i class="ri-file-text-line mr-2 text-gray-400 text-5xl"></i>'+
                                        '<div class="file">'+
                                            '<h4>'+ref_input.files.item(i).name+'</h4>'+
                                        '</div>'+
                                    '</li>'+
                                '</ul>';
        }

        ref_output.innerHTML = ref_children;

        $('#referenceLetters').closest('.form-group').removeClass('has-error');
        $('#referenceLetters-error').remove();
    }

when the user clicks the button with id deleteRef I need that specific file to be removed. how can I achieve this?

using the below method I could remove the selected single file which is not a multiple file input

$("body").on("click","#deletecv",function(){ 
        $("#cv").val('');
        updateCVList();
        return false;
    });

I guess a method to change filelist object to an array and remove the items from the array, but still, I don't know to implement it.

Maybe [this](https://stackoverflow.com/q/3144419/863110) can help — Mosh Feu, Feb 07 '21 at 13:57
thank you, I checked this but didn't help, can you provide me an example please? — anonymous, Feb 07 '21 at 14:04

score 0 · Answer 1 · answered Feb 07 '21 at 16:11

0

I think you can do something like this but i wasnt try it :) :

create array of deletedFiles with javascript
when button click add file name to the array
then send array with ajax to server
and if file['name'] is in deletedFiles array continue.

answered Feb 07 '21 at 16:11

houssein ahmed

37
5

thank you very much for your answer, but I need to remove it before uploading – anonymous Feb 07 '21 at 16:17
you upload it with javascript or serverver-side languages? – houssein ahmed Feb 07 '21 at 16:27
actually, upload is working but need to add remove function for selected files – anonymous Feb 07 '21 at 16:38
as i know you cant do this without uploading files temporary to server then after filtring them save nedeed files permanetly in server – houssein ahmed Feb 07 '21 at 18:00

score 0 · Accepted Answer · answered Feb 08 '21 at 04:26

I could solve this issue by using the data transfer object in javascript and below is the method.

function updateReferenceList() {
        var ref_input = document.getElementById('referenceLetters');
        var ref_output = document.getElementById('selectedRefereceLetters');
        var ref_children = "";
        for (var i = 0; i < ref_input.files.length; ++i) {
            ref_children += '<div id="ref'+i+'"><ul class="mb-2 file-preview" >' +
                                    '<li class="d-flex align-items-center pb-2">'+
                                        '<button onclick="delRef('+i+')" class="deleteRef" style="background: transparent; border: none !important; font-size:0;"><i class="ri-close-line mr-2"></i></button>'+
                                        '<i class="ri-file-text-line mr-2 text-gray-400 text-5xl"></i>'+
                                        '<div class="file">'+
                                            '<h4>'+ref_input.files.item(i).name+'</h4>'+
                                        '</div>'+
                                    '</li>'+
                                '</ul></div>';
        }

        ref_output.innerHTML = ref_children;

        $('#referenceLetters').closest('.form-group').removeClass('has-error');
        $('#referenceLetters-error').remove();
    }

function delRef(index) {
        var dt = new DataTransfer()
        var input = document.getElementById('referenceLetters')
        var { files } = input
        for (var i = 0; i < files.length; i++) {
            var file = files[i]
            if (index !== i) dt.items.add(file) 
            input.files = dt.files
        }
        updateReferenceList();
    }

how to delete a selected file from multiple input file from a button click

2 Answers2