Extjs reset filefield input

Question

How reset filefield input in ExtJS? I am trying:

//this - point on Ext.panel.Form

var form = this.getForm();
form.reset();

var filefield = this.getForm().getFields().get(0);
filefield.reset();

filefield.setValue('');

filefield.value = '';

But not one of these methods don't work. Thank you for help!

score 6 · Accepted Answer · answered Jul 04 '12 at 07:35

Use below code will help you

function clearFileUpload(id){
    // get the file upload element
    fileField     = document.getElementById(id);
    // get the file upload parent element
    parentNod     = fileField.parentNode;
    // create new element
    tmpForm        = document.createElement("form");
    parentNod.replaceChild(tmpForm,fileField);
    tmpForm.appendChild(fileField);
    tmpForm.reset();
    parentNod.replaceChild(fileField,tmpForm);
}

score 2 · Answer 2 · answered May 14 '15 at 07:23

2

Old post, but I encountered this problem as well, and I found a cleaner solution.

First of all make sure , the filefield has allowBlank: true set.

Then you can call the setRawValue method as so :

    filefield.setRawValue("");

answered May 14 '15 at 07:23

AndreiV

99
4

score 2 · Answer 3 · answered Mar 16 '16 at 09:33

2

The easiest way that you might be looking for would be :

filefield.fileInputEl.dom.value = '';

answered Mar 16 '16 at 09:33

Aamir Jamal

855
9
15

score 1 · Answer 4 · edited May 23 '17 at 11:54

Based on this answer: HTML input file selection event not firing upon selecting the same file

In Ext.ux.form.FileUploadField component add the following code in the change event under the bindListeners function.

var that = this;
setTimeout(function() {
    that.fileInput.dom.value = null;
    that.setValue(that.fileInput.dom.value);
}, 100);

bindListeners: function(){
  this.fileInput.on({
    scope: this,
    mouseenter: function() {
      this.button.addClass(['x-btn-over','x-btn-focus'])
    },
    mouseleave: function(){
      this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
    },
    mousedown: function(){
      this.button.addClass('x-btn-click')
    },
    mouseup: function(){
      this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
    },
    change: function(){
      var v = this.fileInput.dom.value;
      this.setValue(v);
      this.fireEvent('fileselected', this, v);

      var that = this;
      setTimeout(function() {
        that.fileInput.dom.value = null;
        that.setValue(that.fileInput.dom.value);
      }, 100);
    }
  }); 
},

Extjs reset filefield input

4 Answers4