0


================Edit=====================================================
Hello! Thanks so much for everyone who answered and tried to help me. I was able to get what I needed by using iframe as suggested by @Kaiido since my previous code doesn't work in ie8. Thanks to this as well: JQuery file posting using iframe Again. Thanks so much!

=======================================================================
I have an upload form. I am able to upload the file on submission. The problem is I am trying to add/append a delete button once the user chooses a file to upload.

I need it to look like this:
Here is how I need it to look like

Goals:
1. When user clicks on Delete button, the filelist should go back to empty.
2. Changing the file should behave like clicking on the Delete button.
3. It needs to work in IE 8. It sucks.

Input Form:

Attachment: <input type="file" name="upload" id="upload">
<a href="#" id="btnSubmit">Submit</a>

JS: 

var files;

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

function prepareUpload(event)
{   
    files = event.target.files;  // I'm not sure but the problem might be on this part. Maybe I could get the opposite of this or negate this?
}

function uploadFiles(event)
{
    event.stopPropagation(); 
    event.preventDefault();

    var data = new FormData();

    $.each(files, function(key, value)
    {
        data.append(key, value);
    });

    $.ajax({
        url: 'execs/upload.php?files',
        type: 'POST',
        data: data,
        cache: false,
        dataType: 'json',
        processData: false, 
        contentType: false, 
        success: function(data)
        {
            console.log('Uploaded');
        },
        error: function()
        {
            console.log('Failed');
        }
    })
}

$("#btnSubmit").click(function(e)
{
    uploadFiles(event);
})


Thank you so much for your help!

Mary
  • 169
  • 1
  • 4
  • 13
  • Hi @DJDavid98! I did use the solution there, however, it only clears the field. The filelist is not empty. – Mary Aug 24 '15 at 07:26
  • @Mary, the `input.value=''` solution should work, simply avoid making your filelist a global variable. The prepareUpload function has no use, you just have to check the input's `files` when doing the upload. Or alternatively, your delete function should just delete the global `file` variable – Kaiido Aug 24 '15 at 07:43
  • Hi @Kaiido! I tried assigning an empty to value. I checked the value of files[0] and it's still not empty. thanks! – Mary Aug 24 '15 at 08:12
  • The one from the ``? On which browser did you tried it ? – Kaiido Aug 24 '15 at 08:16
  • yes. I need to make it work in ie8. thanks! – Mary Aug 24 '15 at 08:29
  • Wow! IE8 oO You can forget about FormData then (IE10+) and you go back to some iframe or oh god! I don't know... I prepared [a fiddle](http://jsfiddle.net/fj3q8c1k/) for you to check but IE8... seriously, I give up! Maybe the best solution is to generate a link to an up to date browser. – Kaiido Aug 24 '15 at 08:34
  • thanks for your help! yah! I know how you feel. it really sucks. But that's part of the requirement, to make it work in ie8.. – Mary Aug 24 '15 at 08:43
  • Even `input.files` won't work in IE8, so you will have to change a lot your code for it to work there. Also, the only solution for clearing its value is to replace the element with a clone as proposed in the [dupe](http://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery) – Kaiido Aug 24 '15 at 09:02
  • Looks like that's the only option now. I will have to start all over again. Thanks @Kaiido! – Mary Aug 24 '15 at 09:07

2 Answers2

1

You need to reset your upload control like this

$(document).ready(function() {
  de();

  $("#fileU").on("change", function() {



    if ($("#fileU").val() != "") {
      $("input[type=button]").attr("style", "display:block");
    } else {
      de();
    }
  });
  $("input[type=button]").click(function() {
    $("#fileU").val('');
    de();
  })

})

function de() {
  $("input[type=button]").attr("style", "display:none");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="fileU" multiple/>
<input type="button" value="delete FIle" />

When you select a file, and you want to remove it, you just need to assign '' to your value of upload control.

user786
  • 3,902
  • 4
  • 40
  • 72
  • "For jquery solution see ..." So why your solution? I mean, it's not vanilla either – Kaiido Aug 24 '15 at 07:40
  • still not vanilla so why the mix in the first snippet ? – Kaiido Aug 24 '15 at 07:44
  • what's wrong with mix. I also given jquery. Do you want me to give you just jquery or just javascript solution? – user786 Aug 24 '15 at 07:46
  • Well I see no mention of only vanilla request in OP but why would you mix your jQuery with `document.getElement` ? Apart from making it a different solution than the now deleted one you just copied? – Kaiido Aug 24 '15 at 07:48
  • 1
    Hi @Alex! Thanks! I will try this too. – Mary Aug 24 '15 at 08:03
0

I've made a fiddle & now working,check this. Hope this helps. I've modified the js as below(commented). By the way, I don't see the Delete button.

var files;
$('#btnSubmit').hide(); // ADDED

$('input[type=file]').change(function(){ // MODIFIED
    if(this.value!=''){ 
        prepareUpload();
    }else $('#btnSubmit').hide();
});

function prepareUpload(event)
{   
    $('#btnSubmit').show(); 
    files = event.target.files;
}

function uploadFiles(event)
{
    event.stopPropagation(); 
    event.preventDefault();

    var data = new FormData();

    $.each(files, function(key, value)
    {
        data.append(key, value);
    });

    $.ajax({
        url: 'execs/upload.php?files',
        type: 'POST',
        data: data,
        cache: false,
        dataType: 'json',
        processData: false, 
        contentType: false, 
        success: function(data)
        {
            console.log('Uploaded');
        },
        error: function()
        {
            console.log('Failed');
        }
    })
}

$("#btnSubmit").click(function(e)
{
    uploadFiles(event);
})
HeiN
  • 503
  • 3
  • 17