Question

164

Clearing an HTML file upload field via JavaScript

rated 0 times [ 167] [ 3] / answers: 1 / hits: 157497 / 15 Years ago, wed, may 6, 2009, 12:00:00

I want to reset a file upload field when the user selects another option.

Is this possible via JavaScript? I'm suspecting that the file upload element is treated differently because it interacts with the user's file system, and maybe it's immutable.

Basically, what I want is something like (pseudo-code):

// Choose selecting existing file

$('#select-file').bind('focus', function() {

  // Clear any files currently selected in #upload-file

  $('#upload-file').val(''); 

}) ;



// Choose uploading new one - this works ok

$('#upload-file').bind('focus', function() {

  // Clear any files currently selected in #select-file

  $('#select-file').val(''); 

}) ;

NB: This question and its answers span the period from 2009 to today. Browsers and approaches have changed in that time, please select your solutions with this in mind :)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

yesseniadajab

Add To Favorites

Follow

Total Points: 258

Total Questions: 101

Total Answers: 127

Location: Mexico

Member since Mon, Sep 12, 2022

2 Years ago

answered 15 Years ago makaylahk · Accepted Answer

You can't set the input value in most browsers, but what you can do is create a new element, copy the attributes from the old element, and swap the two.

Given a form like:

<form> 

    <input id=fileInput name=fileInput type=file /> 

</form>

The straight DOM way:

function clearFileInput(id) 

{ 

    var oldInput = document.getElementById(id); 



    var newInput = document.createElement(input); 



    newInput.type = file; 

    newInput.id = oldInput.id; 

    newInput.name = oldInput.name; 

    newInput.className = oldInput.className; 

    newInput.style.cssText = oldInput.style.cssText; 

    // TODO: copy any other relevant attributes 



    oldInput.parentNode.replaceChild(newInput, oldInput); 

}



clearFileInput(fileInput);

Simple DOM way. This may not work in older browsers that don't like file inputs:

oldInput.parentNode.replaceChild(oldInput.cloneNode(), oldInput);

The jQuery way:

$(#fileInput).replaceWith($(#fileInput).val('').clone(true));



// .val('') required for FF compatibility as per @nmit026

Resetting the whole form via jQuery: https://stackoverflow.com/a/13351234/1091947