BrianCas
BrianCas

Reputation: 789

jQuery - reset change event

I'm using Input file, so when I upload an Image and then remove it, I can't upload the same image again, only another different

addimg:

obj2.on('change', function(e){
    e.stopPropagation();
    e.preventDefault();
    $(this).css('border',"4px dotted #bdc3c7");
    var objid = $(this).parents('.drop').attr("id");
    var files = e.target.files;
    var file = files[0];
    if (files && files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $("#" + objid).find(".addCont").css('visibility', 'hidden');
            $("#" + objid).css('background-image', 'url(' + e.target.result + ')');
            $("#" + objid).find('.imgmenucontainer').css('visibility', 'visible'); 
        }
    reader.readAsDataURL(files[0]);
    }
});

remove:

$(".custombtnremove").click(function(){
    var objid = $(this).parents('.drop').attr('id');
    $("#" + objid).css('background-image', '');
    $("#" + objid).find('.imgmenucontainer').css('visibility', 'hidden');
    $("#" + objid).find(".addCont").css('visibility', 'visible');
});

So I assume It has to be something with the change event

Upvotes: 2

Views: 3494

Answers (2)

Marek Woźniak
Marek Woźniak

Reputation: 1776

did you try that case?:

1. upload file A
2. remove file A
3. upload file B
4. remove file B
5. upload file A

if that works fine, you have to add in your remove event:

$(obj2).val("");

The cause is you don't change data to comparison with previous the same data...well event change is not fired. Solution: after delete - set data to empty and all should works fine. In your change event you can add an additional condition for "" val.

Upvotes: 1

kockburn
kockburn

Reputation: 17616

Empty your input file after you remove an image.

$(".custombtnremove").click(function(){
    //previous code here
    //reset input file
    $(obj2).val(""); //-> or obj2.val(""); if obj2 is already a jquery object.
});

Upvotes: 2

Related Questions