Document is getting corrupted.

[Yogesh]

Hello,

We are using the Document Editor Container control in Angular and a .NET Web API for the backend.

When we save a document initially, it opens without any issues. However, after adding some form fields, saving, and reopening the document, we encounter the error "Failed to load the file."

here is the code snippets :-

Angular - V 16 , we are using package version :- "@syncfusion/ej2-angular-documenteditor": "^27.1.59"

.Net Core 8 all packages are at latest version as of now.

Code:-

1.Save:-

this.editorObj.documentEditor

.saveAsBlob('Docx')

.then((exportedDocument: Blob) => {

//Now, save the document where ever you want.

const formData: FormData = new FormData();

formData.append("documentName", docName);

formData.append("file", exportedDocument);

this.documentSyncfusionService

.saveDocumentToAzure(formData)

.then(async (resultData: any) => {});

.Net :-

public async Task<string> SaveDocumentAndGetName(IFormCollection data, string folderPath, string fileNameWhichIsDirectoryID)

{

if (data.Files.Count == 0)

return "";

BlobServiceClient blobServiceClient = new BlobServiceClient(_storageConnectionString);

BlobContainerClient MasterContainerName = blobServiceClient.GetBlobContainerClient(_storageMasterContainerName);

BlobContainerClient UserContainerName = blobServiceClient.GetBlobContainerClient(_storageUserContainerName);

IFormFile file = data.Files[0];

string documentName = this.GetValue(data, "documentName");

string documentNameWithoutExtension = Path.GetFileNameWithoutExtension(documentName);

string extension = Path.GetExtension(documentName);

BlobClient blobClient;

// Get a reference to the blob

// if (role == "docadmin")

// {

blobClient = MasterContainerName.GetBlobClient(folderPath + fileNameWhichIsDirectoryID + ".sfdt");

// }

// else

// {

// blobClient = UserContainerName.GetBlobClient(folderPathForUser + fileNameWhichIsDirectoryID + ".sfdt");

// }

Stream stream = new MemoryStream();

file.CopyTo(stream);

// Ensure the stream position is set to the beginning

stream.Position = 0;

// Upload the document to Azure Blob Storage

blobClient.Upload(stream, true);

// Return the URL of the uploaded blob

return documentNameWithoutExtension + extension;

}

2. Open

Angular

this.documentSyncfusionService

.getDocumentByID(formData)

.then((apiResult: any) => {

// if (apiResult.Success) {

// this.toaster.success('Docment Fetched Sucessfully...!')

if (apiResult?.Document) {

this.documentInfo = JSON.parse(apiResult?.Document);

}

const documentContentString = JSON.stringify(

this.documentInfo.DocumentContent

);

this.editorObj.documentEditor?.open(documentContentString);

.Net

public async Task<string> SaveDocumentAndGetName(IFormCollection data, string folderPath, string fileNameWhichIsDirectoryID)

{

if (data.Files.Count == 0)

return "";

BlobServiceClient blobServiceClient = new BlobServiceClient(_storageConnectionString);

BlobContainerClient MasterContainerName = blobServiceClient.GetBlobContainerClient(_storageMasterContainerName);

BlobContainerClient UserContainerName = blobServiceClient.GetBlobContainerClient(_storageUserContainerName);

IFormFile file = data.Files[0];

string documentName = this.GetValue(data, "documentName");

string documentNameWithoutExtension = Path.GetFileNameWithoutExtension(documentName);

string extension = Path.GetExtension(documentName);

BlobClient blobClient;

// Get a reference to the blob

// if (role == "docadmin")

// {

blobClient = MasterContainerName.GetBlobClient(folderPath + fileNameWhichIsDirectoryID + ".sfdt");

// }

// else

// {

// blobClient = UserContainerName.GetBlobClient(folderPathForUser + fileNameWhichIsDirectoryID + ".sfdt");

// }

Stream stream = new MemoryStream();

file.CopyTo(stream);

// Ensure the stream position is set to the beginning

stream.Position = 0;

// Upload the document to Azure Blob Storage

blobClient.Upload(stream, true);

// Return the URL of the uploaded blob

return documentNameWithoutExtension + extension;

}

and from controller i have retuned like this ,

string Document = await _documentBussiness.GetDocumentJsonFromFileName(docTitle, folderPath, DirectoryIDString);

var ResultData = new

{

Document = Document,

result = result

};

---

Let me know if there's anything more I can help with!

[Aravind Dharani]

Yogesh,

Saving the document

On the client-side, you are creating a blob with a .docx extension, while on the server-side, you are using the .sfdt extension. Client side code: this.editorObj.documentEditor.saveAsBlob('Docx') Server side code:  blobClient = MasterContainerName.GetBlobClient(folderPath + fileNameWhichIsDirectoryID + ".sfdt"); We suspect this might be the cause of the issue. Please change the extension to docx in server side and let us know if the issue still persist.

Opening the document

In client side: When opening the document, you used the this.documentInfo property and assigned it the value from the response. Could you please provide more details about what type of property that is? In server side: Could you please provide details on how you are importing the document and returning to the client side, which will be helpful for us to investigate further?

Regards,

Aravind D