0

I have implemented the following file upload which is an input-group based on this answer and its source. I need to reset the file input and its text input on the click of "Reset" button. For this I have used the wrap and unwrap methods based on this answer and this comment to reset it. The reset is not working in eclipse but works fine in JSFiddle and Bootply(Not working in IE 11). Can anyone help me find out what's wrong?

File Upload

HTML

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>File Upload</title>
    <script src="js/jquery-1.11.1.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="CustomStyleSheet.css">
    <script src="CustomJavaScript.js"></script>
  </head>
  <body>
    <div class="container-fluid">
      <form class="form-horizontal" id="fileUploadForm">
        <div class="row" style="margin-top:15px">
          <div class="form-group">
            <label class="control-label col-xs-4 col-sm-4 col-md-4">Select File</label>
            <div class="controls col-xs-6 col-sm-6 col-md-6">
              <div class="input-group" id="fileGroup"> 
                <span class="input-group-btn">
                <span class="btn btn-primary btn-file">
                Browse <input type="file" id="files" multiple>
                </span>
                </span>
                <input type="text" id="fileName" class="form-control" readonly>
              </div>
            </div>
          </div>
        </div>
        <div class="row" style="margin-right:15px">
          <div class="pull-right">
            <button type="button" class="btn btn-default" id="resetFileUpload">Reset</button>
            <button type="button" class="btn btn-primary">Upload</button>
          </div>
        </div>
      </form>
    </div>
  </body>
</html>

JavaScript

$(document).on('change', '.btn-file :file', function () {
    var input = $(this),
        numFiles = input.get(0).files ? input.get(0).files.length : 1,
        label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
    input.trigger('fileselect', [numFiles, label]);
});

$(document).ready(function () {
    $('.btn-file :file').on('fileselect', function (event, numFiles, label) {
        var input = $(this).parents('.input-group').find(':text'),
            log = numFiles > 1 ? numFiles + ' files selected' : label;
        if (input.length) {
            input.val(log);
        } else {
            if (log) alert(log);
        }
    });
});

function reset_form_element(e) {
    e.wrap('<form>').closest('form').get(0).reset();
    e.unwrap();
}

$('#resetFileUpload').on('click', function (e) {
    reset_form_element($('#files'));
    reset_form_element($('#fileName'));
    e.preventDefault();
});

CSS

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}
input[readonly] {
    /*background-color: white !important;*/
    cursor: text !important;
}
Community
  • 1
  • 1
Ram
  • 3,092
  • 10
  • 40
  • 56

3 Answers3

0

Just to confirm: are you attempting to remove an uploaded file client-side?

Try this in your reset button click event, where the variable "id" is the id of the file upload input. It simply sets the innerHTML of the element to the same element's innerHTML. This works in ie9 and google chrome, I've not had to test other browsers.

By the way, I've no idea why this works (stole it from a web site), if anyone does know please leave a comment.

document.getElementById(id).innerHTML = document.getElementById(id).innerHTML;
Tom Regan
  • 3,580
  • 4
  • 42
  • 71
  • I am not attempting to remove the uploaded file. I am trying get rid of any selected files and reset it. I don't think that setting its innerHTML to itself would work but will give it a try. – Ram Feb 02 '15 at 20:42
  • On a web page you have file upload input. The user clicks "browse" and selects a file to upload. You now want to, in the browser in javascript, remove that file from the file upload input. If that is what you are attempting to do, the code above will do that in IE9 and Chrome 40. – Tom Regan Feb 02 '15 at 21:20
0

Try this

var $input = $('#inputId').parents('.form-group').find('input');
$input.val('').trigger('change');
$input.trigger('cleared');
Luã
  • 1
-1

I just encountered this same issue in my application. For some reason in IE 11, a .reset() on the form does not work to clear out the value. The reset works fine in IE 10, FF, and Chrome though. I was able to explicitly set value="" on the input control in IE 11 and that cleared it.

erikaho
  • 74
  • 3