[Beta 1] Saki's FileTree for Ext 2.0

**BrainDrain** · 29 May 2009 6:00 AM

Hi
I'm trying to implement ASP.NET server side app for filetree & upload(panel)
At first steps I've created HttpHandler that successfully handles post requests from client and responds with json object. It uploads files correctly but synchronously (client is waiting for handler response), enableProgress=false.
After that I've created HttpModule that catches upload requests and initiates uploading in backgroung. It works with HttpHandler fine, client receives progress (changed in web session cache by HttpModule background thread) from HttpHandler. The problem is: when I abort uploading (of large file, for ex.) - uploading keep processing. I couldn't catch request cancelling on server (HttpPostedFile object stream is alive, request object has no disconnecting indicators) without some special command request from client. Am I right?
And one more thing. singleUpload = true caused request timed out exceptions on request object operations (in ASP.NET), even if posting files is very small. Could some one explain that? (and how to fix that?)
TIA

**jsakalos** · 29 May 2009 6:47 AM

Sorry, I'm on Linux and I don't use M$ "products" except hardware ones.

**BrainDrain** · 30 May 2009 5:32 AM

How you aborting background uploading process in your php frontend? Maybe your answer can help me.
+ a little 'bugs'
- right click menu (with embedded upload panel) doesn't appear in opera 9
- 'remove all uploads' button removes 'add' button from toolbars (instead of removing only records)
- 'add upload' button sometimes works only after 1-2-3 clicks (in IE, for ex.), and it won't work in Opera at all

**jsakalos** · 30 May 2009 6:16 AM

Originally Posted by BrainDrain

How you aborting background uploading process in your php frontend? Maybe your answer can help me.

I do nothing on server. Just stop() on hidden iframe at client.

+ a little 'bugs'
- right click menu (with embedded upload panel) doesn't appear in opera 9

It's Opera problem - they have blocked context menus.

- 'remove all uploads' button removes 'add' button from toolbars (instead of removing only records)
- 'add upload' button sometimes works only after 1-2-3 clicks (in IE, for ex.), and it won't work in Opera at all

These are BrowseButton bugs - I won't use it in the next version.

**romulodelazzari** · 3 Jun 2009 7:03 AM

Hi Saki,

I'm using only the UploadPanel in my application and I need to pass a parameter when I click the upload button, I'm trying to use the baseParams without success, because in php this parameter don't exist.

Here is my code:

PHP Code:


meuUploadPanel = new Ext.ux.UploadPanel({
    buttonsAt:'tbar',
     id:'uppanel',
      url:'page.php',
    path:'root',
    maxFileSize:1048576,
    listeners:{
        allfinished: function(){
            anexoSeStore.reload({
                params:{
                    hidden_tt: numeroTTSelecionado
                }
            });
        },
        beforeallstart: function(){
            this.baseParams = {
                hidden_tt: '1234'
            }
        }
    }
});

Thanks for any help

**khurri.saleem** · 17 Jun 2009 3:19 AM

Hello Saki,

I hope every one out there must have experienced the issue of browse button with IE8. However your example online works but a simple example locally dont works at all.

I need help with IE 8 and i am really stuck please help !

PHP Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css"/> 
 
 
<script type="text/javascript" src="Ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="Ext/ext-all.js"></script>
 
<script type="text/javascript" src="js/Ext.ux.FileUploader.js"></script>
<script type="text/javascript" src="js/Ext.ux.UploadPanel.js"></script>
<script type="text/javascript" src="js/Ext.ux.form.BrowseButton.js"></script>
</head>
<body>
<script language="javascript" type="text/javascript">
// window with uploadpanel
var win = new Ext.Window({
width: 180
, minWidth: 165
, id: 'winid'
, height: 220
, minHeight: 200
, layout: 'fit'
, border: false
, closable: false
, title: 'UploadPanel'
, iconCls: 'icon-upload'
, items: [{
xtype: 'uploadpanel'
, buttonsAt: 'tbar'
, id: 'uppanel'
, path: 'root'
, maxFileSize: 1048576
 
}]
});
win.show.defer(500, win);
</script> 
</body>
</html>

**jsakalos** · 17 Jun 2009 11:36 AM

First, remove the doctype.

I will replace BrowseButton with Ext native file input in the next release - some time after Ext 3.0 final is released.

**deemonas** · 24 Jun 2009 6:41 AM

Hi all,

I just tried to run it under 3.0rc2.

