How to Upload Files to Mega Cloud Storage Using C# & .NET Core

Introduction

Introducing a game-changer in cloud integration: Mega Cloud meets .NET Core 8.0! Say goodbye to file upload woes and hello to seamless, secure, and scalable solutions. In this guide, we'll navigate the fusion of Mega Cloud's power with the versatility of .NET Core 8.0, empowering you to revolutionize your file management system. Whether you're a seasoned developer or just diving in, get ready for practical insights, code snippets, and a transformative journey. Join us as we unlock the potential of Mega Cloud and elevate your applications to new heights. Let's make file uploads a breeze together!

Step 1. Sign Up for Mega Cloud Account

Begin by signing up for a Mega Cloud account if you haven't already. Navigate to the Mega Cloud website and follow the registration process to create your account. Once done, you'll have access to your Mega Cloud dashboard.

Step 2. Install Mega SDK for .NET Core

Next, install the Mega API Client SDK for .NET Core in your project. You can do this via the NuGet package manager or by manually adding the SDK reference to your project.

You can also do this by running the following command in the Package Manager Console:

Install-Package MegaApiClient

Step 3. Integrate File Upload and Image Retrieval into Category Page Logic

Now that we have our backend methods for uploading files to Mega Cloud and retrieving images from Mega, let's integrate these functionalities into our category page HTML. We'll modify the HTML structure to include elements for handling file upload and displaying images. Follow these steps to seamlessly incorporate file upload and image display functionalities into your category page:

!-- Acknowledgment Modal -->
<div class="modal" id="aknoModal" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h6 class="modal-title">
                    Create Product Category
                </h6>
                <button type="button" class="close" data-dismiss="modal">
                    ×
                </button>
            </div>
            <!-- Modal body -->
            <div class="modal-body multi-control-form">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Name <span class="text-danger">*</span></label>
                                    <input id="txtCatName" type="text" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Group <span class="text-danger">*</span></label>
                                    <select id="ddlCatGroup" class="form-control">
                                        <option value="0">--Select--</option>
                                        <option value="1">Group-1</option>
                                        <option value="2">Group-2</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>Description<span class="text-danger">*</span></label>
                                    <textarea id="txtCatDesc" class="form-control"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Image <span class="text-danger">*</span></label>
                                    <input id="fuImage" type="file" class="form-control" accept=".jpg,.jpeg,.png,.gif,.svg" required>
                                    <span style="color:#f00;">(.jpg, .gpeg, .png, .gif, .svg)</span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Status <span class="text-danger">*</span></label>
                                    <select id="ddlStatus" class="form-control">
                                        <option value="Y">Enabled</option>
                                        <option value="N">Disabled</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button id="btnSave" type="button" class="btn btn-primary btnsend">
                    <i class="icon-send1"></i> Save
                </button>
                <button type="button" class="btn btn-danger BtnReset" data-dismiss="modal">
                    <i class="icon-x1"></i> Cancel
                </button>
            </div>
        </div>
    </div>
</div>

Create an HTML Table like below for data bind.

<div class="section-body">
    <button class="btn btn-primary" id="add-new-cat"><i class="fas fa-plus"></i> Add New</button>
    <div class="row mt-4">
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive table-invoice">
                        <table class="table table-striped table-bordered" id="CategoryTable">
                            <thead>
                                <tr>
                                    <th>SN</th>
                                    <th>Name</th>
                                    <th>Group</th>
                                    <th>Description</th>
                                    <th>Image</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                 
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Step 4. Integrate Swal2 to show different types of message

With  Swal2 integrated, you can now customize the appearance and behavior of messages according to different scenarios, providing users with clear and intuitive feedback. Please find the Installation script below.

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

Step 5.  Write the Css for Spinner or Loader when the data is fetched from DB

/* CSS for the loading spinner animation */
.lds-ring {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
}

    .lds-ring div {
        box-sizing: border-box;
        display: block;
        position: absolute;
        width: 51px;
        height: 51px;
        margin: 6px;
        border: 6px solid #3498db;
        border-radius: 50%;
        animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        border-color: #3498db transparent transparent transparent;
    }

        .lds-ring div:nth-child(1) {
            animation-delay: -0.45s;
        }

        .lds-ring div:nth-child(2) {
            animation-delay: -0.3s;
        }

        .lds-ring div:nth-child(3) {
            animation-delay: -0.15s;
        }

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

Step 6. Write the below JS code for Data Save and retrieve

