1011997: Need to include new UG section for open-save file from Google Drive

Document-Processing/Excel/Spreadsheet/React/Open-Excel-File/from-google-drive.md

@@ -0,0 +1,173 @@
+---
+layout: post
+title: Open excel from Google Drive in React Spreadsheet control | Syncfusion
+description: Learn about how to Open an Excel file from Google Drive in React Spreadsheet control of Syncfusion Essential JS 2.
+platform: document-processing
+control: Open file from Google Drive
+documentation: ug
+---
+
+# Open file from Google Drive
+
+To load a file from Google Drive in a Spreadsheet Component, you can follow the steps below
+
+**Step 1:** Create a Simple Spreadsheet Sample in React
+
+Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/getting-started) to create a simple Spreadsheet sample in React. This will give you a basic setup of the Spreadsheet component.
+
+**Step 2:** Modify the `SpreadsheetController.cs` File in the Web Service Project
+
+1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) for instructions on how to create a web service project.
+
+2. Open the `SpreadsheetController.cs` file in your web service project.
+
+3. Import the required namespaces at the top of the file:
+
+```csharp
+
+using Google.Apis.Auth.OAuth2;
+using Google.Apis.Drive.v3;
+using Google.Apis.Services;
+using Syncfusion.EJ2.Spreadsheet;
+
+```
+
+4. Add the following private fields and constructor parameters to the `SpreadsheetController` class, In the constructor, assign the values from the configuration to the corresponding fields.
+
+```Csharp
+
+//variables for storing GDrive folderId, ApplicationName and Service-Accountkey credentials
+public readonly string folderId;
+public readonly string applicationName;
+public readonly string credentialPath;
+
+//constructor for assigning credentials
+public SpreadsheetController(IConfiguration configuration)
+{
+    folderId = configuration.GetValue<string>("FolderId");
+    credentialPath = configuration.GetValue<string>("CredentialPath");
+    applicationName = configuration.GetValue<string>("ApplicationName");
+}
+
+```
+
+5. Create the `OpenExcelFromGoogleDrive()` method to open the document from the Google Drive.
+
+```Csharp
+
+[HttpPost]
+[Route("OpenExcelFromGoogleDrive")]
+public async Task<IActionResult> OpenExcelFromGoogleDrive([FromBody] FileOptions options)
+{
+try
+{
+    // Create a memory stream to store file data
+    MemoryStream stream = new MemoryStream();
+
+    // Authenticate using Service Account
+    GoogleCredential credential;
+    // Load Google service account credentials
+    using (var streamKey = new FileStream(credentialPath, FileMode.Open, FileAccess.Read))
+    {
+        credential = GoogleCredential.FromStream(streamKey)
+            .CreateScoped(DriveService.Scope.Drive);
+    }
+
+    // Create Google Drive API service
+    var service = new DriveService(new BaseClientService.Initializer()
+    // Initialize Google Drive API client
+    {
+        HttpClientInitializer = credential,
+        ApplicationName = applicationName,
+    });
+
+    // List Excel files in Google Drive folder
+    var listRequest = service.Files.List();
+    // Query Google Drive for Excel, CSV files in the specified folder
+    listRequest.Q = $"(mimeType='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' or mimeType='application/vnd.ms-excel' or mimeType='text/csv') and '{folderId}' in parents and trashed=false";
+    listRequest.Fields = "files(id, name)";
+    var files = await listRequest.ExecuteAsync();
+    // Find the requested file
+    string fileIdToDownload = files.Files.FirstOrDefault(f => f.Name == options.FileName + options.Extension)?.Id;
+    // Get the file ID for the requested file name
+    if (string.IsNullOrEmpty(fileIdToDownload))
+        // Get the file ID for the requested file name
+        return NotFound("File not found in Google Drive.");
+    // Download the file
+    var request = service.Files.Get(fileIdToDownload);
+    await request.DownloadAsync(stream);
+    // Download file content into memory stream
+    stream.Position = 0;
+    // Prepare file for Syncfusion Excel processing
+    OpenRequest open = new OpenRequest
+    // Wrap downloaded stream as FormFile for Syncfusion processing
+    {
+        File = new FormFile(stream, 0, stream.Length, options.FileName, options.FileName + options.Extension)
+    };
+
+    // Convert Excel file to JSON using Syncfusion XlsIO
+    var result = Workbook.Open(open);
+    return Content(result, "application/json");
+}
+catch (Exception ex)
+{
+    return BadRequest("Error occurred while processing the file: " + ex.Message);
+}
+}
+
+// Class to store FileOptions
+public class FileOptions
+{
+    public string FileName { get; set; } = string.Empty;
+    public string Extension { get; set; } = string.Empty;
+}
+
+```
+
+6. Open the `appsettings.json` file in your web service project, add your Google Drive configuration details.
+
+```Json
+
+{
+ "CredentialPath": "path-to-your-service-account-key.json",
+ "FolderId": "your-google-drive-folder-id",
+ "ApplicationName": "YourAppName"
+}
+
+```
+
+N> Note: Install the Google.Apis.Drive.v3 NuGet package in the service project.
+
+**Step 3:** Modify the index File in the Spreadsheet sample to make a fetch call to the server to retrieve and load the Excel file from the Google Drive into the client-side spreadsheet.
+
+```typescript
+<button className="e-btn" onClick={openFromGoogleDrive} style={{ marginLeft: '10px' }}>
+    Open from Drive
+</button>
+
+const openFromGoogleDrive = () => {
+    spreadsheet.showSpinner();
+    // Make a POST request to the backend API to open the file from Google Drive.
+    // Replace the URL with your local or hosted endpoint URL.
+    fetch('https://localhost:your_port_number/api/spreadsheet/OpenExcelFromGoogleDrive', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            FileName: fileInfo.name,       // Name of the file to open
+            Extension: fileInfo.extension, // File extension (.xlsx)
+        }),
+    })
+    .then((response) => response.json()) // Parse the response as JSON
+    .then((data) => {
+        spreadsheet.hideSpinner();
+        // Load the spreadsheet data into the UI
+        spreadsheet.openFromJson({ file: data, triggerEvent: true });
+    })
+    .catch((error) => {
+        spreadsheet.hideSpinner();
+        window.alert('Error importing file from Google Drive: ' + error);
+    });
+};
+```

