Reset selected file input in JQuery

Question

Is there a way to write a jQuery method to delete the selected file to clear it out? How can I pass the file name to jQuery to reset the file input?

I don't want to clear all the files at once.

Here are my files:

<div class="field fieldTEXT">
    <form:label path="file" cssClass="fieldLabel">
    Attach Competitor: 
    </form:label>

    <form:input path="file" type="file" cssClass="fileInput" accept="application/pdf"/> <a href="" onclick="RemoveFile();" > Remove</a>
</div>
        <div class="field fieldTEXT">
            <form:label path="file2" cssClass="fieldLabel">
                Attach 2
            </form:label>
            <form:input path="file2" type="file" cssClass="fileInput"/> <a href="" onclick="RemoveFile();" > Remove</a>

        </div>
        <div class="field fieldTEXT">
            <form:label path="file3" cssClass="fieldLabel">
                Attach Additional Information:
            </form:label>
            <form:input path="file3" type="file" cssClass="fileInput" accept="application/pdf"/> <a href="" onclick="RemoveFile();" > Remove</a>    
        </div>
        <div class="field fieldTEXT">
            <form:label path="file4" cssClass="fieldLabel">
                Attach Additional Information (If Needed):
            </form:label>
                <form:input path="file4" type="file" cssClass="fileInput" accept="application/pdf" /> <a href="" onclick="RemoveFile();" > Remove</a>

        </div>

In my JS: How can I pass the name to my JS file and reset the selected link?

function RemoveFile(name) {
    $('input[type=file]').val('');
}

Naren Murali · Accepted Answer · 2017-08-28 15:58:07Z

1

This code works, please ignore the changes I made to the html, that is for generating the HTML in the editor.

Explanation: If you add an event handler to all the a tags in the form with classes field fieldTEXT the function will get called, the event will provide us a this which is basically the clicked element. Then using the jquery function prev(), I access the element before the a tag, which is the input element, then we clear the field using val('')

$('.field.fieldTEXT a').on('click', function(){
     $(this).prev().val('');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field fieldTEXT">
            <form:label path="file2" cssClass="fieldLabel">
                Attach 2
            </form:label>
            <input path="file2" type="file" cssClass="fileInput"/> <a href="#"> Remove</a>

        </div>
        <div class="field fieldTEXT">
            <form:label path="file3" cssClass="fieldLabel">
                Attach Additional Information:
            </form:label>
            <input path="file3" type="file" cssClass="fileInput" accept="application/pdf"/> <a href="#"> Remove</a>    
        </div>
        <div class="field fieldTEXT">
            <form:label path="file4" cssClass="fieldLabel">
                Attach Additional Information (If Needed):
            </form:label>
                <input path="file4" type="file" cssClass="fileInput" accept="application/pdf" /> <a href="#" > Remove</a>

        </div>

edited Aug 28, 2017 at 15:58

answered Aug 28, 2017 at 15:51

Naren Murali

66.3k6 gold badges51 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Samarland Over a year ago

any good explanation on why it doesn't work for the first click on Remove link :/ .. it will work after the first click :D

Naren Murali Over a year ago

@Samarland as you can see the code works, I would suggest you do $('.field.fieldTEXT a').on('click', function(){ console.log($(this).prev()); $(this).prev().val(''); }); and check the previous element, if its the input tag. Form elements are not generated in the text editor, so I couldn't use the exact code.

Samarland Over a year ago

It will work for the same Remove link for the second click, and will work for the first click on any other input

Naren Murali Over a year ago

@Samarland if you could replicate the issue in a jsfiddle will help you solve this

Naren Murali Over a year ago

@Samarland if you could replicate the issue in a jsfiddle I will check it for you

|

Manish Kumar · Accepted Answer · 2017-08-28 15:48:03Z

0

Get all the elements and check each object if they have file. and clear if file is exist

$('input[type=file]').each(function(i, obj) {
    if(obj.files.length){
        obj.val('');
     }
});

answered Aug 28, 2017 at 15:48

Manish Kumar

1,5852 gold badges16 silver badges24 bronze badges

Collectives™ on Stack Overflow

Reset selected file input in JQuery

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related