The problem is that Ext.ux.UploadPanel is just a Ext.Panel rendered in place of the Ext.menu.BaseItem.

In this case Ext3.0 DOES NOT RENDER toolbar for the Panel. Try this under Ext 2.x and Ext 3.0:

Code:

viewport = new Ext.Viewport( {
    layout: 'absolute',
    renderTo: Ext.getBody(),
    items : 
    [
    {
    region: 'center',
    html: 'HA HA',
    tbar: 
         new Ext.Toolbar
         ({
                items:
                 [
                {
                    text: 'Managers',
                    iconCls: 'bmenu',
                    // Menus can be built/referenced by using nested menu config objects
                    menu : 
                    {
                        items: 
                        [
                            {text: 'Template Manager' },
                            {text: 'Site &amp; Page Manager'},
                            {
                                xtype: 'panel',
                                id: 'mypanel',
                                html: 'you see just blue line and no button. Ugh.',
                                tbar: [{text: 'button ???'}]
                            }
                        ]    
                       }
                   }
                   ]
        })
    }
    ]
});

It might be even a bug in EXT 3.0

To solve it I made 2 small changes
1. in Ext.ux.UploadPanel.onRender
add one line to force toolbar get rendered:

Code:

onRender:function() {
        // call parent
        Ext.ux.UploadPanel.superclass.onRender.apply(this, arguments);

        // save useful references
        var tb = 'tbar' === this.buttonsAt ? this.getTopToolbar() : this.getBottomToolbar();
        
        this.addBtn = Ext.getCmp(tb.items.first().id);
        this.uploadBtn = Ext.getCmp(tb.items.itemAt(1).id);
        this.removeAllBtn = Ext.getCmp(tb.items.last().id);
        //FIXME ExtJs 3.0 does not render it automatically !!!
        // f*ck knows why, so force toolbar to be rendered
        tb.doLayout(false,true);
    }

2. Ext 3.0 uses a bit different HTML for buttons, ajust code in
Ext.ux.form.BrowseButton.onRender

use

Code:

this.buttonCt = this.el.child('.x-btn-mc em');

instead of

Code:

this.buttonCt = this.el.child('.x-btn-center em');

At least it worked for me.

**jsakalos** · 24 Jun 2009 1:39 PM

Thank you for the data - I'll get back to it when I'll port it to Ext 3.0.

**Phatnine** · 26 Jun 2009 5:24 AM

Hello

Good job Saki on this great extension.

I'm using your extension in a webGIS project. I want users to be able to upload their GIS data into a temporary folder. The problem is I can't seem to filter the file extension. I just want GML, SHP, TIF, etc, but not EXE or ZIP... Is there a config option that lets me filter the file extensions? Is there a class documentation?

Also, how can I see the response from my php backend? I need to see it because I have a ''Cannot decode JSON object'' when I try uploading a file.

The window looks like this:

Code:

            var win = new Ext.Window({
                width:400,
                height:300,
                autoScroll:true,        
                title: 'Add a layer',
                id:'window',
                listeners:{
                    hide:function(){
                        gpxButton.enable();
                    }
                },
                items:[{
                    xtype:'uploadpanel'
                    ,buttonsAt:'tbar'
                    ,name:'uppanel'
                    ,iconCls:'icon-upload'
                    ,id:'uppanel'
                    ,url:'filetree.php'
                    ,maxFileSize:1048576
                    ,enableProgress:false
                    ,baseParams:[{
                        filename:'uppanel',
                        path: 'root'
                    }]
                }]
            })            
            win.show();

And my php backend is:

PHP Code:


<?php
if ($_FILES["uppanel"]["error"] > 0)
  {
  echo "Error: " . $_FILES["uppanel"]["error"] . "<br />";
  }
else
  {
  echo "Upload: " . $_FILES["uppanel"]["name"] . "<br />";
  echo "Type: " . $_FILES["uppanel"]["type"] . "<br />";
  echo "Size: " . ($_FILES["uppanel"]["size"] / 1024) . " Kb<br />";
  echo "Stored in: " . $_FILES["uppanel"]["tmp_name"];
  }
?>

Thank you,

Maxime

[Beta 1] Saki's FileTree for Ext 2.0

Thread Tools

Search Thread

Display

ASP.NET

ASP.NET

Issue with IE8

Issue with IE8

To help port it to Ext 3.0

To help port it to Ext 3.0