ExtJs - Сохранить выбранный файл из filefield

Question

Я хочу загрузить файл с помощью новейшего инструментария extjs6. Поэтому я показываю MessageBox с файловым выбором. Как получить выбранный файл в объект javascript после нажатия кнопки «ОК» для его загрузки (через HTTP POST, например)?

this.createUploadMsgBox("File Upload", function (clickedButton) { 
    if (clickedButton == 'ok') { 
     console.log("file: " + file); 
    } 

createUploadMsgBox: function (title, callback) { 
     Ext.Msg.show({ 
      title: title, 
      width: 300, 
      buttons: Ext.MessageBox.OKCANCEL, 
      fn: callback, 
      items: [ 
       { 
        xtype: 'filefield', 
        label: "File:", 
        name: 'file' 
       } 
      ] 
     }); 
    } 

Вы можете рому мой пример здесь:

https://fiddle.sencha.com/#view/editor&fiddle/1kro

Answer 1

У вас есть два решения Возможное.

Один должен использовать form и отправить файл через form.submit() (используйте form.isValid() перед отправкой). Вы можете загрузить файл на сервере с помощью MultipartFile.

Другой способ - использовать JS File API. В вас createUploadMsgBox функции:

this.createUploadMsgBox("File Upload", function (clickedButton) { 
    if (clickedButton == 'ok') { 
     //console.log("file: " + file); 
     var filefield = Ext.ComponentQuery.query('filefield')[0]; 
     var file = filefield.el.down('input[type=file]').dom.files[0]; 
     var reader = new FileReader(); 
     reader.onload = (function(theFile) { 
      return function(e) { 
       console.log(e.target.result); 
      }; 
     })(file); 
     reader.readAsBinaryString(file); 
    } 
}); 

В file объекта вы имеете основную информацию о файле, а затем вы увидите в консоли содержимое файла.

Надеюсь, это поможет!