CODEWITHSUNDEEP
javascriptjquery
DGT
DGT

Reputation: 2654

File upload and delete

I'm trying to upload a file, and have the name of the uploaded file displayed along with a "remove" link to remove the uploaded file (in order to uploaded another one). Here is what I've got so far. Everything works fine except that when I remove the uploaded file, and try to upload another one by clicking on "Choose file" button, the same file name pops up. How can I remove the file name from the memory (I guess), so button works like new, and also no file gets sent when the form is submitted WITHOUT the file name, but if the uploaded file ISN'T DELETED, it should be available for submit. Many thanks for your help in advance.

Upvotes: 1

Views: 4214

Answers (1)

keepwalking
keepwalking

Reputation: 2654

Add $this.val('') after you delete so you set the value off the input to empty.

SITE.fileInputs = function() {
    var $this = $(this),
        $val = $this.val(),
        valArray = $val.split('\\'),
        newVal = valArray[valArray.length - 1],
        $button = $this.siblings('.button'),
        $fakeFile = $this.siblings('.file-holder');
    if (newVal !== '') {
        $button.text('File chosen');
        if ($fakeFile.length === 0) {
            $('.place').html('<div><span class="file-holder">' + newVal + '</span><a href="#" class="delete_upload">Remove</a></div>');
            $this.val('');
        } else {
            $fakeFile.text(newVal);
        }
    }
};

Check the result here: http://jsfiddle.net/kTNuB/3/

Upvotes: 3

Related Questions