This example allows users to drag files to the Rich Text Editor to open them in the control. In the example, the work directory is not specified and Open and Save As operations are unavailable.
The Upload Control allows users to upload files from a client computer and save them on the server. Set the control's EnableDragAndDrop property to true
to enable drag and drop support. Assign the ASPxRichEdit control's identifier to the Upload control's ExternalDropZoneID property to upload files that users drag in the Rich Text Editor.
Once the file upload operation is completed, use the RichEditDocumentServer to save the file's content to a stream. Pass the stream to the Open method to open this document in the Rich Text Editor.
Files to Review
- Default.aspx (VB: Default.aspx)
- Default.aspx.cs (VB: Default.aspx.vb)
Documentation
- How to upload a document in the working directory using drag-and-drop
- File Upload - Drag and Drop
- Rich Text Editor - Document Management
More Examples
Example Code
ASPx<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register assembly="DevExpress.Web.ASPxRichEdit.v16.1, Version=16.1.17.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxRichEdit" tagprefix="dx" %>
<%@ Register assembly="DevExpress.Web.v16.1, Version=16.1.17.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.PerformCallback(e.callbackData);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<dx:ASPxRichEdit ID="RichEdit" runat="server" OnCallback="RichEdit_Callback">
</dx:ASPxRichEdit>
<dx:ASPxUploadControl ID="UploadControl" runat="server" UploadMode="Auto" AutoStartUpload="True" ClientVisible="false" UploadStorage="FileSystem"
OnFileUploadComplete="UploadControl_FileUploadComplete">
<AdvancedModeSettings EnableDragAndDrop="True" EnableFileList="False" EnableMultiSelect="False" ExternalDropZoneID="RichEdit" />
<FileSystemSettings UploadFolder="~\App_Data\Uploads" />
<ClientSideEvents FileUploadComplete="onUploadControlFileUploadComplete" />
<ValidationSettings AllowedFileExtensions=".doc,.docx,.rtf,.txt" MaxFileSize="4194304" />
</dx:ASPxUploadControl>
</div>
</form>
</body>
</html>
C#using DevExpress.Web.Office;
using DevExpress.XtraRichEdit;
using System.IO;
public partial class _Default : System.Web.UI.Page {
string uploadedDocId = "uploadedDocId";
protected void UploadControl_FileUploadComplete(object sender, DevExpress.Web.FileUploadCompleteEventArgs e) {
if(e.UploadedFile.IsValid)
e.CallbackData = e.UploadedFile.FileNameInStorage;
}
protected void RichEdit_Callback(object sender, DevExpress.Web.CallbackEventArgsBase e) {
string path = MapPath(UploadControl.FileSystemSettings.UploadFolder) + "\\" + e.Parameter;
using(MemoryStream stream = new MemoryStream()) {
using(RichEditDocumentServer server = new RichEditDocumentServer()) {
server.LoadDocument(path);
server.SaveDocument(stream, DocumentFormat.OpenXml);
stream.Position = 0;
DocumentManager.CloseDocument(uploadedDocId);
RichEdit.Open(uploadedDocId, DocumentFormat.OpenXml, () => stream);
}
}
File.Delete(path);
}
}