How to clear file input element

Question

I have an application here where the user can add a row and it displays a file input.

I have 2 problems when trying to clear a file input:

Problem 1: If I add 2 rows in the application, if I fill both file inputs and I click on 'Click File' button in one of the rows, then instead of clearing the file within the row, it is clearing the file in all the rows which is incorrect, it should clear the file within the row I wanted to clear file on.

Problem 2: After I try uploading a file by clicking on "Upload" button, after uploading is succcessful or not, if I select another file and then try to clear it by clicking on 'Clear File', then it doesn't clear the file at all.

How can both of these problems be fixed:

<script type="text/javascript">
 var sourceImageForm; 

function insertQuestion(form) {   

    var $tbody = $('#qandatbl > tbody'); 
    var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
    var $image = $("<td class='image'></td>"); 


    var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='startImageUpload(this);' class='imageuploadform' >" + 
    "<p class='imagef1_upload_process' align='center'>Loading...<br/><img src='Images/loader.gif' /><br/></p><p class='imagef1_upload_form' align='center'><br/><label>" + 
    "Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/><label class='imagelbl'>" + 
    "(jpg, jpeg, pjpeg, gif, png, tif)</label><br/><br/><label>" + 
    "<input type='submit' name='submitBtn' class='sbtn' value='Upload' /></label>" + 
    "<label><input type='button' name='imageClear' class='imageClear' value='Clear File'/></label>" +
    "</p> <iframe class='upload_target' name='upload_target' src='#' style='wclassth:0;height:0;border:0px;solclass #fff;'></iframe></form>");      

    $image.append($fileImage);

    $tr.append($image);  
    $tbody.append($tr); 

      $(".imageClear").click(function(event){
  event.preventDefault();
  $(".fileImage").replaceWith("<input type='file' class='fileImage' name='fileImage' />");
});

}

function startImageUpload(imageuploadform){
  $(imageuploadform).find('.imagef1_upload_process').css('visibility','visible');
  $(imageuploadform).find('.imagef1_upload_form').css('visibility','hidden');
  sourceImageForm = imageuploadform;
      return true;
}

function stopImageUpload(success){
      var result = '';
      if (success == 1){
         result = '<span class="msg">The file was uploaded successfully!<\/span><br/><br/>';
      }
      else {
         result = '<span class="emsg">There was an error during file upload!<\/span><br/><br/>';
      }
      $(sourceImageForm).find('.imagef1_upload_process').css('visibility','hidden');
      $(sourceImageForm).find('.imagef1_upload_form').html(result + '<label>Image File: <input name="fileImage" type="file"/></label><br/><label>(jpg, jpeg, pjpeg, gif, png, tif)</label><br/><br/><label><input type="submit" name="submitBtn" class="sbtn" value="Upload" /></label><label><input type="button" name="imageClear" class="imageClear" value="Clear File"/></label>');
      $(sourceImageForm).find('.imagef1_upload_form').css('visibility','visible');     
      return true;   
}

</script>

Possible duplicate of [How can I clear an HTML file input with JavaScript?](https://stackoverflow.com/questions/1703228/how-can-i-clear-an-html-file-input-with-javascript) — Ajit Kumar, Oct 30 '18 at 02:30

score 0 · Answer 1 · answered Apr 10 '12 at 13:10

The below code will clear all file inputs present in the page as you are pointing to the class

 $(".imageClear").click(function(event){
  event.preventDefault();
  $(".fileImage").replaceWith("<input type='file' class='fileImage' name='fileImage'   
      />");
  });

replace with

$(".imageClear").click(function(event){
  event.preventDefault();
  $(this).closest(".fileImage").replaceWith("<input type='file' class='fileImage'    
    name='fileImage'/>");
  });

I hope it will work...

Hi, I put this code in but problem is that it doesn't clear file at all when I click on the "Clear File" button — user1324106, Apr 10 '12 at 13:36

score 0 · Accepted Answer · answered Apr 10 '12 at 13:18

0

Problem 1 is caused by this line:

$(".fileImage").replaceWith("<input type='file' class='fileImage' name='fileImage' />");

That means that when you click in any "Clear file" button all the elements that have the class "fileImage" are replaced, not only the one that belongs to the same form as the button. Replacing it with the following should work:

 $(this).parents("form:first").find(".fileImage").replaceWith("<input type='file' class='fileImage' name='fileImage' />");

Since what I'm doing with the jquery selector is, first selecting the form the button clicked belongs to, and then finding the "fileImage" element inside that form.

answered Apr 10 '12 at 13:18

txominpelu

1,067
1
6
11

Hi, I put this code in but problem is that it doesn't clear file at all when I click on the "Clear File" button – user1324106 Apr 10 '12 at 13:39
From what you're telling me it seems like the click event it's not being fired, you can have a look at an example of how to fire the event with the "on" method on the latest version of jquery [see fiddle](http://jsfiddle.net/Ktsww/8/) – txominpelu Apr 10 '12 at 14:33

How to clear file input element

2 Answers2