how to reset input type file

Question

I am developing a metro app with VS2012 and Javascript  I want to reset the contents of my file input    lt input type  file  id  uploadCaptureInputFile  class  win-content colors  accept  image      gt    How should I do that

User · Answer

Particularly for Angular  document getElementById  uploadFile   value         Will work  But if you use Angular It will say   Property  value  does not exist on type  HTMLElement  any   document getElementById   returns the type HTMLElement which does not contain a value property  So  cast it into HTMLInputElement    lt HTMLInputElement gt document getElementById  uploadFile    value         EXTRA  -  However  we should not use DOM manipulation  document xyz    in angular   To do that angular has provided  VIewChild   ViewChildren  etc which are document querySelector    document queryselectorAll   respectively   Even I haven t read it  Better to follows expert s blogs  Go through this link1  link2

User · Answer

Another solution  without selecting HTML DOM elements    If you added  change  event listener on that input  then in javascript code you can call  for some specified conditions     event target value         For example in HTML    lt input type  file  onChange  onChangeFunction event   gt    And in javascript   onChangeFunction event      let fileList   event target files    let file   fileList 0     let extension   file name match     lt      w   g  0  toLowerCase       assuming that this file has any extension    if  extension      jpg         alert  Good file extension           else       event target value           alert  Wrong file extension  File input is cleared

User · Answer

SOLUTION  The following code worked for me with jQuery  It works in every browser and allows to preserve events and custom properties   var  el       uploadCaptureInputFile     el wrap   lt form gt    closest  form   get 0  reset     el unwrap      DEMO  See this jsFiddle for code and demonstration   LINKS  See How to reset file input with JavaScript for more information

User · Answer

You need to wrap  lt input type      file    gt  in to  lt form gt  tags and then you can reset input by resetting your form   onClick  this form reset

User · Answer

Resetting a file upload button is so easy using pure JavaScript   There are few ways to do it  but the must straightforward way which is working well in many browser is changing the filed value to nothing  that way the upload filed gets reset  also try to use pure javascript rather than any framework  I created the code below  just check it out  ES6     x000D   x000D  function resetFile     x000D    const file   document querySelector   file    x000D    file value       x000D    x000D   lt input type  file  class  file    gt  x000D   lt button onclick  resetFile    gt Reset file lt  button gt  x000D   x000D   x000D

User · Answer

I miss an other Solution here  2021   I use FileList to interact with file input  Since there is no way to create a FileList object  I use DataTransfer  that brings clean FilleList with it  I reset it with    file input files new DataTransfer   files    In my case this perfectly fits  since I interact only via FileList with my encapsulated file input element

User · Answer

The reseting input file is on very single     input type file    val null    If you bind reset the file in change other field of the form  or load form with ajax   This example is applicable  selector for example is    input type text    or any element of the form  event click  change  or any event      body   delegate  event    selector   function            input type file    val null

User · Answer

lt input type  file  id  mfile  name  mfile  gt   lt p gt Reset lt  p gt    lt script gt    document  ready function       p   click function                     mfile   val                  return false

User · Answer

You should try this       uploadCaptureInputFile   val

User · Answer

I faced the issue with ng2-file-upload for angular  if you are looking for the solution in angular refer below code  HTML    lt input type  file  name  myfile   activeFrameinputFile ng2FileSelect  uploader   frameUploader   change   frameUploader uploadAll      gt   component  import   Component  OnInit  ElementRef  ViewChild   from   angular core     ViewChild  activeFrameinputFile  InputFrameVariable  ElementRef   this frameUploader onSuccessItem    item  response  status  headers    gt      this    InputFrameVariable    nativeElement value

User · Answer

You can  t reset that since it is an  read-only file  you can clone it to workaround the problem

User · Answer

You can just clone it and replace it with itself  with all events still attached    lt input type  file  id  control  gt    and  var input       control     function something happens         input replaceWith input val     clone true         Thanks   Css-tricks com

User · Answer

My Best Solution           file uplaod input   val          this is working best

User · Answer

In case you have the following    lt input type  file  id  fileControl  gt    then just do       fileControl   val        to reset the file control

User · Answer

There are many approaches and i will suggest to go with ref attachment to input    lt input     id  image      type  file      required     ref  ref   gt  this fileInput   ref      multiple     onChange  this onFileChangeHandler    gt    to clear value after submit   this fileInput value

User · Answer

With IE 10 I resolved the problem with        var file   document getElementById  file-input        file removeAttribute  value        file parentNode replaceChild file cloneNode true  file     where     lt input accept  image    onchange  angular element this  scope   uploadFile this   id  file-input  type  file   gt

User · Answer

Works for dynamic controls too   Javascript   lt input type  file  onchange  FileValidate this     gt   function FileValidate object        if   object files 0  size   1024   1024   gt  1        greater than 1 MB                    object  val                     JQuery   lt input type  file  class  UpoloadFileSize  gt     document  ready function               UpoloadFileSize   bind  change   function                              if   this files 0  size   1024000   gt  1 5      greater than 1 5 MB               this  val                  alert  Size exceeded

User · Answer

This is the BEST solution   input value       if   safari i test navigator userAgent      input type        input type    file      Of all the answers here this is the fastest solution  No input clone  no form reset    I checked it in all browsers  it even has IE8 support

User · Answer

This could be done like this   x000D   x000D  var inputfile      uploadCaptureInputFile   x000D      reset   on  click  function    x000D  inputfile replaceWith inputfile val     clone true    x000D     x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   lt input type  file  id  uploadCaptureInputFile  class  win-content colors  accept  image      gt  x000D   lt a href    id  reset  gt Reset lt  a gt  x000D   x000D   x000D

User · Answer

With angular you can create a template variable and set the value to null   lt input type  file   fileUploader   gt   lt button  click   fileUploader value   null  gt Reset from UI lt  button gt    Or you can create a method to reset like this   component ts     ViewChild  fileUploader   fileUploader ElementRef     resetFileUploader          this fileUploader nativeElement value   null        template   lt input type  file   gt   lt button  click   resetFileUploader    gt Reset from Component lt  button gt    stackblitz demo

User · Answer

I use for vuejs       lt input           type  file            ref  fileref             change  onChange   gt   this  refs fileref value

User · Answer

Just use      input type file    val

User · Answer

jQuery solution          input   on  change  function                      this  get 0  value                         this  get 0  type                         this  get 0  type    file

User · Answer

If you have several files in your form but only want one of them to be reset    if you use boostrap  jquery  filestyle to display the input file form          idInput  filestyle  clear

User · Answer

The jQuery solution that  dhaval-marthak posted in the comments obviously works  but if you look at the actual jQuery call it s pretty easy to see what jQuery is doing  just setting the value attribute to an empty string  So in  pure  JavaScript it would be   document getElementById  uploadCaptureInputFile   value

User · Answer

x000D   x000D  function resetImageField     x000D      var  el       uploadCaptureInputFile                                            x000D       el wrap   lt form gt    closest  form   get 0  reset    x000D       el unwrap    x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt input type  file  id  uploadCaptureInputFile  class  win-content colors  accept  image      gt  x000D   lt button onclick  resetImageField    gt Reset field lt  button gt  x000D   x000D   x000D

User · Answer

var fileInput       uploadCaptureInputFile    fileInput replaceWith fileInput val     clone true

User · Answer

x000D   x000D  document getElementById  uploadCaptureInputFile   value       x000D   x000D   x000D

[javascript] how to reset <input type = "file">

Examples related to javascript

Examples related to visual-studio-2012

Examples related to winjs