PDA

View Full Version : Access file system object in secure mode



lknaik2000
14 Mar 2013, 10:09 PM
Hi,
I need to access the file system object using Extjs.
I know this functionality is not provided due to security issue.
But my app is having more security and anly admin can access the app using credencials.


I am trying to get the file from local system. The same thing has been implemented previously using


ActiveX and it works only in IE. currently we are developing the system using Extjs for cross browser


compactibility.I want to achieve the same functionality using Extjs.


If extjs does not support this, please suggest me any plugin or any software to achive this


functionality.


My requirement is:


browse a xml file from the local system and parse the file using parser.
Then display the value in the test field.
Then send a ajax request with these values as extraparams when a button(apply now) is clicked.


Please send me some code snipet or give your valueable suggestion for this.






Thanks in advance.


Lakshman Kumar.

damo
15 Mar 2013, 8:20 AM
Hi Lakshman,

I haven't tested this but maybe you can use the <input type="file"/> to select the XML file then parse it's contents. This link seems to assume so http://www.htmlgoodies.com/beyond/javascript/read-text-files-using-the-javascript-filereader.html#fbid=1ya1N8Kn35N

Regards,
Damo

lknaik2000
19 Mar 2013, 1:06 AM
Hi Damo,


Thank you for your quick response.


I tested this and it works fine with the html element <input type="file"/> to select the XML file.
But while I use extjs component for the file filed as 'xtype : 'filefield'', it is not working.
It is unable to retrieve the file and giving exception as:
Uncaught TypeError: Cannot read property 'files' of undefined


I am providing my code as below.


View (FileSystemObjectView.js)
---------------------------------


Ext.define('IES.view.framework.fso.FileSystemObjectView', {
extend : 'Ext.panel.Panel',
alias : 'widget.filesystemobject',
height : '100%',
width : '100%',
autoScroll: true,
layout : {
align : 'center',
pack : 'center',
type : 'vbox'
},
title : 'File System Object (FSO)',
id : 'fileSystemObjectId',
initComponent : function() {
var me = this;
Ext.applyIf(me, {
items : [ {
xtype : 'form',
width : '60%',
frame : true,
id : 'myformId',
bodyPadding : 25,
title : '',
layout : {
type : 'table',
columns:1
},
defaults : {
labelAlign : 'right',
labelSeparator : ' ',
labelWidth : 100,
msgTarget : 'side'
},
items : [ {
xtype : 'filefield',
name : 'testFile',
id : 'selectFileId',
size : 90,
emptyText : 'Select a file',
fieldLabel : 'File name',
buttonText : 'Browse..'
}],
buttons : [ {
text : 'Upload file',
action : 'uploadfile'/*,
handler : function() {

}*/
} ]
} ]
});


me.callParent(arguments);
}


});








Controller(FileSystemObjectController.js)
-----------------------------------------


Ext.define('IES.controller.framework.fso.FileSystemObjectController', {
extend : 'Ext.app.Controller',
views : ['IES.view.framework.fso.FileSystemObjectView'],
init : function() {
this.control({
'filesystemobject form filefield[id=selectFileId]' : {
change : this.onFileSelect
}
});
},
onFileSelect : function(event) {
this.readSingleFile(event);
},
readSingleFile : function(evt) {
//Retrieve the first (and only!) File from the FileList object
var f = evt.target.files[0];
if (f) {
var r = new FileReader();
r.onload = function(e) {
var contents = e.target.result;
alert( "Got the file.\n"
+"name: " + f.name + "\n"
+"type: " + f.type + "\n"
+"size: " + f.size + " bytes\n"
+ "starts with: " + contents.substr(0, contents.indexOf("\n"))
);
alert(contents);
}
r.readAsText(f);

} else {
alert("Failed to load file");
}
}
});




please correct me if I am wrong at any place.

Thanks.
Lakshman.

drummintime
3 Feb 2014, 12:14 PM
You can access via: extFileElement.fileInputEl.dom.files

See: http://www.sencha.com/forum/showthread.php?133512-How-to-use-client-side-FileReader-based-file-reading-on-file-selected-by-FileField&p=994081&viewfull=1#post994081

palakurthivishal
4 Feb 2014, 1:28 AM
Hello drummintime,
Try this modified snippet of yours.

Ext.create('Ext.form.Panel', { title: 'Upload a Photo',
width: 400,
bodyPadding: 10,
frame: true,
renderTo: Ext.getBody(),
items: [{

html : '<input type = "file"></input>',
listeners : {
el : {
change : function(evt){
debugger;
var f = evt.target.files[0];
if (f) {
var r = new FileReader();
r.onload = function(e) {
var contents = e.target.result;
alert( "Got the file.\n"
+"name: " + f.name + "\n"
+"type: " + f.type + "\n"
+"size: " + f.size + " bytes\n"
+ "starts with: " + contents.substr(0, contents.indexOf("\n"))
);
alert(contents);
}
r.readAsText(f);


} else {
alert("Failed to load file");
}
}
}
}
}],


buttons: [{
text: 'Upload',
handler: function() {
var form = this.up('form').getForm();
if(form.isValid()){
form.submit({
url: 'photo-upload.php',
waitMsg: 'Uploading your photo...',
success: function(fp, o) {
Ext.Msg.alert('Success', 'Your photo "' + o.result.file + '" has been uploaded.');
}
});
}
}
}]
});

drummintime
4 Feb 2014, 10:01 AM
Thanks palakurthivishal (http://www.sencha.com/forum/member.php?606961-palakurthivishal)! Figured I'd underscore what works vs what I struggled with:



Ext.create('Ext.form.field.File', {
fieldLabel : 'Choose File',

listeners : {
/* #Attaching the listener directly to the change property doesn't work
change : function(evt){
console.log(evt.target.files[0]);
//RESULT: Uncaught TypeError: Cannot read property 'files' of undefined
}

*/

/* This works as expected, note the change event listener is a value of the el property */
el : {
change : function(evt){
console.log(evt.target.files[0]);
//RESULT: successfully logs a reference to the file.
}
}
}
});