We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Need one sample Angular Syncfusion Control for Save content to blob as DOCX & Convert DOCX to SFDT

Thread ID:

Created:

Updated:

Platform:

Replies:

142830 Feb 21,2019 09:21 AM UTC Mar 8,2019 11:46 AM UTC Angular - EJ 2 10
loading
Tags: DocumentEditor
Darshan
Asked On February 21, 2019 09:21 AM UTC

Hello Team,

Need one sample Angular Syncfusion Control for Save content to blob as DOCX & Convert DOCX to SFDT 


Regards,
Darshan

Darshan
Replied On February 21, 2019 11:48 PM UTC

Hello team,

We would need a sample for the below functionality.

Syncfusion DocumentEditor in angular
Display list of files from blob server (.docx) if exists 
Docx file can be edited and saved in blob server ( need to call API when clicked on save button)
Convert docx file in to PDF

Attached is the reference. let us know if needed further clarifications.

Regards,
Darshan

Ramya Thirugnanam [Syncfusion]
Replied On February 25, 2019 12:31 PM UTC

Hi Darshan,  
  
Thanks for contacting Syncfusion support.  
  
 We have prepared an Angular sample for following requirement.  
  
Requirement   
Response   
Display list of files from blob server (.docx) if exists  
Add dropdown button in tittle bar which shows list of files available in App_Data folder.  
  
 
  
Docx file can be edited and saved in blob server ( need to call API when clicked on save button)  
  
Added option to save edited file back to 'App_Data' folder in web server.  
 
  
  
Convert docx file in to PDF  
  
Added option  to save the document as PDF in 'App_Data' folder in web server. 
 
 
 
  
  
  
Please find the sample from below link :   
  
  
  
NoteAbove angular sample is depend on web api for opening and saving files. So, please run both sample simultaneously to make all the options work properly. And also replace the web api url at line no.19 in 'title-bar.ts'  Kindly try this sample and let us know if this help you.  
 
Regards, 
Ramya T 


Darshan
Replied On February 27, 2019 12:11 AM UTC

Hi Ramya,

Thank you for the updates , It is working  using Angular Syncfusion Control .

 Also could you help me on the below query .

> Can we save updated file content in azure blob ( either sfdt or docx  format) using angular +  API 
> Import docx or sfdt file from azure blob and load in to syncfusion document editor

let me know if any clarifications.


Regards,
Darshan



Ramya Thirugnanam [Syncfusion]
Replied On February 27, 2019 09:55 AM UTC

Hi Darshan, 
 
Regarding “Import docx or sfdt file from azure blob and load in to syncfusion document editor”  
   
We can Import docx or sfdt file from azure blob and load it in DocumentEditor by using ‘WebClient’. Please find the sample code to import file from azure blob URL and load it in DocumentEditor below.  
  
C# Web API sample code  
// Import blob from Azure and convert it to Sfdt format   
[HttpPost]  
public HttpResponseMessage ImportBlob(string blobPath)  
{  
    WebClient client = new WebClient();  
    //Download data from azure blob path as byte array  
    byte[] doc = client.DownloadData(blobPath);  
    //Convert byte array to stream   
    Stream stream = new MemoryStream(doc);  
    stream.Position = 0;  
    string type = "";  
    int index = blobPath.LastIndexOf('.');  
    type = index > -1 && index < blobPath.Length - 1 ? blobPath.Substring(index + 1) : "";  
    type = type.ToLower();  
    string json = "";  
    //If the file is in sfdt format we can directly open it in document editor  
    if (type == "sfdt")  
    {  
        StreamReader reader = new StreamReader(stream);  
        // Read content of stream as string  
        json = reader.ReadToEnd();  
        reader.Dispose();  
    }  
    else  
    {  
        // Convert word document to Sfdt format  
        WordDocument document = WordDocument.Load(stream, GetFormatType(type));  
        json = Newtonsoft.Json.JsonConvert.SerializeObject(document);  
        document.Dispose();  
    }  
    stream.Dispose();  
    return new HttpResponseMessage() { Content = new StringContent(json) };  
 }  
   
Regarding “Can we save updated file content in azure blob using angular +  API “  
  
We can save the modified docx/sfdt file back to azure blob by using below web api code.  
  
C# Web API  
public string SaveAsBlob([FromBody]DocumentInfo blobInfo)  
{  
    string status = "";  
    try  
    {  
        string blobPath = blobInfo.blobPath;  
        Stream documentstrem = new MemoryStream(Convert.FromBase64String(blobInfo.blobContent.Split(',')[1]));  
        documentstrem.Position = 0;  
        SaveDocument(blobPath, documentstrem).GetAwaiter().GetResult();  
        status = "success";  
    }  
    catch  
    {  
        status = "failure";  
    }  
    return status;  
}  
internal async Task SaveDocument(string blobPath, Stream stream)  
{  
    // Provide your Azure account name and key  
    StorageCredentials creds = new StorageCredentials(accountName, accountKey);  
    CloudStorageAccount account = new CloudStorageAccount(creds, useHttps: true);  
    CloudBlobClient client = account.CreateCloudBlobClient();  
    // Provide blob name  
    CloudBlobContainer container = client.GetContainerReference(blobName);  
    //Get only the file path from azure URL  
    string filePath = blobPath.Replace("https://" + accountName + ".blob.core.windows.net/" + blobName + "/", "");  
    CloudBlockBlob blob = container.GetBlockBlobReference(filePath);  
    stream.Position = 0;  
    await blob.UploadFromStreamAsync(stream);  
}  
  
  
C# Model  
public class DocumentInfo  
{  
    public string blobPath;  
    public string blobContent;  
}  
  
 Front End Angular  
