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.
Add a comment |
1 Answer
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/
2 Comments
DGT
Thanks for the answer. This works fine if i just want delete the file and upload another one. But it also makes the value of the file 'empty' if i DO want to submit the uploaded file. Any idea how to?
keepwalking
Move the $this.val(''); to the delete function (add $('.file-wrapper input[type=file]').val('');). check jsfiddle.net/kTNuB/5