CODEWITHSUNDEEP
jquery
Samarland
Samarland

Reputation: 581

Reset selected file input in JQuery

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('');
}

Upvotes: 1

Views: 6959

Answers (2)

Naren Murali
Naren Murali

Reputation: 56640

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>

Upvotes: 1

ManishKumar
ManishKumar

Reputation: 1554

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('');
     }
});

Upvotes: 0

Related Questions