How can i remove files before sending them to the server?

Question

I want to send multiple files in attachment. I can choose multiple files as attachment but when I want to delete any attached file then I can't do that and when I upload new attachment then only new attached file send in mail not the other file which I attached first time. How can I update and delete the attachments?

<div>
    <div class="col-sm-8">
        <div class="fileupload fileupload-exists upload-btn" data-provides="fileupload">
            <input type="hidden" value="" name="">
            <span class="btn btn-file btn-light-grey">
            <i class="fa fa-folder-open-o"></i> 
            <span class="fileupload-exists">Select file(s)</span>
            <input type="file"  name="task_files[]" class="file_handler file_index myFile"  data-id="1" onchange="dostuff(this);" multiple="multiple">
            </span>
        </div>
    </div>
    <input type="hidden" name="unsetKeys" class="unsetKeys">
</div>

script

var unset_indexes = [];
function dostuff(input) {
    var output = '';
    var validOutput = '<br />Valid Files:<br />';
    var validFiles = [];
    var obj = $(input);
    id = obj.attr('data-id');
    for(var i = 0; i < input.files.length; i++) {
        var ext = (input.files[i].name).split('.').pop();

        validFiles.push(input.files[i]);
        validOutput += input.files[i].name;
        output += "<div class='row'><div class='col-sm-9 file_index_"+i+"'>"+input.files[i].name+ "</div><div class='col-sm-3'><a data-id="+id+" class='removefile btn btn-xs btn-danger' file-index='"+i+"'>X</a></div></div>";
    }
    //output += validOutput;
    $('#outputfiles').append(output);
    //document.getElementById('output_'+id).innerHTML = output;
}

$(document).on('click','.removefile',function(){
    id = $(this).attr('data-id');
    var fileObj = $(".file_index_"+id);
    console.log(fileObj);
    unset_indexes.push({"id":id, "val":$(this).attr('file-index')});
    var needToRemoveIndex = fileObj[0]['files'][$(this).attr('file-index')];
    console.log(needToRemoveIndex);
    console.log(unset_indexes);
    unsetKeys = JSON.stringify(unset_indexes);
    $('.unsetKeys').val(unsetKeys);
    delete needToRemoveIndex;
    $(this).parent().parent().slideUp('slow', function(){$(this).remove();});
});

Do you want to remove the files before you upload them to the server? — Endless

Endless Endless · Accepted Answer · 2016-03-02T08:53:30

It seems to me that you want to do it all on client side, hence nothing to do with php...

So here is my solution

<div>
    <div class="col-sm-8">
        <div class="fileupload fileupload-exists upload-btn" data-provides="fileupload">
            <input type="hidden" value="" name="">
            <span class="btn btn-file btn-light-grey">
            <i class="fa fa-folder-open-o"></i>
            <span class="fileupload-exists">Select file(s)</span>
            <input type="file"  name="task_files[]" class="file_handler file_index myFile" multiple="multiple">
            </span>
        </div>
    </div>
    <input type="hidden" name="unsetKeys" class="unsetKeys">
</div>

script

var files

function listFiles(evt) {
    var $tpl = $("<div class='row'><div class='col-sm-9 name'></div><div class='col-sm-3'><a class='removefile btn btn-xs btn-danger'>X</a></div></div>")
    var rows = []
    files = Array.from(this.files) // (Note: es5 support)

    for(var i = 0; i < files.length; i++) {
        var row = $tpl.clone()
        var file = files[i]

        // we bind the file instead of the index
        // cuz it's a more reliable way of finding
        // the file that we should remove in files[]
        // (if files array ever get tamperd with)
        row.find('.removefile').data('file', file)
        row.find('.name').text(file.name)
        rows.push(row)
    }

    $('#outputfiles').append(output)
}

$('input[type=file]').on('change', listFiles)

$('#outputfiles').on('click', '.removefile', function(){
    var file = $(this).data('file')

    var i = files.indexOf(file)
    if(i != -1) {
        files.splice(i, 1)
    }

    $(this).parent().parent().slideUp('slow', function(){$(this).remove()})
})

// We need to upload the files manualy
// since we can not modify input.files
$('#upload').on('click', function(){
    var fd = new FormData

    for (var i = 0; i < files.length; i++) {
        fd.append('task_files[]', files[i])
    }

    $.ajax({
        url: 'http://example.com/script.php',
        data: fd,
        processData: false,
        contentType: false,
        type: 'POST'
    })
})

How can i remove files before sending them to the server?

1 Answers