Reputation: 573
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...
Upvotes: 7
Views: 16948
Reputation: 484
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
Upvotes: 2
Reputation: 1387
ExtJs version 6.0.1 - Using 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();
}
});
Upvotes: 0
Reputation: 4987
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...
}
});
}
Upvotes: 2
Reputation:
You can't do it with filefield of Extjs
filefield of Extjs return string url from select file.
I think you need the file selected as occurs in change event but filefield haven't this event
you can use this solution, maybe you get one idea from the solution
Example: 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);
}
Upvotes: 0