File upload in extjs 4.2 without form.submit()

Question

I'm trying to upload a file (as of now of any extension) in extjs. I have a model and store. the file upload happens from a window and I dont have a form in the window. All example I tried in the net are with form.submit(). I instead use and Ajax call as below to send the data to the 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');
            }
        });

The records to send in the data is got as below.

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);

While setting the record in the model, I use the below code..

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

I received a 500 status error with the response "Cannot convert value of type [java.lang.String] to required type [org.springframework.web.multipart.commons.CommonsMultipartFile]"

I'm sure that this is because of the way I set the value to the model as Ext.getCmp('fileUploadCompID').value gives the file name. Please let me know how to set the file to the model and what data type I have to specify for the field in the model.

Below is how I try to retrieve the file in the spring controller.

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

Please let me know what I'm doing wrong and what has to be done to fix this...

Answer 1

If you want to still use ExtJS's fileuploadfield and upload through an AJAX call using HTML5 FileReader, you can do it like such:

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 2

Yes, you can use Ajax and 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){
   }
});

See my demo here