Document-Processing/Excel/Spreadsheet/React/Save-Excel-File/to-google-drive.md

@@ -0,0 +1,175 @@
+---
+layout: post
+title: Save excel to Google Drive in React Spreadsheet control | Syncfusion
+description: Learn about how to Save an Excel file from Google Drive in React Spreadsheet control of Syncfusion Essential JS 2.
+platform: document-processing
+control: Save file to Google Drive
+documentation: ug
+---
+
+# Save file to Google Drive
+
+To save a file to Google Drive in a Spreadsheet Component, you can follow the steps below
+
+**Step 1:** Create a Simple Spreadsheet Sample in React
+
+Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/getting-started) to create a simple Spreadsheet sample in React. This will give you a basic setup of the Spreadsheet component.
+
+**Step 2:** Modify the `SpreadsheetController.cs` File in the Web Service Project
+
+1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) for instructions on how to create a web service project.
+
+2. Open the `SpreadsheetController.cs` file in your web service project.
+
+3. Import the required namespaces at the top of the file:
+
+```csharp
+
+using Google.Apis.Auth.OAuth2;
+using Google.Apis.Drive.v3;
+using Google.Apis.Services;
+using Syncfusion.EJ2.Spreadsheet;
+
+```
+
+4. Add the following private fields and constructor parameters to the `SpreadsheetController` class, In the constructor, assign the values from the configuration to the corresponding fields.
+
+```csharp
+
+//variables for storing GDrive folderId, ApplicationName and Service-Accountkey credentials
+public readonly string folderId;
+public readonly string applicationName;
+public readonly string credentialPath;
+
+//constructor for assigning credentials
+public SpreadsheetController(IConfiguration configuration)
+{
+    folderId = configuration.GetValue<string>("FolderId");
+    credentialPath = configuration.GetValue<string>("CredentialPath");
+    applicationName = configuration.GetValue<string>("ApplicationName");
+}
+
+```
+
+5. Create the `SaveExcelToGoogleDrive()` method to save the document to the Google Drive.
+
+```csharp
+
+[HttpPost]
+[Route("SaveExcelToGoogleDrive")]
+public async Task<IActionResult> SaveExcelToGoogleDrive([FromForm] SaveSettings saveSettings)
+{
+    try
+    {
+         //Generate Excel file stream using Syncfusion
+        Stream generatedStream = Workbook.Save<Stream>(saveSettings);
+        //Copy to MemoryStream to ensure full content is flushed and seekable
+        MemoryStream excelStream = new MemoryStream();
+        // Copy generated stream to MemoryStream for upload
+        await generatedStream.CopyToAsync(excelStream);
+        excelStream.Position = 0; // Reset position for upload
+        // Prepare file name with extension based on SaveType
+        string fileName = saveSettings.FileName + "." + saveSettings.SaveType.ToString().ToLower();
+        // Validate service account credential file
+        if (!System.IO.File.Exists(credentialPath))
+            throw new FileNotFoundException($"Service account key file not found at {credentialPath}");
+        //Authenticate using Service Account credentials
+        GoogleCredential credential;
+        // Load Google service account credentials
+        using (var streamKey = new FileStream(credentialPath, FileMode.Open, FileAccess.Read))
+        {
+            credential = GoogleCredential.FromStream(streamKey)
+                .CreateScoped(DriveService.Scope.Drive);
+        }
+        //Initialize Google Drive API service
+        var service = new DriveService(new BaseClientService.Initializer()
+        // Initialize Google Drive API client
+        {
+            HttpClientInitializer = credential,
+            ApplicationName = applicationName,
+        });
+        //Prepare file metadata
+        var fileMetadata = new Google.Apis.Drive.v3.Data.File()
+        {
+            Name = fileName
+        };
+        //Check if file already exists in the specified folder
+        var listRequest = service.Files.List();
+        listRequest.Q = $"name='{fileName}' and trashed=false";
+        // Query Google Drive for Excel, CSV files in the specified folder
+        listRequest.Fields = "files(id)";
+        var files = await listRequest.ExecuteAsync();
+        // Reset stream position before upload (important for both update and create)
+        excelStream.Position = 0;
+        // Set MIME type dynamically based on SaveType
+         string mimeType = saveSettings.SaveType switch
+         {
+            SaveType.Xlsx => "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+            SaveType.Xls => "application/vnd.ms-excel",
+            SaveType.Csv => "text/csv",
+         };
+
+        if (files.Files.Any())
+        {
+            // If File exists Update in the existing file
+            var updateRequest = service.Files.Update(fileMetadata, files.Files[0].Id, excelStream, mimeType);
+            updateRequest.Fields = "id";
+            await updateRequest.UploadAsync();
+        }
+        else
+        {
+            // If File does not exist, Create new file
+            var createRequest = service.Files.Create(fileMetadata, excelStream,mimeType);
+            createRequest.Fields = "id";
+            await createRequest.UploadAsync();
+        }
+        return Ok("Excel file successfully saved/updated in Google Drive.");
+    }
+    catch (Exception ex)
+    {
+        return BadRequest("Error saving file to Google Drive: " + ex.Message);
+    }
+}
+
+```
+
+**Step 3:** Modify the index File in the Spreadsheet sample to using [`saveAsJson`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#saveasjson) method to serialize the spreadsheet and send it to the back-end
+
+```js
+<button class="e-btn" onClick={saveToGoogleDrive}>
+  Save to Google Drive
+</button>;
+
+// Save the current spreadsheet to Google Drive
+const saveToGoogleDrive = () => {
+  // Convert spreadsheet data to JSON
+  spreadsheet.saveAsJson().then((json) => {
+    const formData = new FormData(); // Append required fields for backend API
+    formData.append("FileName", loadedFileInfo.fileName); // File name
+    formData.append("SaveType", loadedFileInfo.saveType); // Format type (Xlsx, Xls, Csv)
+    formData.append("JSONData", JSON.stringify(json.jsonObject.Workbook)); // Spreadsheet data
+    formData.append(
+      "PdfLayoutSettings",
+      JSON.stringify({ FitSheetOnOnePage: false }),
+    ); // PDF settings
+    // Make a POST request to the backend API to save the file to Google Drive.
+    // Replace the URL with your local or hosted endpoint URL.
+    fetch(
+      "https://localhost:your_port_number/api/spreadsheet/SaveExcelToGoogleDrive",
+      {
+        method: "POST",
+        body: formData,
+      },
+    )
+      .then((response) => {
+        if (!response.ok) throw new Error(`Save failed: ${response.status}`);
+        window.alert("Workbook saved successfully to Google Drive.");
+      })
+      .catch((error) => {
+        window.alert("Error saving to Google Drive: " + error);
+      });
+  });
+};
+```
+
+N> Note: Install the Google.Apis.Drive.v3 NuGet package in the service project.