Delete function in html upload form

Question

I have simple upload form like this:

            <form method="post" action="" enctype="multipart/form-data">
                <table border="0">
                    <tr>
                        <td>Select XML to upload:</td>
                        <td><input type="file" name="fileUpload" id="files" size="50" multiple/></td>
                    </tr>
                    <div id="selectedFiles"></div>
                    <tr>
                        <td colspan="1" align="center"><input type="submit" value="Upload" /></td>
                    </tr>
                </table>
            </form>


    <script>
        var selDiv = "";

        document.addEventListener("DOMContentLoaded", init, false);

        function init() {
            document.querySelector('#files').addEventListener('change', handleFileSelect, false);
            selDiv = document.querySelector("#selectedFiles");
        }

        function handleFileSelect(e) {
            console.dir(e);

            if (!e.target.files)
                return;

            selDiv.innerHTML = "";

            var files = e.target.files;
            for (var i = 0; i < files.length; i++) {
                var f = files[i];

                selDiv.innerHTML += f.name + "<button id='" + f.name + "'>  Delete: " + f.name + "</button><br/>";

            }

        }
    </script>

Form is able to show all data in actual select. I want implement delete function on my button selDiv.innerHTML += f.name + "<button id='" + f.name + "'> Delete: " + f.name + "</button><br/>";.

The problem is that I don't know how to do it.

Can you help me?

Can somebody show me some code?

I think, best way is use some onclick event on my button. But how to delete one item from select list?

Are you trying to remove a `File` object from `FileList` object? — guest271314, Aug 01 '16 at 20:00

score 0 · Answer 1 · edited May 23 '17 at 10:28

0

It is not possible to delete a File object from read-only FileList object. You can add File objects to FormData object using .append(), then use .delete() to remove item from FormData() object by referencing the key in FormData; e.g.,

var data = new FormData();
for (var i = 0; i < files.length; i++) {
  data.append("file-" + i, files[i], files[i].name);
};
data.delete("file-0"); // delete `"file-0"` of `data`

then POST the FormData object to server.

You can alternatively add File objects to an Array and use .splice() to remove the item from the array, see input file to array javascript/jquery

edited May 23 '17 at 10:28

Community

1
1

answered Aug 01 '16 at 20:06

guest271314

1
15
104
177

And how can I push variable `data` to my input form? – Aug 01 '16 at 20:19
@hosledeh You can use `XMLHttpRequest` to `POST` `FormData` object to server – guest271314 Aug 01 '16 at 20:20
But I don't want to send data after remove one item. Just, I want update my input form. – Aug 01 '16 at 20:21
It is not possible to set the `File` or `FileList` of `` element using `javascript` as `files` property of `` element is read-only. Instead of posting actual `
`, post `FormData` object which can include same data as included in `
`, see http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously
– guest271314 Aug 01 '16 at 20:23

Delete function in html upload form

1 Answers1

Linked