<script type="text/javascript">
    $(document).ready(function () {
        $('#CategoryTable').DataTable();
        fetchData();
    });



    function fetchData() {
        // Show loading spinner
        Swal.fire({
            title: 'Please wait...',
            allowOutsideClick: false,
            showConfirmButton: false,
            html: '<div class="lds-ring"><div></div><div></div><div></div><div></div></div>'
        });

        $.ajax({
            url: '/Admin/GetCategory', // Replace with your controller endpoint URL
            type: 'GET',
            success: function (data) {
                // Clear existing table rows
                $('#CategoryTable tbody').empty();

                var serialNumber = 1; // Initialize serial number counter

                // Loop through fetched data and append to table
                $.each(data, function (index, item) {
                    // Handle null values for all fields
                    var nameValue = item.Name != null ? item.Name : 'NA';
                    var groupValue = item.Group != null ? item.Group : 'NA';
                    var descriptionValue = item.Description != null ? item.Description : 'NA';
                    var imageUrl = item.ImageUrl != null ? item.ImageUrl : 'NA'; // Image URL

                    var enabledValue = item.Enabled != null ? item.Enabled : 'NA';

                    // Check if imageUrl is 'NA' (Image Not Available)
                    var imageHtml = imageUrl != 'NA' ? '<img src="' + imageUrl + '" alt="Image" style="width: 100px; height: auto;">' : '<span>Image Not Available</span>';

                    // Append data along with icons to table
                    $('#CategoryTable tbody').append(
                        '<tr>' +
                        '<td>' + serialNumber + '</td>' + // Add serial number column
                        '<td>' + nameValue + '</td>' +
                        '<td>' + groupValue + '</td>' +
                        '<td>' + descriptionValue + '</td>' +
                        '<td>' + imageHtml + '</td>' + // Image column
                        '<td>' + enabledValue + '</td>' +
                        '<td>' +
                        '<a href="#" class="btn btn-primary btn-sm"><i class="fa fa-edit" aria-hidden="true"></i></a> ' + // Edit button
                        '<a href="#" class="btn btn-danger btn-sm" disabled><i class="fa fa-trash" aria-hidden="true"></i></a>' + // Delete button
                        '</td>' +
                        '</tr>'
                    );

                    serialNumber++; // Increment serial number for next row
                });

                // Hide loading spinner
                Swal.close();
            },
            error: function (xhr, status, error) {
                console.error('Error fetching data:', error);
                // Hide loading spinner in case of error
                Swal.close();
            }
        });
    }





    $('#add-new-cat').click(function (e) {
        $('#aknoModal').modal("show");
    });

    $('#fuImage').on('change', function () {
        var file = this.files[0];
        var maxSize = 500 * 1024; // 500 KB
        var maxWidth = 300; // Maximum width
        var maxHeight = 300; // Maximum height
        var allowedExtensions = /\.(jpg|jpeg|png|gif|svg)$/i; // Allowed file extensions

        // Check file size
        if (file.size > maxSize) {
            // Display Swal alert for file size validation
            Swal.fire({
                title: 'File Size Limit Exceeded',
                text: 'The selected image exceeds the size limit of 500 KB.',
                icon: 'warning',
            });

            // Clear the file input
            $(this).val('');
            return;
        }

        // Check file extension
        if (!allowedExtensions.test(file.name)) {
            // Display Swal alert for file extension validation
            Swal.fire({
                title: 'Invalid File Type',
                text: 'Please upload files with extensions .jpg, .jpeg, .png, .gif, or .svg only.',
                icon: 'warning',
            });

            // Clear the file input
            $(this).val('');
            return;
        }

        // Create a FileReader object
        var reader = new FileReader();

        // Read the image file as a data URL
        reader.readAsDataURL(file);

        // Set up the onload event handler
        reader.onload = function (event) {
            // Create a new image element
            var image = new Image();

            // Set the src attribute of the image to the data URL
            image.src = event.target.result;

            // Set up the onload event handler for the image
            image.onload = function () {
                // Check image dimensions
                if (this.width > maxWidth || this.height > maxHeight) {
                    // Display Swal alert for image dimensions validation
                    Swal.fire({
                        title: 'Invalid Image Dimensions',
                        text: 'The selected image dimensions should not exceed 300x300 pixels.',
                        icon: 'warning',
                    });

                    // Clear the file input
                    $('#fuImage').val('');
                }
            };
        };
    });




    $('#btnSave').on('click', function () {
        $('.error').remove();
        let isValid = 1;

        // Validate Name
        var name = $('#txtCatName').val();
        if (name === '') {
            $('#txtCatName').after('<span class="error text-danger">Name is required</span>');
            isValid = 0;
        }

        var group = $('#ddlCatGroup option:selected').val();
        if (group === '0') {
            $('#ddlCatGroup').after('<span class="error text-danger">Group selection is required</span>');
            isValid = 0;
        }

        var desc = $('#txtCatDesc').val();
        if (desc === '') {
            $('#txtCatDesc').after('<span class="error text-danger">Description is required</span>');
            isValid = 0;
        }

        var fuImage = $('#fuImage')[0].files[0];
        if (!fuImage) {
            $('#fuImage').after('<span class="error text-danger">Image is required</span>');
            isValid = 0;
        } else {
            var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.gif|\.svg)$/i;
            if (!allowedExtensions.exec(fuImage.name)) {
                alert('Please upload file having extensions .jpeg/.jpg/.png/.gif/.svg only.');
                $('#fuImage').val('');
                isValid = 0;
            }
        }

        var status = $('#ddlStatus option:selected').val();
        if (status != 'Y' && status != 'N') {
            $('#ddlStatus').after('<span class="error text-danger">Invalid status selection</span>');
            isValid = 0;
        }

        if (isValid) {
            var formData = new FormData();
            formData.append('Name', name);
            formData.append('Group', group);
            formData.append('Description', desc);
            formData.append('ImageFile', fuImage);
            formData.append('Enabled', status);
            console.log(formData);
            // Show loading spinner
            Swal.fire({
                title: 'Please wait...',
                allowOutsideClick: false,
                showConfirmButton: false,
                html: '<div class="lds-ring"><div></div><div></div><div></div><div></div></div>'
            });
            $.ajax({
                url: '/Admin/AddCategory',
                type: 'POST',
                processData: false,
                contentType: false,
                data: formData,
                success: function (data) {
                    // Hide modal
                    $('#aknoModal').modal("hide");
                    // Check if the response indicates success
                    if (data.success) {
                        // Handle success response
                        Swal.fire({
                            title: data.message,
                            icon: "success",
                        }).then((result) => {
                            if (result.isConfirmed) {
                                // Call fetchData function after clicking OK button
                                fetchData();
                            }
                        });

                    } else {
                        // Handle failure response
                        Swal.fire({
                            title: data.message,
                            icon: "error",
                        }).then((result) => {
                            if (result.isConfirmed) {
                                // Call fetchData function after clicking OK button
                                fetchData();
                            }
                        });
                    }
                },
                error: function (xhr, textStatus, errorThrown) {
                    fetchData();
                    // Hide modal
                    $('#aknoModal').modal("hide");
                    // Handle error response
                    Swal.fire({
                        title: 'Error occurred',
                        text: errorThrown,
                        icon: "error",
                    }).then((result) => {
                        if (result.isConfirmed) {
                            // Call fetchData function after clicking OK button
                            fetchData();
                        }
                    });
                }
            });

        }
    });