public saveToBlob() {  
  this.documentEditor.saveAsBlob('Docx').then(function (blob) {  
    var fileReader = new FileReader();  
  
    fileReader.onload = function () {  
      var httpRequest = new XMLHttpRequest();  
      httpRequest.open('POST', '/api/DocumentEditor/SaveAsBlob', true);  
      httpRequest.setRequestHeader("Content-Type", "application/json;charset=UTF-8");  
      httpRequest.onreadystatechange = function () {  
        if (httpRequest.readyState === 4) {  
          if (httpRequest.status === 200 || httpRequest.status === 304) {  
            console.log(httpRequest.responseText);  
          }  
        }  
      }  
      var data = {  
        // Added azure path to save the blob  
        blobPath: documentPath,  
        blobContent: fileReader.result  
      };  
      httpRequest.send(JSON.stringify(data));  
    }  
  
    fileReader.readAsDataURL(blob);  
  });  
}  
  
  
 We have updated this change in the sample which we have provided in our previous update. Please find the modified sample from below link   
  
 
Note: Kindly update you azure account details in Web API sample.  
 
Regards, 
Ramya T 


Darshan
Replied On February 28, 2019 01:34 PM UTC

Hi Ramya,

Thank you for the update,  it was working. Iam able to import all files list and Import filename(Download) No issues.

while click on SaveasBlob it doesn't save in blob storage ,cpuld you clarify the below

string filePath = blobPath.Replace("https://" + accountName + ".blob.core.windows.net/" + blobName + "/""");  -- This replace empty values in filePath .

also i have verified blob connectionstring are correct. Attached is the error screen shot of browser

Could you help me on this

Regards,
Darshan

Ramya Thirugnanam [Syncfusion]
Replied On March 1, 2019 09:08 AM UTC

Hi Darshan,  
 
Thanks for your update.  
 
//Get only blob path from azure URL  
string filePath = blobPath.Replace("https://" + accountName + ".blob.core.windows.net/" +blobName + "/""");  
CloudBlockBlob blob = container.GetBlockBlobReference(filePath);  
  
   
In the above code example “GetBlockBlobReference” method expect relative path to the blob. So, we have added code to get only blob name from the azure URL i.e. ‘https://xxxxx.blob.core.windows.net.xxxxx/documentName.docx’ --> “documentName.docx”. So, if your blobPath contain only blob name “documentName.docx” you can directly pass it to “GetBlockBlobReference” method as shown in the below code example.  
 
public async Task SaveDocument(string blobPathStream stream) {  
    StorageCredentials creds = new StorageCredentials(accountNameaccountKey);  
    CloudStorageAccount account = new CloudStorageAccount(credsuseHttpstrue);  
    CloudBlobClient client = account.CreateCloudBlobClient();  
    CloudBlobContainer container = client.GetContainerReference(blobName);  
    CloudBlockBlob blob = container.GetBlockBlobReference(blobPath);  
    stream.Position = 0;  
    await blob.UploadFromStreamAsync(stream);  
}  
  
Regards,  
Ramya T 


Darshan
Replied On March 1, 2019 11:07 AM UTC

Hi Ramya,

Thank you for your prompt support. It is working now.

In case of any will revert you.

Regards,
Darshan



Ramya Thirugnanam [Syncfusion]
Replied On March 4, 2019 06:20 AM UTC

Hi Darshan, 
 
Thanks for your update. 
 
Regards, 
Ramya T 


Darshan
Replied On March 7, 2019 01:19 PM UTC


Hi Ramya,

Can you let me know how to merge the signature and pdf content and form a final document which is signed ?


Regards,
Darshan

Ramya Thirugnanam [Syncfusion]
Replied On March 8, 2019 11:46 AM UTC

Hi Darshan,   
 
Thanks for you update.   
 
Please find the below code example which I have included the code for merge signature in PDF document.   
 
Sample code:   
 
Syncfusion.DocIO.DLS.WordDocument wordDocument = newSyncfusion.DocIO.DLS.WordDocument(stream,Syncfusion.DocIO.FormatType.Docx);   
DocToPDFConverter converter = new DocToPDFConverter();   
   
PdfDocument pdf = converter.ConvertToPDF(wordDocument);   
//Creates a certificate instance from PFX file with private key   
PdfCertificate pdfCert = new PdfCertificate(certificatePath,"syncfusion");   
//Creates a digital signature   
PdfSignature signature = new PdfSignature(pdf, pdf.Pages[0], pdfCert,"Signature");           
//Sets signature information   
signature.ContactInfo = "johndoe@owned.us";   
signature.LocationInfo = "Honolulu, Hawaii";   
signature.Reason = "I am author of this document.";   
MemoryStream stream = new MemoryStream();   
pdf.Save(stream);   
pdf.Close(true);   
wordDocument.Close();   
   
string path =System.Web.HttpContext.Current.Server.MapPath("~/App_Data/");   
FileStream fileStream = new FileStream(path + fileName,FileMode.OpenOrCreate, FileAccess.ReadWrite);   
stream.Position = 0;   
stream.CopyTo(fileStream);   
stream.Close();   
fileStream.Close();   
return "Sucess";   
  
We have integrated this in web api sample which we have provided earlier. Please find the sample from below link.   
   
Please find the UG documentation link to add signature to PDF document from below,   
 
Note: Kindly updated you PFX certificate file path in PdfCertificate class. 
 
Regards,  
Ramya T  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;