TL;DR: Auto open, edit, and save Phrase paperwork in React with Syncfusion’s Doc Editor, integrating AWS S3 for safe storage. Discover S3 setup, ASP.NET Core API, and React parts, together with File Supervisor and toolbar customization, for seamless cloud doc workflows.
Leveraging a dependable cloud storage resolution considerably enhances doc entry, sharing, safety, and efficiency in a React software. Nonetheless, organising and integrating cloud storage isn’t all the time simple; it requires cautious configuration to make sure effectivity and safety. On this weblog, we are going to discover easy methods to obtain seamless performance utilizing Amazon S3 (AWS) Storage.
With Syncfusion® React Doc Editor, you’ll be able to effortlessly open, edit, and auto-save Phrase paperwork whereas using Amazon S3 (AWS) for safe file storage and retrieval.
We’ll study key functionalities resembling auto-save, application-level file administration for Amazon S3 utilizing Syncfusion® FileManager, and a customizable toolbar to boost your doc enhancing expertise.
Setting Up Amazon S3(AWS)
Amazon S3 (Easy Storage Service) is a scalable, safe, and extremely out there cloud storage resolution from AWS, splendid for internet functions, backups, and content material supply.
Establishing Amazon S3 includes three key steps:
Step 1: Create an S3 Bucket
Check in to the AWS Administration Console and navigate to Amazon S3 through the AWS companies menu. Click on Create bucket, then present a novel identify, choose a area, and configure the public entry settings based mostly in your necessities. Lastly, click on Create bucket to finish the method.
Step 2: Configure Bucket Permissions
Open your newly created S3 bucket and go to the Permissions tab. Configure the Bucket Coverage to regulate learn/write entry and regulate CORS settings if needed.
Step 3: Retrieve Entry Credentials
Navigate to the IAM service and create a brand new IAM person with Programmatic entry. Connect the AmazonS3FullAccess coverage or customise permissions as wanted. Save the Entry Key ID and Secret Entry Key for authentication in your software.
Establishing the ASP.NET Core backend (Server-Aspect)
Step 1: Create a brand new ASP.NET Core internet API challenge
Create an ASP.NET Core Net API challenge utilizing Visible Studio or the .NET CLI. Subsequent, set up the AWSSDK.S3 NuGet package deal to allow interplay with Amazon S3, which permits for file uploads, downloads, and storage administration.
Step 2: Add a configuration entry in appsettings.json for Amazon S3
Add the Amazon S3 credentials and bucket particulars to the appsettings.json file. Embody the Entry Key, Secret Key, Bucket Identify, and Area as proven beneath:
appsettings.json
{
"Logging": {
"LogLevel": {
"Default": "Warning"
}
},
"AllowedHosts": "*",
"AccessKey": "",
"SecretKey": "",
"BucketName": "",
"AWS": {
"Area": ""
}
}
Step 3: Implement the Amazon S3 storage service
Create a service class, AmazonS3DocumentStorageService.cs, to deal with file operations. This service contains two key strategies:
- FetchDocumentAsync: Retrieves a Phrase doc from Amazon S3 storage.
- UploadDocumentAsync: Saves and uploads a doc file to Amazon S3 storage.
Notice: The service class additionally contains extra strategies for file administration operations, which you’ll discover within the GitHub instance challenge.
The next code examples exhibit the important thing functionalities of file operations in AmazonS3DocumentStorageService.cs.
public class AmazonS3DocumentStorageService : IAmazonS3DocumentStorageService
{
non-public readonly string _accessKey;
non-public readonly string _secretKey;
non-public readonly string _bucketName;
non-public readonly RegionEndpoint _region;
non-public readonly IAmazonS3 _s3Client;
non-public readonly ILogger _logger;
non-public readonly AmazonS3DocumentManager _fileProvider;
non-public readonly string _rootFolderName;
public string basePath;
public AmazonS3DocumentStorageService(
IAmazonS3 s3Client,
IWebHostEnvironment hostingEnvironment,
IConfiguration configuration,
ILogger logger)
{
_s3Client = s3Client;
_logger = logger;
_accessKey = configuration["AccessKey"];
_secretKey = configuration["SecretKey"];
_bucketName = configuration["BucketName"];
_region = RegionEndpoint.GetBySystemName(configuration["AWS:Region"]);
// Folder identify created contained in the container
_rootFolderName = "Recordsdata";
// Initialize basePath from the internet hosting atmosphere and clear it up
basePath = hostingEnvironment.ContentRootPath;
basePath = basePath.Substitute("../", "");
_fileProvider = new AmazonS3DocumentManager();
_fileProvider.RegisterAmazonS3(_bucketName, _accessKey, _secretKey, _region.SystemName);
}
///
/// Masses a doc from Amazon S3 and returns the serialized doc.
///
///The identify of the doc to load.
/// An IActionResult containing the serialized doc if profitable, or an error standing code.
public async Activity FetchDocumentAsync(string documentName)
{
attempt
{
// Create a brand new S3 shopper for this operation.
utilizing var s3Client = new AmazonS3Client(_accessKey, _secretKey, _region);
utilizing var stream = new MemoryStream();
// Get the doc object from the S3 bucket.
var response = await s3Client.GetObjectAsync(_bucketName, $"{_rootFolderName}/{documentName}");
await response.ResponseStream.CopyToAsync(stream);
stream.Search(0, SeekOrigin.Start);
// Load the doc utilizing Syncfusion's WordDocument loader.
var doc = WordDocument.Load(stream, FormatType.Docx);
// Serialize the doc to JSON format.
return new OkObjectResult(JsonConvert.SerializeObject(doc));
}
catch (AmazonS3Exception ex)
{
_logger.LogError(ex, "S3 error loading doc");
return new StatusCodeResult(500);
}
}
///
/// Saves a doc to Amazon S3 utilizing the supplied type file.
///
///The uploaded type file to be saved.
///The identify below which the doc can be saved in S3.
/// An IActionResult indicating whether or not the save operation was profitable.
public async Activity UploadDocumentAsync(IFormFile file, string documentName)
{
attempt
{
// Create a brand new S3 shopper occasion to add the doc.
utilizing var s3Client = new AmazonS3Client(_accessKey, _secretKey, _region);
utilizing var stream = new MemoryStream();
// Copy the uploaded file content material to a reminiscence stream.
await file.CopyToAsync(stream);
stream.Search(0, SeekOrigin.Start);
// Assemble the Put object request with the mandatory particulars.
var request = new PutObjectRequest
{
BucketName = _bucketName,
Key = $"{_rootFolderName}/{documentName}",
InputStream = stream
};
// Add the file to the S3 bucket.
await s3Client.PutObjectAsync(request);
return new OkResult();
}
catch (AmazonS3Exception ex)
{
_logger.LogError(ex, "S3 error saving doc");
return new StatusCodeResult(500);
}
}
}
Step 4: Create API Endpoints in a controller
Create an API controller (Controllers/AmazonS3DocumentStorageController.cs) to deal with file operations. This controller contains two key strategies that internally invoke the corresponding service strategies:
- FetchDocument: Invokes the service methodology to retrieve a Phrase doc from Amazon S3 storage.
- UploadDocument: Invokes the service methodology to save lots of and add a doc file to Amazon S3 Storage.
Notice: This controller additionally accommodates a further file operations methodology. For extra particulars, please consult with the GitHub instance challenge.
The code instance beneath demonstrates the important thing controller strategies for dealing with file operations in AmazonS3DocumentStorageController.cs.
/// <abstract>
/// Controller for dealing with AWS file operations and doc administration
/// </abstract>
[Route("api/[controller]")]
[EnableCors("AllowAllOrigins")]
public class AmazonS3DocumentStorageController : ControllerBase
{
non-public readonly IAmazonS3DocumentStorageService _documentStorageService;
/// <abstract>
/// Constructor injecting the file supplier service dependency.
/// </abstract>
/// <param identify="documentStorageService">Service for performing file operations</param>
public AmazonS3DocumentStorageController(IAmazonS3DocumentStorageService documentStorageService)
{
_documentStorageService = documentStorageService;
}
/// <abstract>
/// Retrieves a doc from Amazon S3 storage in JSON format.
/// </abstract>
/// <param identify="args">File operation parameters together with path and motion sort</param>
/// <returns>Results of the file operation</returns>
[HttpPost("FetchDocument")]
public async Activity FetchDocument([FromBody] Dictionary<string, string=""> jsonObject)
{
if (!jsonObject.TryGetValue("documentName", out var docName))
return BadRequest("Doc identify required");
return await _documentStorageService.FetchDocumentAsync(docName);
}
/// <abstract>
/// Saves uploaded doc to Amazon S3 storage.
/// </abstract>
/// <param identify="information">Kind information containing file and doc identify</param>
/// <returns>Motion outcome indicating success or failure.</returns>
[HttpPost("UploadDocument")]
public async Activity UploadDocument([FromForm] IFormCollection information)
{
if (information.Recordsdata.Depend == 0)
return BadRequest("No file supplied");
var documentName = information.TryGetValue("documentName", out var values) && values.Depend > 0 ? values[0] : string.Empty;
return await _documentStorageService.UploadDocumentAsync(information.Recordsdata[0], documentName);
}
}</string,>
Establishing React Frontend Shopper-Aspect
Step 1: Create a React App and add dependencies
Create a React app and combine the Syncfusion® parts, Doc Editor, and File Supervisor, to work together with Amazon S3 storage. This integration allows file uploads, downloads, and storage administration inside your software.
- Doc Editor (Phrase Processor): Opens, edits, and auto-saves paperwork.
- File Supervisor interactively browses and manages information saved in Amazon S3 Blob Storage.
Step 2: Implement File Supervisor operations
Create a brand new TypeScript JSX file named AmazonS3FileManager.tsx to implement the File Supervisor, permitting customers to show, browse, and handle information saved in Amazon S3. The instance code beneath demonstrates this implementation:
import * as React from 'react';
import {
FileManagerComponent,
Inject,
NavigationPane,
DetailsView,
Toolbar
} from '@syncfusion/ej2-react-filemanager';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
interface AmazonS3Props {
// Callback operate triggered when a file is chosen within the file supervisor
onFileSelect: (filePath: string, fileType: string, fileName: string) => void;
}
const AmazonS3FileManager: React.FC<AmazonS3Props> = ({ onFileSelect }) => {
// Base URL for backend API dealing with Azure file operations
const hostUrl: string = "http://localhost:62869/";
// State administration for file supervisor dialog visibility
const [showFileManager, setShowFileManager] = React.useState(true);
// Reference to entry the FileManager part strategies
let fileManagerRef = React.useRef<FileManagerComponent>(null);
// Exhibits the file supervisor when the open button is clicked and clears the earlier choice merchandise
const handleOpenButtonClick = () => {
// Clear the earlier choice
if (fileManagerRef.present) {
fileManagerRef.present.clearSelection();
setTimeout(() => {
fileManagerRef.present.refreshFiles();
}, 100);
}
setShowFileManager(true);
};
// Handles file open occasion from file supervisor
const handleFileOpen = (args: any) => {
if (args.fileDetails.isFile) args.fileDetails.filterPath + args.fileDetails.identify;
const fileType = args.fileDetails.sort;
const fileName = args.fileDetails.identify;
onFileSelect(selectedPath, fileType, fileName); // Go the file path and file sort to load within the Doc Editor
setShowFileManager(false); // Shut the File Supervisor Dialog
};
return (
<div>
<button id="openAmazonS3BucketStorage" onClick={handleOpenButtonClick}>
Open AWS file supervisor
</button>
{/* File Supervisor Dialog */}
<DialogComponent
id="dialog-component-sample"
header="File Supervisor"
seen={showFileManager}
width="80%"
top="80%"
showCloseIcon={true}
closeOnEscape={true}
goal="physique"
beforeClose={() => setShowFileManager(false)}
onClose={() => setShowFileManager(false)} // Shut the dialog when closed
>
<FileManagerComponent
id="aws-file"
ref={fileManagerRef}
ajaxSettings={{
url: hostUrl + 'api/AmazonS3DocumentStorage/ManageDocument',
downloadUrl: hostUrl + 'api/AmazonS3DocumentStorage/DownloadDocument',
}}
toolbarSettings={{
gadgets: ['SortBy', 'Copy', 'Paste', 'Delete', 'Refresh', 'Download', 'Selection', 'View', 'Details']
}}
contextMenuSettings={', 'Paste', '}
fileOpen={handleFileOpen} // Connect the fileOpen occasion
>
<Inject companies={[NavigationPane, DetailsView, Toolbar]} />
</FileManagerComponent>
</DialogComponent>
</div>
);
};
export default AmazonS3FileManager;
Step 3: Implement Doc Editor operations
Create a brand new TypeScript JSX file named DocumentEditor.tsx to implement the Doc Editor functionalities, which embrace creating, opening, enhancing, and saving paperwork.
- Customized toolbar choices: Import the mandatory dependencies and add the next {custom} toolbar gadgets:
- New – Creates a brand new doc.
- Open – Shows the File Supervisor to load a specific doc.
- Obtain – Obtain the present doc regionally.
import React, { useRef, useState } from 'react'; import { CustomToolbarItemModel, DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor'; import AmazonS3FileManager from './AmazonS3FileManager.tsx'; import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar'; import { DialogUtility } from '@syncfusion/ej2-react-popups'; DocumentEditorContainerComponent.Inject(Toolbar); operate DocumentEditor() { // Backend API host URL for doc operations const hostUrl: string = "http://localhost:62869/"; // Reference to doc editor container part const containerRef = useRef<DocumentEditorContainerComponent>(null); // Reference for the dialog part let dialogObj: any; // State to carry the present doc identify const [currentDocName, setCurrentDocName] = useState<string>('None'); // Monitor doc modifications for auto-save performance const contentChanged = React.useRef(false); // Customized toolbar button configuration for "New" doc const newToolItem: CustomToolbarItemModel = { prefixIcon: "e-de-ctnr-new", tooltipText: "New", textual content: "New", id: "CustomNew" }; // Customized toolbar button configuration for opening the Amazon S3 file supervisor const openToolItem: CustomToolbarItemModel = { prefixIcon: "e-de-ctnr-open", tooltipText: "Open Amazon S3 file supervisor", textual content: "Open", id: "OpenAmazonS3FileManager" }; // Customized toolbar button configuration for downloading the doc const downloadToolItem: CustomToolbarItemModel = { prefixIcon: "e-de-ctnr-download", tooltipText: "Obtain", textual content: "Obtain", id: "DownloadToLocal" }; // Customise the SystemClipboard API identify let settings = { systemClipboard: 'ProcessClipboardContent' }; // Mixed toolbar gadgets together with {custom} buttons and built-in options const toolbarItems = [ newToolItem, openToolItem, downloadToolItem, 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields', 'ContentControl' ]; return ( <div> <div> <AmazonS3FileManager onFileSelect={loadFileFromFileManager} /> </div> <div id="document-editor-div" type={{ show: "block" }}> <div id="document-header"> </div> <DocumentEditorContainerComponent ref={containerRef} id="container" top={'650px'} serviceUrl={hostUrl + "api/AmazonS3DocumentStorage/"} enableToolbar={true} toolbarItems={toolbarItems} toolbarClick={handleToolbarClick} contentChange={handleContentChange} // Take heed to content material adjustments serverActionSettings={settings} /> </div> </div> ); } export default DocumentEditor; - Open a Doc from the File Supervisor (Amazon S3 Storage)
// Callback operate to load the file chosen within the file supervisor const loadFileFromFileManager = (filePath: string, fileType: string, fileName: string): void => { if (!containerRef.present) { console.error('Doc Editor shouldn't be loaded but.'); return; } containerRef.present.documentEditor.documentName = fileName; // Replace state with the present doc identify setCurrentDocName(fileName); if (fileType === '.docx' || fileType === '.doc' || fileType === '.txt' || fileType === '.rtf') { // Deal with doc information fetch(hostUrl + 'api/AmazonS3DocumentStorage/FetchDocument', { methodology: 'POST', headers: { 'Content material-Sort': 'software/json;charset=UTF-8' }, physique: JSON.stringify({ documentName: fileName }) }) .then(response => { if (response.standing === 200 || response.standing === 304) { return response.json(); } else { throw new Error('Error loading doc'); } }) .then(json => { const documentEditorDiv = doc.getElementById("document-editor-div"); if (documentEditorDiv) { documentEditorDiv.type.show = "block"; } // Open the doc utilizing the JSON information obtained containerRef.present.documentEditor.open(JSON.stringify(json)); }) .catch(error => { console.error('Error loading doc:', error); }); } else { alert('The chosen file sort shouldn't be supported for the doc editor.'); } }; - Robotically save the doc to Amazon S3 storage: The edited doc can be mechanically saved each 1000 milliseconds.
// Robotically saves doc to Amazon S3 storage const autoSaveDocument = async (): Promise<void> => { if (!containerRef.present) return; attempt { // Save as Blob utilizing Docx format const blob: Blob = await containerRef.present.documentEditor.saveAsBlob('Docx'); let exportedDocument = blob; let formData: FormData = new FormData(); formData.append('documentName', containerRef.present.documentEditor.documentName); formData.append('information', exportedDocument); let req = new XMLHttpRequest(); // Ship doc to backend API for Amazon S3 storage req.open( 'POST', hostUrl + 'api/AmazonS3DocumentStorage/UploadDocument', true ); req.onreadystatechange = () => { if (req.readyState === 4 && (req.standing === 200 || req.standing === 304)) { // Auto save accomplished // Success handler might be added right here if wanted } }; req.ship(formData); } catch (error) { console.error('Error saving doc:', error); } }; // Runs auto-save each second when content material adjustments are detected React.useEffect(() => { const intervalId = setInterval(() => { if (contentChanged.present) { autoSaveDocument(); contentChanged.present = false; } }, 1000); return () => clearInterval(intervalId); }); // Handles doc content material change detection const handleContentChange = (): void => { contentChanged.present = true; // Set the ref's present worth }; - Obtain a replica of the doc to native storage: While you click on the Obtain button within the toolbar, a replica of the doc at present open within the editor can be downloaded or saved to the native storage.
// Handles doc editor toolbar button click on occasions const handleToolbarClick = async (args: ClickEventArgs): Promise<void> => { // Get a reference to the file supervisor open button const openButton = doc.getElementById('openAmazonS3BucketStorage'); // Get the present doc identify from the editor let documentName = containerRef.present?.documentEditor.documentName || 'Untitled'; // Take away any extension from the doc identify utilizing regex const baseDocName = documentName.substitute(/.[^/.]+$/, ''); // All the time test if containerRef.present exists earlier than utilizing it if (!containerRef.present) return; swap (args.merchandise.id) { case 'OpenAmazonS3FileManager': // Programmatically set off Amazon S3 file supervisor if (openButton) { // Save the adjustments earlier than opening a brand new doc await autoSaveDocument(); openButton.click on(); // Units the main focus to the doc editor inside the present container reference containerRef.present.documentEditor.focusIn(); } break; case 'DownloadToLocal': // Provoke client-side obtain containerRef.present.documentEditor.save(baseDocName, 'Docx'); // Units the main focus to the doc editor inside the present container reference containerRef.present.documentEditor.focusIn(); break; case 'CustomNew': // If dialogObj exists, present the dialog; in any other case, immediate for a file identify. if (dialogObj) { dialogObj.present(); // Show the dialog. } else { showFileNamePrompt(); // Immediate the person for a file identify. } break; default: break; } }; - Create and add a brand new doc: When the New toolbar merchandise is clicked, a immediate dialog seems requesting the doc identify. As soon as confirmed, the doc opens within the Phrase Doc Editor and is mechanically saved and uploaded to Amazon S3 storage inside seconds.
// Immediate dialog for coming into a brand new doc filename const showFileNamePrompt = (errorMessage?: string) => { const randomDefaultName = getRandomDefaultName(); dialogObj = DialogUtility.affirm({ title: 'New Doc', width: '350px', cssClass: 'custom-dialog-prompt', content material: ` <p>Enter doc identify:</p> <div id="errorContainer" type="coloration: purple; margin-top: 4px;"> ${errorMessage ? errorMessage : ''} </div> <enter id="inputEle" sort="textual content" class="e-input" worth="${randomDefaultName}"/> `, okButton: { click on: handleFileNamePromptOk }, cancelButton: { click on: handleFileNamePromptCancel }, }); // After the dialog is rendered, focus and choose the enter textual content. setTimeout(() => { const enter = doc.getElementById("inputEle") as HTMLInputElement; if (enter) { enter.focus(); enter.choose(); } }, 100); dialogObj.shut = () => { setTimeout(() => { // Units the main focus to the doc editor inside the present container reference containerRef.present.documentEditor.focusIn(); }, 100); }; }; // Handler for the OK button within the file identify immediate dialog with file existence test and save // The brand new file can be mechanically saved to Azure Storage by the auto-save performance, which is managed inside the setInterval methodology. const handleFileNamePromptOk = async () => { const inputElement = doc.getElementById("inputEle") as HTMLInputElement; let userFilename = inputElement?.worth.trim() || "Untitled"; const baseFilename = `${userFilename}.docx`; // Verify if the doc already exists on the backend const exists = await checkDocumentExistence(baseFilename); if (exists) { // If the doc exists, show an error message within the dialog const errorContainer = doc.getElementById("errorContainer"); if (errorContainer) { errorContainer.innerHTML = 'Doc already exists. Please select a distinct identify.'; } // Re-focus the enter for correction if (inputElement) { inputElement.focus(); inputElement.choose(); } return; } // Proceed with new doc if (dialogObj) dialogObj.disguise(); containerRef.present.documentEditor.documentName = baseFilename; setCurrentDocName(baseFilename); containerRef.present.documentEditor.openBlank(); }; // Handler for the Cancel button within the immediate dialog const handleFileNamePromptCancel = () => { if (dialogObj) { dialogObj.disguise(); } };
Working the tasks
To run the challenge, launch the server-side ASP.NET Core API and begin the client-side React software to check its performance. The outcomes of the file operations carried out on the shopper aspect can be displayed as proven within the picture beneath.
GitHub reference
For a whole challenge, consult with the GitHub demo.
Conclusion
Thanks for studying! On this weblog, we have now explored easy methods to effectively open, edit, and auto-save Phrase paperwork in Amazon S3 (AWS) Storage utilizing Syncfusion®’s Doc Editor and File Supervisor inside a React software. By following these steps, you’ll be able to create a seamless and safe doc administration system, enabling customers to work with Phrase paperwork instantly within the cloud.
Whether or not you select Amazon S3, Azure Blob Storage, or another cloud storage, Syncfusion®’s Doc Editor offers a scalable and dependable resolution for doc dealing with based mostly in your software’s wants.
The brand new model is offered for present prospects to obtain from the License and Downloads web page. In case you are not a Syncfusion buyer, you’ll be able to attempt our 30-day free trial for our latest options.
You can too contact us by means of our help boards, help portal, or suggestions portal. We’re all the time pleased to help you!
