Upload control with Ajax.


We can achieve this by using iframe. (Its not AJAX but works with AJAX)
We need to create two pages uploadAttachment.aspx and default.aspx.
default.aspx is main page and uploadAttachment.aspx is supporting page.

 UploadAttachment.aspx
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="UploadAttachment.aspx.vb"
    Inherits="RNDWeb.UploadAttachment" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form method="POST" target="_self" enctype="multipart/form-data" action="UploadAttachment.aspx"
    runat="server">
    <div>
        <asp:FileUpload ID="fuAttachment" runat="server" />
        <asp:Button ID="btnUpload" runat="server" Text="UPLOAD" Style="visibility: hidden;" />
        <asp:Button ID="btnRemove" runat="server" Visible="false" Text="REMOVE" />
        <asp:Label ID="lblFileName" runat="server" Visible="false" />
        <input type="text" id="txtSuccess" value="-1" />
    </div>
    </form>
</body>
</html>


UploadAttachment.aspx.vb
 Partial Public Class UploadAttachment
    Inherits System.Web.UI.Page
    Dim sPath As String = String.Empty
    Private Const sValidExtensions As String = " .jpg, .jpeg, .gif, .doc, .docx, .xls, .xlsx .pdf"
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Try
            fuAttachment.Attributes.Add("onchange", "javascript: document.getElementById('" + btnUpload.ClientID + "').click();")
            Dim iSuccess As Integer = 0


            If Request.Files.Count = 1 Then
                Session("init") = "0"
                sPath = "C:\Test\RNDWeb\RNDWeb\Temp\" + Session.SessionID
                If Not System.IO.Directory.Exists(sPath) Then
                    System.IO.Directory.CreateDirectory(sPath)
                End If

                Dim sFileExtention As String = System.IO.Path.GetExtension(Request.Files(0).FileName)
                Dim sFileName As String = String.Empty

                sFileName = System.IO.Path.GetFileNameWithoutExtension(Request.Files(0).FileName) + sFileExtention
                If sValidExtensions.Contains(sFileExtention) Then

                    If CInt(Request.Files(0).ContentLength / 1024) <= 200 Then

                        Request.Files(0).SaveAs(sPath + "\" + sFileName)
                        'txtStatus.Text = "SUCCESS : " + sPath + "\" + sFileName

                        fuAttachment.Visible = False
                        btnUpload.Visible = False
                        btnRemove.Visible = True
                        lblFileName.Visible = True
                        lblFileName.Text = sFileName
                        iSuccess = 1
                    Else
                        lblFileName.Visible = True
                        lblFileName.Text = "ERROOR : file > 200 KB"
                        iSuccess = 0
                    End If
                Else
                    lblFileName.Visible = True
                    lblFileName.Text = "ERROR : File format should be : " + sValidExtensions
                    iSuccess = 0
                End If

                ScriptManager.RegisterStartupScript(Me, Me.GetType, "test", "document.getElementById('txtSuccess').value = '" + iSuccess.ToString + "';", True)

            End If


        Catch ex As Exception

        End Try
    End Sub

    Private Sub btnRemove_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnRemove.Click

        sPath = "C:\Gaurav\AshleyService\RNDWeb\RNDWeb\Temp\" + Session.SessionID

        System.IO.File.Delete(sPath + "\" + lblFileName.Text)


        fuAttachment.Visible = True
        btnUpload.Visible = True
        btnRemove.Visible = False
        lblFileName.Visible = False

        ScriptManager.RegisterStartupScript(Me, Me.GetType, "test", "document.getElementById('txtSuccess').value = '-100';", True)


    End Sub
End Class

 Default.aspx
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="RNDWeb._Default" %>

<!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">

    <script language="javascript" type="text/javascript">

        function iUploadFrameLoad(iframe) {
            if (iframe) {
                var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
                var element = innerDoc.getElementById("txtSuccess");
                alert(element.value);
            }
        }
   
    </script>

    <title>TRY</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <iframe name="iUploadFrame" id="iUploadFrame" src="UploadAttachment.aspx" frameborder="0"
        width="1500" height="50" onload="iUploadFrameLoad(this);"></iframe>
    <iframe name="iUploadFrame" id="Iframe1" src="UploadAttachment.aspx" frameborder="0"
        width="1500" height="50" onload="iUploadFrameLoad(this);"></iframe>
    <iframe name="iUploadFrame" id="Iframe2" src="UploadAttachment.aspx" frameborder="0"
        width="1500" height="50" onload="iUploadFrameLoad(this);"></iframe>
    <iframe name="iUploadFrame" id="Iframe3" src="UploadAttachment.aspx" frameborder="0"
        width="1500" height="50" onload="iUploadFrameLoad(this);"></iframe>
    <asp:UpdatePanel ID="pnlMain" runat="server">
        <ContentTemplate>
            <asp:Label ID="lblMessage" runat="server" />
            <asp:Button ID="btnUploadComplted" runat="server" Text="SUBMIT" OnClick="btnUploadCompleted_Click" />
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="btnUploadComplted" EventName="Click" />
        </Triggers>
    </asp:UpdatePanel>
    </form>
</body>
</html>




Comments

Post a Comment

Popular posts from this blog

Dataverse D365 REST Web Api using client secret From Postman or Power Automate desktop (PAD) .

Image
  How to call Dataverse REST Web Api from postman or power automate desktop. Note:  <Value>: Either custom value or value from previous steps. What do we need? - Postman:  Download Postman | Get Started for Free - PAD:  Install Power Automate - Power Automate | Microsoft Learn - D365 environment URL - O365 Entra/*Global admin.   ----X---- Let's get started. Register an app using MS Entra Platform:  Go to: https://entra.microsoft.com/ -> Identity -> Applications -> App registrations -> New registration Official link: https://learn.microsoft.com/en-us/entra/identity-platform/quickstart-register-app   Name: <Provide Name> Supported account types: Single tenant. Redirect URI: https://localhost Update Manifest file: Set oauth2AllowImplicitFlow to true. Grant Permission to access Dataverse (AKA Dynamic CRM) API Permissions -> "+ Add a permission" "User_impersonate" -> "Add permissions" Grant API Permissions (Note: Only...
Read more

Chrome Extension to auto refresh Power BI report.

Chrome Extension to auto refresh Power BI report. Requirement  :  Power BI report will be visible on monitor/projector and team will monitor it live. Report needs to refresh on it's own every 5 seconds. Power BI : We created report with SQL direct query so report shows current data when accessed or clicked refresh on report. https://docs.microsoft.com/en-us/power-bi/desktop-use-directquery Solutions : #1 :  Refresh full page every x seconds https://chrome.google.com/webstore/detail/auto-refresh/ifooldnmmcmlbdennkpdnlnbgbmfalko?hl=en-US Issues with above solution : Extension refreshes full page (browser refresh) so screen becomes blank for second(s). If user want to click on report and see the data, it can cause issue if page refreshes at same time. #2 : Created new chrome plug in / Extension so it will click refresh button after N (seconds) interval, so it will only make AJAX call and refresh report data (not entire page). https://chrome.google.c...
Read more

How to call SharePoint online rest APIs using postman?

How to call SharePoint online rest APIs using postman? Step 1: Install Postman:  https://www.getpostman.com Step 2: Generate Client ID and Client Secret               Use below URL (Update Initial part):               <SPO Site Collection URL>/_layouts/15/appregnew.aspx               Note :                You can visit below URL to see all registered apps.                 <SPO Site Collection URL>/_layouts/15/AppPrincipals.aspx Step 3: Grant correct permissions to app and authorize it.                Use below URL (Update Initial part) : <SPO Site Collection URL>/_layouts/15/appinv.aspx Example of  permissions XML : Full control on site collection (Please do not change site collection URL or any ...
Read more