Skip to main content

How to: Open a document using drag-and-drop

  • 3 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 not saved to the Working Directory. 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 as a stream via the RichEditDocumentServer and opened in the ASPxRichEdit control.

View Example

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);
    }
}