jQuery Example: Reseting an input file element in case of non-allowed file-extensions

Question

If someone tries to upload a file with a non-allowed file-extension, this input-file-element should get "reseted".

That is the input-file-element

<input type="file" id="image1">

These are the corresponding jQuery-statements (document is ready) and I get "TypeError: myElement.clone is not a function" (while I am trying this solution here: Clearing <input type='file' /> using jQuery)

$(document).ready(function() {
    $('#image1').change(function(event) {
        checkExtensions(this.files[0].name, $(this).get());
    });

    function checkExtensions (fileName, element) {

        var myElement = element;
        var allowedExtensions = new Array ('pdf','gif','jpg','png');
        var currentExtension = fileName.split('.').pop();

        if ($.inArray (currentExtension, allowedExtensions) > -1) {
            // everythins is OK, further instructions take place
        }   else {
            // reset the file input element
            myElement.replaceWith( myElement = myElement.clone( true ) );
        }
    }
});

score 1 · Accepted Answer · answered Oct 24 '13 at 09:00

1

You are passing the native DOM element to your function instead of the jQuery object containing the element. Native DOM elements do not have the function clone() (or replaceWith either). Try this instead:

$('#image1').change(function(event) {
    checkExtensions(this.files[0].name, $(this)); // note, I removed .get()
});

function checkExtensions (fileName, $element) {
    var allowedExtensions = new Array ('pdf','gif','jpg','png');
    var currentExtension = fileName.split('.').pop();

    if ($.inArray (currentExtension, allowedExtensions) > -1) {
        // everything is OK, further instructions take place
    }   else {
        // reset the file input element        
        $element.replaceWith($element.clone(true).val(''));
    }
}

Example fiddle

answered Oct 24 '13 at 09:00

Rory McCrossan

331,213
40
305
339

May be a last question in this regard: what does $ do in $element exactly? – Oct 24 '13 at 10:51
1

@E2B it doesn't do anything. It's just a naming convention to show that that variable holds a jQuery object. – Rory McCrossan Oct 24 '13 at 10:57
But it does not work without "$" or do I make an another mistake? – Oct 24 '13 at 11:13
1

That sounds like a mistake elsewhere, as the `$` makes no difference to the logic – Rory McCrossan Oct 24 '13 at 13:12

jQuery Example: Reseting an input file element in case of non-allowed file-extensions

1 Answers1