[CLOSED] Error when uploading file to httphandler

  1. #1

    [CLOSED] Error when uploading file to httphandler

    This is related to my other thread about posting file to DirectMethod http://forums.ext.net/showthread.php...g-DirectMethod . I have now decided to upload file to httphandler instead. My problem is that I am not able to send a response back to the client from my httphandler. I am getting a javascript error when decoding the response. I have struggled with this for hours now...

    FileUpload.aspx
    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="FileUpload.aspx.vb" Inherits="ExtSandbox.FileUpload" %>
    
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <script runat="server">
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            Ext.Net.ResourceManager.RegisterControlResources(Of Ext.Net.FileUploadField)()
            Me.resourceMgr.RegisterIcon(Ext.Net.Icon.Add)
            Me.resourceMgr.RegisterIcon(Ext.Net.Icon.PageWhiteAdd)
            Me.resourceMgr.RegisterIcon(Ext.Net.Icon.Disk)
        End Sub
      
    </script>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
    
    
            // Compressor
            Ext.ux.UploadWindow = Ext.extend(Ext.Window, {
                title: 'Upload File',
                iconCls: 'icon-pagewhiteadd',
                width: 450,
                height: 110,
                modal: true,
                closeAction: 'close',
                form: null,
                border: false,
                submitUrl: '/ExtSandbox/FileUploadHandler.ashx',
                layout: 'fit',
    
    
                initComponent: function () {
                    this.form = new Ext.form.FormPanel({
                        layout: 'form',
                        frame: true,
                        fileUpload: true,
                        url: this.submitUrl,
                        items: [{
                            xtype: 'fileuploadfield',
                            fieldLabel: 'File Upload',
                            msgTarget: 'side',
                            anchor: '0',
                            iconCls: 'icon-add',
                            buttonText: ''
                        }
                        ]
                    });
    
    
                    Ext.apply(this, {
                        items: this.form,
                        buttons: [{
                            text: 'Upload File',
                            iconCls: 'icon-disk',
                            formBind: true,
                            handler: this.uploadFile,
                            scope: this
                        }, {
                            text: 'Cancel',
                            scope: this,
                            handler: this.onCancel
                        }]
                    });
    
    
                    Ext.ux.UploadWindow.superclass.initComponent.call(this);
                },
    
    
                uploadFile: function () {
                    this.form.getForm().submit({
    
    
                    });
                },
    
    
                onCancel: function () {
                    this.closeAction();
                }
    
    
            });
    
    
            Ext.reg('uploadwindow', Ext.ux.UploadWindow);
    
    
    
    
            function showWindow() {
                var win = new Ext.ux.UploadWindow({});
                win.show();
            }
    
    
          
        </script>
        <form id="aspnetForm" runat="server">
        <ext:ResourceManager runat="server" ID="resourceMgr" Theme="Slate" ScriptMode="Debug">
        </ext:ResourceManager>
        <ext:Button runat="server" ID="btnShow" Text="Upload File">
            <Listeners>
                <Click Fn="showWindow" />
            </Listeners>
        </ext:Button>
        
        </form>
    </body>
    </html>
    FileUploadHandler.ashx
    Imports System.Web
    Imports System.Web.Services
    
    
    Public Class FileUploadHandler
        Implements System.Web.IHttpHandler
    
    
        Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
            context.Response.Cache.SetCacheability(HttpCacheability.NoCache)
    
    
            'handle file here
    
    
            'send back success response
            context.Response.ContentType = "application/json"
            context.Response.ContentEncoding = Encoding.UTF8
            Dim returnData = New With {.success = True, .msg = "Successful"}
    
    
            context.Response.Write(Ext.Net.JSON.Serialize(returnData))
    
    
        End Sub
    
    
        ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
            Get
                Return False
            End Get
        End Property
    
    
    End Class
    Last edited by Daniil; Nov 09, 2011 at 1:56 PM. Reason: [CLOSED]
  2. #2
    Hi,

    XmlHttpRequest cannot transfer a file therefore ExtJS uses hidden iframe as transport (post file through the hidden iframe)
    To decode response you have to wrap it by 'textarea' tags in the server side because response is interpreted as html by iframe (ExtJS will extract response frrom DOM tree of html)
    context.Response.Write("<textarea>"+Ext.Net.JSON.Serialize(returnData)+"</textarea>");
    You can see it in DirectResponse class also
  3. #3
    Quote Originally Posted by Vladimir View Post
    Hi,

    XmlHttpRequest cannot transfer a file therefore ExtJS uses hidden iframe as transport (post file through the hidden iframe)
    To decode response you have to wrap it by 'textarea' tags in the server side because response is interpreted as html by iframe (ExtJS will extract response frrom DOM tree of html)
    context.Response.Write("<textarea>"+Ext.Net.JSON.Serialize(returnData)+"</textarea>");
    You can see it in DirectResponse class also
    Yes. I see that in the javascript file for Ext.Ajax.doFormUpload. I actually tried adding textarea before but whatever I return gets wrapped in a PRE tag. What content type can I suppose to set the response to? I tried 'text/plain' and 'text/json'. Both did not work. This is the json it tries to decode:

    <PRE>&lt;textarea&gt;{"success":true,"msg":"Succes sful"}&lt;/textarea&gt;</PRE>

    I also tried wrapping the textarea text with Server.HTMLEncode.
  4. #4
    Quote Originally Posted by jchau View Post
    Yes. I see that in the javascript file for Ext.Ajax.doFormUpload. I actually tried adding textarea before but whatever I return gets wrapped in a PRE tag. What content type can I suppose to set the response to? I tried 'text/plain' and 'text/json'. Both did not work. This is the json it tries to decode:

    <PRE>&lt;textarea&gt;{"success":true,"msg":"Succes sful"}&lt;/textarea&gt;</PRE>

    I also tried wrapping the textarea text with Server.HTMLEncode.
    Ok, i feel like an idiot now. I should set content type to 'text/html'.
  5. #5
    Please clarify can we mark the tread as closed?
  6. #6
    Quote Originally Posted by Daniil View Post
    Please clarify can we mark the tread as closed?
    Yes. You can mark it as closed. Solution was to wrap with textarea and set contenttype to 'text/html' and not 'application/json'.

Similar Threads

  1. [CLOSED] How to identify upload file size before uploading in IE?
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 29, 2012, 5:54 PM
  2. [CLOSED] Trouble when uploading with Firefox or Crome
    By smart+ in forum 1.x Legacy Premium Help
    Replies: 14
    Last Post: Oct 21, 2011, 6:49 PM
  3. [CLOSED] Uploading files
    By r_honey in forum 1.x Legacy Premium Help
    Replies: 27
    Last Post: Aug 04, 2010, 6:20 PM
  4. Replies: 2
    Last Post: Jun 30, 2010, 5:00 AM
  5. [CLOSED] Error while trying to open a file (.jpg,pdf,doc, etc.)
    By Etisbew in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 25, 2009, 8:23 AM

Posting Permissions