View Full Version : Automatic fileUpload launch from a Toolbar

26 Apr 2010, 3:45 AM
Hi. I'm developing an application that has a Gridstore with a toolbar. This grid contains a list of files from a directory and the toolbar contains the operations availables with the files, such as new, rename, delete ...

One of this operations is "Upload a new file". My first version, creates a dialog (Ext.window) with a FileUpload item and a button to submit the new file to the server (PHP). But now, I would like to modify it. When the user clicks in the toolbar, "Windows upload dialog" appears and then the file will be automatically uploaded.

I'm trying to create a FormPanel dinamically when the event 'fireselect' of the button is launched (the button is included in the tbar) but I need to get panel's form to make the submit and with this way, the toolbar will misplaced.

Any ideas or alternative ways?

Thanks in advanced and best regards

26 Apr 2010, 5:40 AM
can you post a public demo of this?

26 Apr 2010, 6:27 AM
I can't because is a embbeded system. I started using http://extplorer.sourceforge.net/ for base but I changed all scripts for compatibility problems (I use extjs 3.0). Anyway, the appearance is the same.

This is the code for Toolbar (in red, the fileUpload Button):

var gridTbar = new Ext.Toolbar({
items: [{
id: 'tb_reload',
icon: 'images/filemanager/reload.png',
text: 'reload',
tooltip: 'reload',
handler: loadDir
}, '-', {
id: 'tb_new',
icon: 'images/filemanager/filenew.png',
tooltip: 'new',
disabled: false,
handler: function() { openActionDialog(this, 'mkitem'); }
id: 'tb_upload',
icon: 'images/filemanager/up.png',
tooltip: 'upload',
disabled: false,
handler: function() { openActionDialog(this, 'upload'); }

And this is the code for FileUpload that I'm considering (other options/solutions are wellcomed)

var fileButton = new Ext.form.FileUploadField({
emptyText: '',
name: 'userfile',
buttonCfg: {
iconCls: 'upload-icon'
buttonText: '',
buttonOnly: true,
listeners: {
'fileselected': function(fb, v){
var simple = new Ext.FormPanel({
renderTo:'fi-button', //This line it could be my problem
fileUpload: true,
items: fileButton
waitMsg: 'Uploading....',
reset: false,
success: function(form, action) {
failure: function(form, action) {
if( !action.result ) return;
Ext.MessageBox.alert('Error!', action.result.error);
scope: simple,
params: {
action: 'upload',
dir: gridStore.directory,
requestType: 'xmlhttprequest',
confirm: 'true'

Thanks in advance

5 May 2010, 11:17 PM
Anyone can solve this problem?I also want to upload a file automatic.

6 May 2010, 1:59 AM
Finally, I found a solution to my problem using http://www.extjs.com/forum/showthread.php?29032-Ext.ux.form.BrowseButton

The code for the toolbar is the next:

var gridTbar = new Ext.Toolbar(
new Ext.ux.form.BrowseButton ({
id: 'tb_upload',
inputFileName: 'userfile',
disabled: false,
icon: 'images/filemanager/up.png',
handler: function() {
var uploadFormEl = Ext.getBody().createChild({
tag: 'form',
style: 'display:none'
var uploadForm = new Ext.form.BasicForm(uploadFormEl, {
params: Ext.urlEncode( getRequestParams() ),
fileUpload: true
var inputFileEl = Ext.getCmp('tb_upload').detachInputFile();
waitMsg: 'Uploading.....',
success: function(form, action) {
failure: function(form, action) {
if( !action.result ) return;
Ext.MessageBox.alert('Error!', action.result.error);
scope: this

Now, I'm trying to adapt this solution to a Ext.menu.Menu.

giggs06005, if you need more info, contact with me in this thread or with my mail and I'll try to help you ;)


1 Jun 2010, 2:38 AM
hi, i have successfully developed the client side code as per the guidelines mentioned her...but nowhere there is the code for processing this uploaded file on server....
............i need server side code....
.............can u please provide the code to save this uploaded file on server and so that it can be used for further processing purpose.

i need the code for same in either jsp or servelet to catch the data coming to server....
thanks in advance

6 Jul 2010, 2:50 AM
Hi Ritzruiz. Sorry for late response. I implemented server side in PHP but in JSP is very similar. I post you my code. If you have any question/problem, ask to me ;)

$tmp = $_FILES['userfile']['tmp_name'];
$item = stripslashes($_FILES['userfile']['name']);

$abs = get_abs_item($dir,$item);

if([email protected]_uploaded_file($tmp)) {
echo 'error msg in uploadfile';
if(@file_exists($abs) && empty( $_REQUEST['overwrite_files'])) {
echo 'error msg item exist';

$ok = move_uploaded_file($tmp, $abs);
if($ok===false || PEAR::isError( $ok )) {
echo 'error';