Caricamento file in extjs 4.2 senza forma.submit()

Question

Sto provando a caricare un file (come ora di qualsiasi estensione) in extjs. Ho una modella e un negozio. il caricamento del file avviene da una finestra e non ho un modulo nella finestra. Tutti gli esempi che ho provato in rete sono con form.submit(). Io invece uso e Ajax chiamiamo come sotto per inviare i dati al server.

Ext.Ajax.request({ 

      url : 'qaf/saveSetupDetails.action', 

      params : { 
       'data' : recordsToSend 
      }, 
      failure : function(response){ 
       //console.log('error connecting controller'); 
      }, 
      success : function(response){ 
       //console.log('successfully submitted'); 
      } 
     }); 

I record per inviare i dati sono ottenuti come di seguito.

var store = Ext.getStore('SomeStore'); 
     var modifiedRecords = store.getModifiedRecords(); 
     var recordsToSend = []; 
     if(modifiedRecords.length > 0){ 
      Ext.each(modifiedRecords, function(record){ 
       recordsToSend.push(record.data);//I'm sure that this is so dump but this is how I do it for other records which are string and not sure how to do it for a file... 
      }); 
     } 
     Ext.USE_NATIVE_JSON = true; 
     recordsToSend = Ext.encode(recordsToSend); 

Mentre stabilendo il record nel modello, io uso il codice seguente ..

var rec = Ext.create('QAF.model.MyModel'); 
rec.set('modelField',Ext.getCmp('fileUploadCompID').value); 

ho ricevuto un errore 500 di stato con la risposta "Cannot convert value of type [java.lang.String] to required type [org.springframework.web.multipart.commons.CommonsMultipartFile]"

Sono sicuro che questo è a causa del modo in cui imposto il valore sul modello come Ext.getCmp('fileUploadCompID').value fornisce il nome del file. Per favore fatemi sapere come impostare il file sul modello e quale tipo di dati devo specificare per il campo nel modello.

Di seguito è come si tenta di recuperare il file nel controller di primavera.

@RequestMapping (value = "/qaf/saveSetupDetails.action") 
    public @ResponseBody 
    void saveSetupDetails(@RequestParam CommonsMultipartFile data)throws Exception{ 
     log.info("Enter into saveSetupDetails method..." + data.getOriginalFilename()); 
    } 

Si prega di farmi sapere quello che sto facendo male e che cosa deve essere fatto per risolvere il problema ...

Answer 1

Non si può farlo con filefield di ExtJS

filefield di ExtJS return string url da select file.

Penso che è necessario il file selezionato come avviene nel caso in cambiamento, ma non filefield avere questo evento

è possibile utilizzare questa soluzione, forse si ottiene uno idea dalla soluzione

Esempio: http://jsfiddle.net/e3M3e/e8V7g/

var itemFile = null; 
Ext.create('Ext.panel.Panel', { 
    title: 'Hello', 
    width: 400, 
    html: "<input id='inputFile' type='file' name='uploaded'/>", 
    renderTo: Ext.getBody(), 
    listeners: { 
     afterrender: function() { 
      itemFile = document.getElementById("inputFile");    
      itemFile.addEventListener('change', EventChange, false); 
     } 
    } 
}); 

function EventChange(e){  
    var files = itemFile.files; 
    console.log(files); 
} 

Answer 2

Se si desidera utilizzare ancora ExtJS di fileuploadfield e caricare tramite una chiamata AJAX utilizzando HTML5 FileReader, si può fare come ad esempio:

launchUpload: function() { 
    //get a handle of the "file" input in the widget itself... 
    var fileInput = document.getElementById(yourUploadField.button.fileInputEl.id); 
    var fileReader = New FileReader(); 
    var fileToUpload = fileInput.files[0]; //assuming your only uploading one file... 
    var me = this 

    fileReader.onload = function (e) { 
     me.onLoadFile(e, me, fileToUpload.name); 
    } 

    fileReader.readAsDataURL(fileToUpload); 

}, 
onLoadFile: function (e, scope, filename) { 

    //I carry the scope around for functionality... 

    Ext.Ajax.request({ 
     method: 'POST', 
     url: 'url', 
     scope: scope, 
     jsonData: { fileNameParameter: filename, fileDatainBase64: e.target.result}, 
     success: function (response, operation) { 
      //success.. 
     }, 
     failure: function (response, operation) { 
      //failure... 
     } 
    });  

} 

Answer 3

ExtJs versione 6.0.1 - Utilizzando iframe

Ext.define('xxx.yyy.UploadData', { 
    extend : 'Ext.form.Panel', 
    alias : 'widget.uploaddata', 

    initComponent : function(){   
     var me = this;   

     me.items = [{ 
      xtype  : 'filefield', 
      margin  : '20 0 0 20', 
      name  : 'excelfile', 
      fieldLabel : 'Choose file', 
      msgTarget : 'side', 
      allowBlank : false, 
      anchor  : '30%', 
      buttonText : 'Select', 
      defaultButtonTarget : 'fileframe' 
     },{ 
      xtype : 'panel', 
      html : '<iframe width="340" height="340" style="display: none" name="fileframe"></iframe>' 
     },{ 
      xtype : 'button', 
      text : 'Import', 
      handler : function(){ 
      var form = this.up('form').getForm(); 
      if(form.isValid()){ 
       form.submit({ 
        url  : './upload.php', 
        waitMsg : 'uploading...', 
        success : function(fp, o) { 
         alert("OK");        
        } 
       }); 
      } 
     } 
    }]; 

    me.callParent();   
    }  
    }); 

Answer 4

Sì, è possibile utilizzare Ajax e formdata API:

var file = s.fileInputEl.dom.files[0], 
    data = new FormData(); 
data.append('file', file); 
Ext.Ajax.request({ 
    url: '/upload/files', 
    rawData: data, 
    headers: {'Content-Type':null}, //to use content type of FormData 
    success: function(response){ 
    } 
}); 

Vedere il mio demo here