Skip to main content

​
Overview

This example demonstrates how to set up a basic OnlyOffice document editor with file upload functionality. Users can upload a document and edit it directly in the browser.

​
Complete Implementation

1

Register the Control

Add the OnlyOffice Editor control registration to your ASPX page:
Default.aspx
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" 
         AutoEventWireup="true" CodeBehind="Default.aspx.cs" 
         Inherits="OnlyOfficeControl._Default" ValidateRequest="false" %>
<%@ Register Src="~/Controls/OnlyOfficeEditor/OnlyOfficeEditor.ascx" 
             TagPrefix="oo" TagName="Editor" %>
The ValidateRequest="false" attribute is required to allow document content submission.
2

Add the Page Markup

Create the upload interface and editor container:
Default.aspx
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <style>
        iframe {
            height: 700px;  
        }
    </style>
    <link rel="stylesheet" href="<%= ResolveUrl("~/Content/WebEditor.css") %>" />

    <div class="we">
        <section class="we-toolbar" aria-label="Actions">
            <div class="we-toolbar__left">
                <asp:FileUpload ID="fuFile" runat="server" 
                                CssClass="form-control we-input" />
            </div>
            <div class="we-toolbar__right">
                <asp:Button ID="btnUpload" runat="server" 
                            Text="Upload and Open" 
                            CssClass="btn we-btn we-btn-accent" 
                            OnClick="btnUpload_Click" />
            </div>
            <div class="we-toolbar__status">
                <asp:Literal ID="litStatus" runat="server" />
            </div>
        </section>

        <div class="we-layout">
            <main class="we-main" aria-label="Editor">
                <div class="we-surface">
                    <div class="we-surface__head">
                        <div class="we-surface__title">Document</div>
                        <div class="we-surface__meta">OnlyOffice Editor View</div>
                    </div>
                    <oo:Editor ID="docEditor" runat="server" />
                </div>
            </main>
        </div>
    </div>
</asp:Content>
3

Implement the Code-Behind

Handle file upload and initialize the editor:
Default.aspx.cs
using System;
using System.IO;
using System.Web.UI;

namespace OnlyOfficeControl
{
    public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            // Optionally load a default document on first visit
            if (!IsPostBack)
            {
                string sampleFilePath = Server.MapPath("~/doc.docx");
                if (File.Exists(sampleFilePath))
                {
                    byte[] fileBytes = File.ReadAllBytes(sampleFilePath);
                    docEditor.SetDocumentFromBytes(fileBytes, "doc.docx");
                }
            }
        }

        protected void btnUpload_Click(object sender, EventArgs e)
        {
            if (!fuFile.HasFile)
            {
                litStatus.Text = "<span class='text-warning'>Please select a file.</span>";
                return;
            }

            // Load the uploaded document into the editor
            docEditor.SetDocumentFromBytes(fuFile.FileBytes, fuFile.FileName);
            litStatus.Text = "<span class='text-success'>Document loaded successfully!</span>";
        }
    }
}
4

Configure the Editor Control

Set the OnlyOffice server URL and JWT secret in your control:
OnlyOfficeEditor.ascx.cs
public partial class OnlyOfficeEditor : UserControl
{
    // URL of the OnlyOffice Document Server API
    public string OnlyOfficeApiUrl { get; set; } = 
        "https://your-server.com/web-apps/apps/api/documents/api.js";

    // JWT secret key (must match your OnlyOffice server configuration)
    public string JwtSecret { get; set; } = "your_secret_key";

    // Public base URL for callbacks
    public string PublicBaseUrl { get; set; } = "https://your-app.com";

    // Editor mode: "edit" or "view"
    public string Mode { get; set; } = "edit";

    // Editor language
    public string Lang { get; set; } = "en";
}

​
Key Methods

​
SetDocumentFromBytes

Loads a document into the editor from a byte array: 
docEditor.SetDocumentFromBytes(byte[] data, string fileName)
Parameters:
  • data - The document content as a byte array
  • fileName - The original filename (used to determine document type)
Example: 
byte[] fileBytes = File.ReadAllBytes("document.docx");
docEditor.SetDocumentFromBytes(fileBytes, "document.docx");

​
SetDocumentFromFile

Loads a document from a file path on the server: 
docEditor.SetDocumentFromFile(string serverFilePath, string displayName = null)
Example: 
string path = Server.MapPath("~/Documents/sample.docx");
docEditor.SetDocumentFromFile(path, "Sample Document");

​
Supported File Formats

Word Documents

  • .docx
  • .doc
  • .odt
  • .rtf
  • .txt

Spreadsheets

  • .xlsx
  • .xls
  • .ods
  • .csv

Presentations

  • .pptx
  • .ppt
  • .odp

​
Styling

The example uses the included WebEditor.css stylesheet for a modern, professional appearance: 
:root {
    --we-bg: #f4f6f8;
    --we-surface: #ffffff;
    --we-accent: #7c9383;
    --we-border: #e2e8f0;
}

.we {
    background: var(--we-bg);
    border: 1px solid var(--we-border);
    border-radius: 16px;
    padding: 16px;
}
The CSS is responsive and adapts to mobile devices automatically.

​
Error Handling

protected void btnUpload_Click(object sender, EventArgs e)
{
    try
    {
        if (!fuFile.HasFile)
        {
            litStatus.Text = "<span class='text-warning'>Please select a file.</span>";
            return;
        }

        // Validate file size (example: 10MB limit)
        if (fuFile.FileBytes.Length > 10 * 1024 * 1024)
        {
            litStatus.Text = "<span class='text-danger'>File too large. Maximum 10MB.</span>";
            return;
        }

        docEditor.SetDocumentFromBytes(fuFile.FileBytes, fuFile.FileName);
        litStatus.Text = "<span class='text-success'>Document loaded!</span>";
    }
    catch (Exception ex)
    {
        litStatus.Text = $"<span class='text-danger'>Error: {ex.Message}</span>";
    }
}

​
Next Steps

View Mode

Learn how to display documents in read-only mode

PDF Export

Export edited documents to PDF format

Custom Styling

Customize the editor appearance

API Reference

View complete API documentation

Build docs developers (and LLMs) love

Get started for freeTalk to us