how to get file details of uploaded file in extJS

Question

how to get file details of uploaded file in extJS

I am using file upload and I need to first conveert into Grid and then sumbit.

for grid conversion I have to take all files details like this :

File {
    webkitRelativePath: "", 
    lastModifiedDate: Tue Jul 14 2009 11:02:31 GMT+0530 (India Standard Time), 
    name: "file.xlsx", 
    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", 
    size: 780831
 }

and here I am converting this to excell..

function handleFileSelect(evt){
    var files = evt.target.files;
    SessionConstant.uploadFileName = files[0].name;
    var xl2json = new ExcelToJSON();
    xl2json.parseExcel(files[0]);
   
   // Next code  
}


function ExcelToJSON  () {
    this.parseExcel = function(file) {
        var reader = new FileReader();

        reader.onload = function(e) {
          var data = e.target.result;
          var workbook = XLSX.read(data, {
            type: 'binary'
          });
          var uploadata = [];
          workbook.SheetNames.forEach(function(sheetName) {
           var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
            var json_object = JSON.stringify(XL_row_object);
            console.log(JSON.parse(json_object));
            uploadata.push(JSON.parse(json_object));
            jQuery( '#xlx_json' ).val( json_object );
          });
           var uploadData = uploadata;

        };

        reader.onerror = function(ex) {
          console.log(ex);
        };

        reader.readAsBinaryString(file);
      };
};

so this code when I am doing by using this

{
    text:'Upload',
    handler : function(){
        var x = document.createElement("INPUT");
            x.setAttribute("type", "file");
            x.setAttribute("id","upload");

            document.body.appendChild(x);
            document.getElementById('upload').addEventListener('change', handleFileSelect, false);
            document.getElementById('upload').click();

        
    },
}

This is working fine.

Now If I want to implement same thing fileupload in extJS so I can submit my form :

{
    xtype: 'filefield',
    cls:'common-fileupload',
    itemId:'fileUploadId',
    clearOnSubmit:false,
    width:300,
    labelWidth : '0',
    name: 'myFile',
    buttonConfig: {
        text: 'Browse',
        height : 30
    },
    listeners: {
        change: function(fld, value) {
           var newValue = value.replace(/C:\\fakepath\\/g, '');
            fld.setRawValue(newValue);
            this.up().submit({
                url: 'url',
                method: 'POST',
                success: function (form, action) {
                    
                },
                failure: function (form, action) {
                   
                },
                error: function (form, action) {
                  
                }
            });
        }
    },
    style:'margin-right:10px'
}

So In Change method How to get files details so I can write my handleFileSelect method.

Any idea willbe helpfull.

Answer 1

For the classic framework, following way should work:

  listeners: {
        change: function(fld, value) {
           let file = fld.fileInputEl.dom.files[0];
        }
    },