dynamically delete the attachment?

Question

I have a form that upload a file..

<form enctype="multipart/form-data" name="" action="" method="POST">
<input type="file" name="file[]" id="files" multiple />
<div id="selectedFiles"></div>
<form>

And a javascript function to display the name and size.

<script>
    var selDiv = "";

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

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

    function handleFileSelect(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 += "<span class='attach'>" + f.name + " <" + f.size + " bytes>" + "</span>";

        }

    }
    </script>

is their anyone know how to make a delete function on the attachment??

example:

the image shows the uploaded file.. and the red "x" is the delete... can anyone please help me with this? using javascript..

To delete the file on the server you would need some server-side script, i.e. php. The best you could do with javascript is to remove it from the list. — Tro, Sep 04 '15 at 15:30
@Tro - sir, how it could be removed from the list using javascript?? — Bee, Sep 04 '15 at 15:34
Take a look at jQuery (https://jquery.com/), plenty of ways to remove an element from the page. — Tro, Sep 04 '15 at 15:37
@Tro yes, but jQuery isn't going to delete it from the list of files scheduled to be upldated by the file upload input. — dmeglio, Sep 04 '15 at 15:39
Basically you can not remove it from the file list. There are work arounds using File APi reading file, and uploading it differently... — epascarello, Sep 04 '15 at 15:40
Wait, you want that when you click on the X, it'd display `1 file selected`? — klenium, Sep 04 '15 at 15:42
possible duplicate of [How to remove one specific selected file from input file control](http://stackoverflow.com/questions/19060378/how-to-remove-one-specific-selected-file-from-input-file-control) — klenium, Sep 04 '15 at 15:47
You should hide the file input, then you don't have to bother with the defuault text, the user won't see the "1-2 files selected". Add a custom ` — klenium, Sep 04 '15 at 15:51

klenium · Answer 1 · 2015-09-06T14:24:51.423

See comments below.

<form action="some.php" method="post" id="form">
    <input type="file" id="file" multiple style="display: none;" />
    <button type="button" id="button">Select files</button>
    <div id="selectedFiles"></div>
    <button type="submit" id="submit">Upload</button>
<form>

var selDiv = document.querySelector("#selectedFiles");
document.querySelector("#button").addEventListener("click", function() {
    document.querySelector("#file").click();
}, false);
document.querySelector("#file").addEventListener("change", function() {
    var files = this.files;
    for (var i = 0; i < files.length; ++i) {
        var file = files[i],
            span = document.createElement("span");
        span.className = "attach";
        span.innerHTML = file.name+" <"+file.size+" bytes>";
        span.file = file;
        var remove = document.createElement("span");
        remove.innerHTML = "Remove";
        span.appendChild(remove);
        selDiv.appendChild(span);
        remove.addEventListener("click", function() {
            this.parentNode.removeChild(this);
        }, false);
    }
}, false);
document.querySelector("#form").addEventListener("submit", function(e) {
    var files = selDiv.querySelectorAll("span.attach"),
        data = new FormData(),
        xmlhttp = new XMLHttpRequest();
    for (var i = 0; i < files.length; ++i) {
        data.append("file[]", files[i].file);
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            selDiv.innerHTML = "Uploading completed!";
        }
    }
    xmlhttp.open("POST", "upload.php", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send(data);
    return false;
}, false);

dynamically delete the attachment?

1 Answers1