</script>

Step 7. Create a Modal Class for each property as per the requirement below

using Microsoft.AspNetCore.Http;

namespace Domain.Admin
{
    public class ProductCategory
    {
        public string Action {  get; set; }
        public int? ID { get; set; }
        public string Name { get; set; }
        public string Group { get; set; }
        public string Description { get; set; }
        public string ImageName { get; set; }
        public IFormFile ImageFile { get; set; }
        public string ImageUrl { get; set; }
        public string Enabled { get; set; }
        public string Created { get; set; }
        public string Modified { get; set; }
        public string ModifiedBy { get; set; }
        public string ModifiedHost { get; set; }
    }

    public class FileUploadResponse
    {
        public bool Success { get; set; }
        public string FileName { get; set; }
    }
}

Step 8. Implementing Controller Logic for Saving Categories with File Upload to Mega

   [HttpPost]
   public async Task<IActionResult> AddCategory([FromForm] ProductCategory cat)
   {
       try
       {
           // Check if image file is provided
           if (cat.ImageFile != null && cat.ImageFile.Length > 0)
           {
               // Upload the file to Mega.nz and get the response
               var uploadResponse = await UploadFileToMega("MegaUserId", "MegaPassword", cat.ImageFile.OpenReadStream(), cat.ImageFile.FileName);

               // Check if the upload was successful
               if (uploadResponse.Success)
               {
                   // Once uploaded, set the Image property of the category to the file name
                   //cat.Image = uploadResponse.FileName; // Replace this with the Mega.nz link if available

                   // Perform the database operation only if the file upload was successful
                   cat.Action = "INSERT";
                   cat.ImageName = uploadResponse.FileName;
                   var res = await _admRepo.AddProductCategory(cat);
                   dynamic responseJson = new { };
                   if (res.Result == 1)
                   {
                       // Create a JSON object with the success message
                       responseJson = new
                       {
                           success = true,
                           message = "Category added successfully"
                       };
                   }
                   else
                   {
                       responseJson = new
                       {
                           success = false,
                           message = "Category addition failed"
                       };
                   }
                   return Json(responseJson);
               }
               else
               {
                   // Handle the case where the file upload failed
                   return Json(new { success = false, message = "File upload failed" });
               }
           }

           // If no image file was provided, you might need to handle this case as well

           return Json(new { success = false, message = "No image file provided" });
       }
       catch (Exception ex)
       {
           // Handle exception
           return Json(new { success = false, message = "An error occurred" });
       }
   }

