Back to Devexpress

How to: Upload a document in the working directory using drag-and-drop

aspnet-119383-components-rich-text-editor-examples-how-to-upload-a-document-in-the-working-directory-using-drag-and-drop.md

latest5.7 KB
Original Source

How to: Upload a document in the working directory using drag-and-drop

  • Dec 17, 2020
  • 2 minutes to read

In some scenarios, it is necessary to load a document stored on a user’s hard disk to the ASPxRichEdit control. The ASPxRichEdit does not support this feature, but you can use a workaround described in this example. Note, that in this example the open document is saved to the Working Directory. If you need to open the document without saving to the Working Directory see this example.The ASPxUploadControl is developed to save client files to the server via a browser. This control includes the Advanced mode that allows users to load documents using drag-and-drop. The ASPxUploadControl’s ExternalDropZoneID property defines which HTML element is used to release files dragged from the client’s hardware. Using this property, you can invoke document loading by dragging it to the ASPxRichEdit control. When the ASPxUploadControl finishes loading the document, it is saved to the ASPxRichEdit’s WorkingDirectory and opened using the client-side command.

csharp
public partial class _Default : System.Web.UI.Page {
    protected void UploadControl_FileUploadComplete(object sender, DevExpress.Web.FileUploadCompleteEventArgs e) {
        if (e.UploadedFile.IsValid) {
            string fileName = e.UploadedFile.FileName;
            e.UploadedFile.SaveAs(MapPath(RichEdit.WorkDirectory) + "\\" + fileName, true);
            e.CallbackData = fileName;
        }
    }
}
aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register assembly="DevExpress.Web.ASPxRichEdit.v16.1, Version=16.1.6.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxRichEdit" tagprefix="dx" %>
<%@ Register assembly="DevExpress.Web.v16.1, Version=16.1.6.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web" tagprefix="dx" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function onUploadControlFileUploadComplete(s, e) {
            if(e.isValid)
                RichEdit.commands.fileOpen.execute(e.callbackData);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <dx:ASPxRichEdit ID="RichEdit" runat="server" WorkDirectory="~\App_Data\WorkDirectory">
        </dx:ASPxRichEdit>

        <dx:ASPxUploadControl ID="UploadControl" runat="server" UploadMode="Auto" AutoStartUpload="True" ClientVisible="false"
            OnFileUploadComplete="UploadControl_FileUploadComplete">
            <AdvancedModeSettings EnableDragAndDrop="True" EnableFileList="False" EnableMultiSelect="False" ExternalDropZoneID="RichEdit" />
            <ClientSideEvents FileUploadComplete="onUploadControlFileUploadComplete" />
            <ValidationSettings AllowedFileExtensions=".doc,.docx,.rtf,.txt" MaxFileSize="4194304" />
        </dx:ASPxUploadControl>
    </div>
    </form>
</body>
</html>
vb
Partial Public Class _Default
    Inherits System.Web.UI.Page

    Protected Sub UploadControl_FileUploadComplete(ByVal sender As Object, ByVal e As DevExpress.Web.FileUploadCompleteEventArgs)
        If e.UploadedFile.IsValid Then
            Dim fileName As String = e.UploadedFile.FileName
            e.UploadedFile.SaveAs(MapPath(RichEdit.WorkDirectory) & "\" & fileName, True)
            e.CallbackData = fileName
        End If
    End Sub
End Class
aspx
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<%@ Register assembly="DevExpress.Web.ASPxRichEdit.v16.1, Version=16.1.6.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxRichEdit" tagprefix="dx" %>
<%@ Register assembly="DevExpress.Web.v16.1, Version=16.1.6.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web" tagprefix="dx" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function onUploadControlFileUploadComplete(s, e) {
            if(e.isValid)
                RichEdit.commands.fileOpen.execute(e.callbackData);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <dx:ASPxRichEdit ID="RichEdit" runat="server" WorkDirectory="~\App_Data\WorkDirectory">
        </dx:ASPxRichEdit>

        <dx:ASPxUploadControl ID="UploadControl" runat="server" UploadMode="Auto" AutoStartUpload="True" ClientVisible="false"
            OnFileUploadComplete="UploadControl_FileUploadComplete">
            <AdvancedModeSettings EnableDragAndDrop="True" EnableFileList="False" EnableMultiSelect="False" ExternalDropZoneID="RichEdit" />
            <ClientSideEvents FileUploadComplete="onUploadControlFileUploadComplete" />
            <ValidationSettings AllowedFileExtensions=".doc,.docx,.rtf,.txt" MaxFileSize="4194304" />
        </dx:ASPxUploadControl>
    </div>
    </form>
</body>
</html>