Merge pull request #3236 from Syncfusion-Content/hotfix/hotfix-v26.2.4

DOCINFRA-2341_merged_using_automation

Author: SyncfusionBuild

ej2-asp-core-mvc/barcode/images/logo.png

@@ -88,29 +88,46 @@ The dimension of the QR Code can be changed using the height and width propertie
 {% endif %}
 
 
+## Enhancing QR Codes with Icons
 
-## Customizing the text
+The EJ2 Barcode Generator allows you to add a [`logo`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BarcodeGenerator.QRCodeGenerator.html#Syncfusion_EJ2_BarcodeGenerator_QRCodeGenerator_Logo) or icon to your QR codes, enhancing their visual appeal, clarity, and even security. Adding a recognizable icon can make it easier for users to identify the source and help prevent tampering.
 
-In QR Code generators, you can customize the QR Code text by using display text property.
+### Supported Image Sources
+ 
+The `imageSource` property of the `QRCodeLogo` class supports the following image sources:
+ 
+- **Local image path**: Specify the path to the image file relative to your project's root directory (e.g., `images/syncfusion.png`) or as an absolute path (e.g., `/assets/icons/logo.svg`).
+- **Remote image URL**: Provide the web address of the image file (e.g., `https://example.com/image.jpg`).
+- **Base64 encoded image data**: Embed the image data directly in the code using a Base64-encoded string (e.g., `data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...`).
+
+### Logo Dimensions
+ 
+The `width` and `height` properties of the `QRCodeLogo` class define the dimensions of the logo in pixels. If not specified, both default to 30% of the QR code’s size. The maximum allowed size is 30% of the QR code’s dimensions to ensure optimal readability.
+
+**Note:** Always test the readability of your QR code after adding a logo. Depending on the logo size and QR code content, you might need to adjust the [`errorCorrectionLevel`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BarcodeGenerator.ErrorCorrectionLevel.html) property of the `QRCodeGenerator` to `"Medium"` or `"High"` for better reliability.
+
+The following image illustrates QR code with logo:
+
+![logo](images/logo.png)
 
 {% if page.publishingplatform == "aspnet-core" %}
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/barcode/qrcode/text/tagHelper %}
+{% include code-snippet/barcode/qrcode/logo/tagHelper %}
 {% endhighlight %}
 {% endtabs %}
 
 {% elsif page.publishingplatform == "aspnet-mvc" %}
 
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/barcode/qrcode/text/razor %}
+{% include code-snippet/barcode/qrcode/logo/razor %}
 {% endhighlight %}