Step 9. Implementing Upload File/Images to Mega Cloud

Before this make sure you have created a Uploads folder in the root directory and a Images folder. The images folder should be located in the Uploads folder in Mega Cloud.

#region----------------Upload File To Mega Clould Drive---------------------
public async Task<FileUploadResponse> UploadFileToMega(string email, string password, Stream fileStream, string fileName)
{
    try
    {
        var client = new MegaApiClient();
        await client.LoginAsync(email, password);

        // Specify the folder where you want to upload the file
        var rootNode = await client.GetNodesAsync();
        var uploadsFolder = rootNode.FirstOrDefault(n => n.Type == NodeType.Directory && n.Name == "Uploads");

        // Get the list of all folders within the "Uploads" folder
        var uploadsFolders = await client.GetNodesAsync(uploadsFolder);

        // Search for the "Images" folder within the list of folders
        var imagesFolder = uploadsFolders.FirstOrDefault(n => n.Type == NodeType.Directory && n.Name == "Images");

        if (imagesFolder == null)
        {
            // Create "Images" folder if it does not exist
            imagesFolder = await client.CreateFolderAsync("Images", uploadsFolder);
        }

        // Generate a unique filename using GUID
        string uniqueFileName = Guid.NewGuid().ToString("N") + Path.GetExtension(fileName);

        // Upload the file to the "Images" folder with the unique filename
        await client.UploadAsync(fileStream, uniqueFileName, imagesFolder);

        await client.LogoutAsync();

        return new FileUploadResponse { Success = true, FileName = uniqueFileName };
    }
    catch (Exception ex)
    {
        // Log the error or handle it appropriately
        Console.WriteLine($"An error occurred during file upload: {ex.Message}");
        return new FileUploadResponse { Success = false, FileName = null };
    }
}

#endregion------------------------------------------------------------------

Step 10. Retrieving Images from Mega Cloud Storage

In this step, we focus on retrieving images from Mega Cloud storage that were previously uploaded alongside category data. Leveraging the backend logic we implemented earlier, we'll now integrate functionality to fetch these images and display them in our application's user interface.

#region------------------Retive the Image from Mega-------------------------
private async Task RetrieveImagesFromMega(List<ProductCategory> categories)
{
    // Mega account credentials
    string email = "MegaUserId";
    string password = "MegaPassword";

    // Initialize MegaApiClient
    var client = new MegaApiClient();

    try
    {
        // Login to Mega account
        await client.LoginAsync(email, password);

        // Iterate through each category and retrieve the image from Mega
        foreach (var category in categories)
        {
            // Retrieve the image file from Mega if ImageName is not null
            if (!string.IsNullOrEmpty(category.ImageName))
            {
                // Search for the image file by name in Mega
                var fileNode = client.GetNodes().FirstOrDefault(n => n.Name == category.ImageName);

                // If the image file exists, download it and convert to base64
                if (fileNode != null && fileNode.Type == NodeType.File)
                {
                    using (var stream = client.Download(fileNode))
                    using (var ms = new MemoryStream())
                    {
                        stream.CopyTo(ms);
                        var imageBytes = ms.ToArray();
                        var base64String = Convert.ToBase64String(imageBytes);
                        category.ImageUrl = "data:image/jpeg;base64," + base64String;
                    }
                }
                else
                {
                    // Handle case where image file is not found or not accessible
                    category.ImageUrl = null;
                }
            }
        }
    }
    finally
    {
        // Logout from Mega account
        await client.LogoutAsync();
    }
}
#endregion-------------------------------------------------------------------

Conclusion

In this article, we've covered the integration of file upload functionality with Mega Cloud storage. From frontend setup to backend implementation, each step has been detailed thoroughly. Leveraging tools like SweetAlert2 and Mega.APIClient, we've ensured a seamless user experience and robust data management.

By utilizing Mega Cloud storage, your application gains enhanced security and scalability. The user-friendly interface and smooth integration contribute to an improved user experience. Moving forward, continue exploring Mega Cloud storage and other tools to elevate your application further.

Thank you for joining us on this journey to unlock the potential of Mega Cloud storage in your web application. Happy coding!