CODEWITHSUNDEEP
javascriptextjs
Amir
Amir

Reputation: 69

Upload File Using Extjs

Hi I have written a code for uploading a file and to insert into DB, so I need to get the bytes of the uploaded file.

This is my code:

{
  xtype: 'filefield',
  id: 'AttachData',
  name: 'file-path',
  emptyText: 'Upload the document...',
  margin: "15 0 0 0",
  buttonText: 'Browse',
  msgTarget: 'side',
  allowBlank: false,
  anchor: '100%',
  disabled: false
}, {
  xtype: 'button',
  text: 'Upload',
  margin: "15 0 0 10",
  handler: function() {
    var form = this.up('form').getForm();
    if (form.isValid()) {
      form.submit({
        url: '../UploadAttachment.aspx',
        headers: {
          'Content-type': 'application/json;charset=utf-8'
        },
        waitMsg: 'Uploading your file...',
        success: function(response, action) {
          isUploded = true;
          msg('Success', 'Processed file "' + action.result.file + '" on the server');
        },
        failure: function(response, action) {
          console.log(action);
          Ext.Msg.alert('Failed', response.message ? action.result.message : 'No response');
        }
      });
    }
  }
},

anyone help me on this concept. Need to get the bytes of the file uploaded.

Upvotes: 1

Views: 2292

Answers (1)

Puneet Chawla
Puneet Chawla

Reputation: 6009

When your request will go to "UploadAttachment.aspx" page, Just create a function there to get uploaded file details and specify the function name with URL. So that function easily call to server side or in aspx page.

You can get complete details of uploaded files by using below code.

HttpPostedFile uploadFile = Context.Request.Files["file-path"];

Now you can get all information about uploaded file in uploadFile variable.

Ex. 

uploadFile.InputStream
uploadFile.FileName
and all others.

Default.aspx (Coding)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="Libraries/ext-all.js"></script>
    <script src="Libraries/ext-all-debug.js"></script>
    <link href="Libraries/ext-theme-crisp-all-debug.css" rel="stylesheet" />

    <script type="text/javascript">

        Ext.onReady(function () {
            var window = new Ext.Window({
                id: 'grdWindow',
                width: 400,
                items: [
                    {
                        xtype: 'form',
                        renderTo: Ext.getBody(),
                        items: [
                            {
                                xtype: 'filefield',
                                id: 'AttachData',
                                name: 'file-path',
                                emptyText: 'Upload the document...',
                                margin: "15 0 0 0",
                                buttonText: 'Browse1',
                                msgTarget: 'side',
                                allowBlank: false,
                                anchor: '100%',
                                disabled: false
                            }, {
                                xtype: 'button',
                                text: 'Upload',
                                handler: function () {
                                    var form = this.up('form').getForm();
                                    if (form.isValid()) {
                                        form.submit({
                                            url: 'Default.aspx',
                                            headers: {
                                                'Content-type': 'application/json;charset=utf-8'
                                            },
                                            waitMsg: 'Uploading your file...',
                                            success: function (response, action) {
                                                isUploded = true;
                                                msg('Success', 'Processed file "' + action.result.file + '" on the server');
                                            },
                                            failure: function (response, action) {
                                                console.log(action);
                                                Ext.Msg.alert('Failed', response.message ? action.result.message : 'No response');
                                            }
                                        });
                                    }
                                }
                            }
                        ]
                    }
                ]
            }).show();
        });

        </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    </div>
    </form>
</body>
</html>

Default.aspx.cs (Handler)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        HttpPostedFile fileUpload =  HttpContext.Current.Request.Files["file-path"];
        if (fileUpload != null)
        { 
            //You can get here anything from fileUpload
        }
    }

}

Upvotes: 1

Related Questions