-{% highlight c# tabtitle="Text.cs" %}
-{% include code-snippet/barcode/qrcode/text/text.cs %}
+{% highlight c# tabtitle="Logo.cs" %}
+{% include code-snippet/barcode/qrcode/logo/logo.cs %}
 {% endhighlight %}
 {% endtabs %}
 {% endif %}
 
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/ASP-NET-Core-UG-Examples/tree/main/Barcode/QRCodeandDataMatrixSample).
+N> [View Sample in GitHub](https://github.com/SyncfusionExamples/ASP-NET-Core-UG-Examples/tree/main/Barcode/QRCodeandDataMatrixSample).

ej2-asp-core-mvc/barcode/qrcodegenerator.md

@@ -0,0 +1,18 @@
+using System.Collections.Generic;
+using System.Linq;
+using System.Web;
+using System.Web.Mvc;
+using Syncfusion.EJ2.BarcodeGenerator;
+
+namespace EJ2CoreSampleBrowser.Controllers.Barcode
+{
+    public partial class BarcodeController : Controller
+    {
+        
+        public ActionResult qrcode()
+        {
+           
+             return View();
+        }
+    }
+}

ej2-asp-core-mvc/code-snippet/barcode/qrcode/logo/logo.cs

@@ -0,0 +1,6 @@
+@(Html.EJS().QRCodeGenerator("container").
+Width("200px").
+mode=("SVG").
+Height("150px").
+logo(s => s.imageSource("https://www.syncfusion.com/web-stories/wp-content/uploads/sites/2/2022/02/cropped-Syncfusion-logo.png")).
+Value("SYNCFUSION").Render() )

ej2-asp-core-mvc/code-snippet/barcode/qrcode/logo/razor

@@ -0,0 +1,3 @@
+<ejs-qrcodegenerator id="container" width="200px" height="150px" mode="SVG" value="Syncfusion">
+	<e-qrcodegenerator-logo imageSource="https://www.syncfusion.com/web-stories/wp-content/uploads/sites/2/2022/02/cropped-Syncfusion-logo.png"></e-qrcodegenerator-logo>
+</ejs-qrcodegenerator>

ej2-asp-core-mvc/code-snippet/barcode/qrcode/logo/tagHelper

@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Form Filling in ##Platform_Name## Pdfviewer Component
+title: Form Filling in ##Platform_Name## Pdfviewer Component | Syncfusion
 description: Learn here all about Form Filling in Syncfusion ##Platform_Name## Pdfviewer component of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: PDF Viewer
@@ -9,7 +9,7 @@ documentation: ug
 ---
 
 
-# Form Filling
+# Form Filling in the ASP.NET MVC PDF Viewer component
 
 PDF Viewer component allows you to display the form fields available in the PDF document. By using this, you can edit and download the form fields.
 
@@ -23,7 +23,7 @@ The form fields displayed in the PDF Viewer are:
 * Signature Field
 * List box
 
-![FormFilling](../../pdfviewer/images/formfilling.png)
+![FormFilling](./images/formfilling.png)
 
 ## Disabling form fields
 
@@ -52,21 +52,21 @@ Signature can be added to the Signature field by using the following steps:
 
 * Click the Signature Field in the PDF document. The signature panel will appear.
 
-![SignatureField](../../pdfviewer/images/signaturefield.png)
+![SignatureField](./images/signaturefield.png)
 
 * Draw the signature in the signature panel.
 
-![SignaturePanel](../../pdfviewer/images/signature.png)
+![SignaturePanel](./images/signature.png)
 
 * Click the **CREATE** button, the drawn signature will be added in the signature field.
 
-![Signature](../../pdfviewer/images/sign.png)
+![Signature](./images/sign.png)
 
 ## Delete the signature inside the signature field
 
 You can also delete the signature in the signature field by using Delete Option in the annotation toolbar.
 
-![DeleteSign](../../pdfviewer/images/deletesign.png)
+![DeleteSign](./images/deletesign.png)
 
 ## Import and export form fields
 

ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/form-filling.md

@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Azure Blob Storage in ##Platform_Name## PDF Viewer Component
+title: Open PDF from Azure Blob Storage in ##Platform_Name## PdfViewer | Syncfusion
 description: Learn here all about how to Open PDF files from Azure Blob Storage in ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: PDF Viewer
@@ -10,6 +10,95 @@ documentation: ug
 
 # Open PDF file from Azure Blob Storage
 
+PDF Viewer allows to load PDF file from Azure Blob Storage using either the Standalone or Server-backed PDF Viewer. Below are the steps and a sample to demonstrate how to open a PDF from Azure Blob Storage.
+
+## Using Standalone PDF Viewer
+
+To load a PDF file from Azure Blob Storage in a PDF Viewer, you can follow the steps below
+
+**Step 1:** Create the Azure Blob Storage account
+
+Log in to the Azure Portal. Create a new Storage Account with preferred settings. Note access keys during the setup. Within the Storage Account, create a Blob Container following the steps in this [link](https://learn.microsoft.com/en-us/azure/storage/common/storage-account-create?toc=%2Fazure%2Fstorage%2Fblobs%2Ftoc.json&tabs=azure-portal).
+
+**Step 2:** Create PDF Viewer Sample in ASP.NET MVC
+
+Follow instructions provided in the Syncfusion PDF Viewer Getting Started [Guide](https://ej2.syncfusion.com/aspnetmvc/documentation/pdfviewer/getting-started-with-server-backed#integrate-pdf-viewer-into-an-aspnet-mvc-application) to create a simple PDF Viewer sample in ASP.NET MVC.
+
+**Step 3:** Modify the `Views/Home/index.cshtml` File in the Project
+
+1. Add the following properties to the `Views/Home/index.cshtml`, and assign the values from the configuration to the corresponding properties
+
+N> Replace **Your account name in Azure** with the actual account name for your Azure Blob Storage account and **Your container name in Azure** with the actual container name and **Your Blob name in Azure** with the actual container name.
+
+```csharp
+var accountName = "*Your account name in Azure*";
+var containerName = "*Your container name in Azure*";
+var blobName = "*Your Blob name in Azure*";
+```
+
+2. Constructs the URL to the PDF in Azure Blob Storage. Calls fetchAndConvertToBase64 to fetch the PDF and convert it to a base64 string. Then Loads the base64 string into the PDF Viewer.
+
+```csharp
+function loadDocument() {
+  var url = 'https://' + accountName + '.blob.core.windows.net/' + containerName + '/' + blobName;
+  fetchAndConvertToBase64(url).then(function(base64String) {
+    if (base64String) {
+      setTimeout(function() {
+        viewer.load("data:application/pdf;base64," + base64String);
+      }, 2000);
+    } else {
+      console.error('Failed to fetch and convert file to base64.');
+    }
+  }).catch(function(error) {
+    console.error('Error:', error);
+  });
+}
+```
+
+3. Then it retrieves the PDF file from the given URL and converts the fetched Blob to a base64 string using blobToBase64.
+
+```csharp
+function fetchAndConvertToBase64(url) {
+  return new Promise(function(resolve, reject) {
+    fetch(url).then(function(response) {
+      if (!response.ok) {
+        throw new Error('HTTP error! Status: ' + response.status);
+      }
+      return response.blob();
+    }).then(function(blob) {
+      blobToBase64(blob).then(function(base64String) {
+        resolve(base64String);
+      });
+    }).catch(function(error) {
+      console.error('Error fetching file:', error);
+      reject(null);
+    });
+  });
+}
+```
+
+4. Uses FileReader to convert a Blob to a base64 string. Resolves the promise with the base64 string or rejects it in case of an error.
+
+```csharp
+function blobToBase64(blob) {
+  return new Promise(function(resolve, reject) {
+    var reader = new FileReader();
+    reader.onload = function() {
+      var base64String = reader.result ? reader.result.toString().split(',')[1] : '';
+      resolve(base64String);
+    };
+    reader.onerror = function(error) {
+      reject(error);
+    };
+    reader.readAsDataURL(blob);
+  });
+}
+```
+
+[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-azure-blob-storage/tree/master/Open%20and%20Save%20PDF%20in%20Azure%20Blob%20Storage%20using%20Standalone).
+
+## Using Server-Backed PDF Viewer
+
 To load a PDF file from Azure Blob Storage in a PDF Viewer, you can follow the steps below
 
 **Step 1:** Create the Azure Blob Storage account
@@ -95,4 +184,4 @@ Set the `documentPath` property of the PDF viewer component to the desired name
 
 N> The **Azure.Storage.Blobs** NuGet package must be installed in your application to use the previous code example.
 
-[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-azure-blob-storage).
+[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-azure-blob-storage/tree/master/Open%20and%20Save%20PDF%20in%20Azure%20Blob%20Storage%20using%20Server-Backend).