Scribd
Upload
3 views

Image uploading - HSM

The document discusses two methods of image uploading: File System-based and Base64 Encoded. File System-based uploading involves directly uploading images to the server, while Base64 Encoded uploading converts images to a string format for transmission. Key differences include efficiency, payload size, and database storage implications, with performance comparisons highlighting faster load times for File System-based uploads.

Uploaded by

urushajoshi521
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Image uploading - HSM

The document discusses two methods of image uploading: File System-based and Base64 Encoded. File System-based uploading involves directly uploading images to the server, while Base64 Encoded uploading converts images to a string format for transmission. Key differences include efficiency, payload size, and database storage implications, with performance comparisons highlighting faster load times for File System-based uploads.

Uploaded by

urushajoshi521
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

Image uploading

TOC:

1. File System-based Image Uploading


2. Base64 Encoded Image Uploading
3. Use cases
4. Key Differences
5. Performance Comparison

1. File System-based Image Uploading

● Technical Term: File-based uploading, File system storage, or Multipart form data
uploading.
● Description: In this method, the image file is uploaded directly to the server using a form
or AJAX request. The server typically processes the image as a file stream and saves it
to the file system (e.g., in wwwroot/images or any other designated folder).
● Characteristics: The image is stored in a binary format directly as a file on the server’s
disk or cloud storage (e.g., Azure Blob, AWS S3).

Examples:

● Form-based uploading
● AJAX-based uploading
● Drag-and-drop image uploading
● Chunked image uploading

Use Cases:

● Storing images in a physical directory on the server.


● Serving images from a server’s file system or cloud storage.

2. Base64 Encoded Image Uploading

● Technical Term: Base64 encoding image upload.


● Description: The image is converted into a Base64 string on the client-side and sent as
part of the request (usually as JSON). On the server-side, the string is decoded back into
an image and stored in the file system or database.
● Characteristics: The image is handled as a string during transmission, often used when
images are transmitted as part of a JSON request, such as when sending metadata or
for scenarios where binary data isn't suitable for transmission (e.g., REST APIs that
prefer JSON payloads).

3. Use Cases:

● When transmitting image data alongside other JSON-encoded data.


● When the image is to be stored directly in a database as Base64 or in situations where
binary files are not allowed or suitable for transmission.

4. Key Differences

● File system-based uploading: Works with binary file streams, directly saves files, and
is more efficient for large files. Suitable for serving files directly from the server.
● Base64 encoding: Images are sent as string data, which can increase payload size
(Base64 encoding increases the file size by approximately 33%). It’s less efficient for
large files but useful in certain scenarios where direct file streams are not practical.
6. Performance Comparison
1. Initial Load Time:
○ File System-Based: Typically faster initial load times due to smaller payloads
and potential browser caching.
○ Base64-Encoded: Larger payloads can lead to slower initial load times.
2. Subsequent Loads:
○ File System-Based: Cached images reduce load times for subsequent requests.
○ Base64-Encoded: No separate caching for images, potentially leading to slower
loads on repeat visits.
3. Database Size:
○ File System-Based: Database remains smaller as it only stores file paths or
URLs.
○ Base64-Encoded: Database size can grow significantly due to larger Base64
strings.

Example :

AJAX-based Image Uploading


Frontend –
<!DOCTYPE html>
<html>
<head>
<title>File Upload</title>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>Upload Image</h2>
<form id="uploadForm">
<input type="text" id="productName" placeholder="Product
Name">
<input type="file" id="imageInput" name="productImage">
<button type="button" onclick="uploadFile()">Upload</button>
<button type="button"
onclick="uploadBase64Image()">Bas64stringUpload</button>

<input type="text" id="ImageName" placeholder="Image Name"


required>
<button type="button" onclick="GetImage()">Get
Image</button>
<button type="button" onclick="GetBase64Image()">Get Base64
Image</button>
<img id="productImage" src="" alt="Product Image">
</form>

<script>
let baseUrl = "https://localhost:7254/api";
function uploadFile() {
var formData = new FormData();
var productName = $("#productName").val();
var productImage = $("#imageInput")[0].files[0];

if (productImage) {
formData.append("productImage", productImage);

let uploadUrl = baseUrl +


'/ProductsApi/UploadFile?productName=' + productName;

$.ajax({
url: uploadUrl,
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function (response) {
alert(response.message);
},
error: function (xhr, status, error) {
alert("Error: " + error);
}
});
} else {
alert("Please select a file to upload.");
}
}

function GetImage(){
var fileName = $('#ImageName').val(); // Example file
Name
var productUrl = baseUrl +
'/ProductsApi/GetImage?fileName=' + fileName;

$.ajax({
url: productUrl,
type: 'GET',
success: function (data) {
if (data && data.imageUrl) {
var imageUrl = baseUrl +
'/ProductsApi/GetImage?fileName='+ data.productImage;
$('#productImage').attr('src',
data.imageUrl);
} else {
alert("Image not found.");
}
},
error: function (xhr, status, error) {
alert("Error: " + error);
}
});
}
}

</script>
</body>
</html>

BackEnd -
Entity Framework Model:
using System.ComponentModel.DataAnnotations;

namespace YourNamespace.Models
{
public class Product
{
[Key]
public int ProductId { get; set; }
public string ProductName { get; set; }
public decimal ProductPrice { get; set; }
public string ProductImage { get; set; }
public string ImagePath { get; set; }
}
}

Controller:
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using YourNamespace.Models;
using YourNamespace.Repositories;
using System;
using System.IO;
using System.Threading.Tasks;

namespace YourNamespace.Controllers
{
public class ProductController : Controller
{
private readonly IProductRepository _productRepository;

public ProductController(IProductRepository productRepository)


{
_productRepository = productRepository;
}

[HttpPost]
public async Task<IActionResult> UploadFile(IFormFile productImage, string
productName, decimal productPrice)
{
if (productImage != null && productImage.Length > 0)
{
var fileName = Guid.NewGuid() +
Path.GetExtension(productImage.FileName);
var filePath = Path.Combine(Directory.GetCurrentDirectory(),
"wwwroot/images", fileName);

using (var stream = new FileStream(filePath, FileMode.Create))


{
await productImage.CopyToAsync(stream);
}

// Save product info to the database


var product = new Product
{
ProductName = productName,
ProductPrice = productPrice,
ProductImage = fileName,
ImagePath = filePath
};

_productRepository.AddProduct(product);
return Ok(new { message = "File uploaded successfully" });
}
return BadRequest(new { message = "No file uploaded" });
}
}
}

Repository Interface:
using YourNamespace.Models;
namespace YourNamespace.Repositories
{
public interface IProductRepository
{
void AddProduct(Product product);
}
}

Repository Implementation:
using YourNamespace.Data;
using YourNamespace.Models;

namespace YourNamespace.Repositories
{
public class ProductRepository : IProductRepository
{
private readonly ApplicationDbContext _context;

public ProductRepository(ApplicationDbContext context)


{
_context = context;
}

public void AddProduct(Product product)


{
_context.Products.Add(product);
_context.SaveChanges();
}
}
}

Base64 Encoded Image Uploading :


<!DOCTYPE html>
<html>
<head>
<title>File Upload</title>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>Upload Image</h2>
<form id="uploadForm">
<input type="text" id="productName" placeholder="Product
Name">
<input type="file" id="imageInput" name="productImage">
<button type="button" onclick="uploadFile()">Upload</button>
<button type="button"
onclick="uploadBase64Image()">Bas64stringUpload</button>

<input type="text" id="ImageName" placeholder="Image Name"


required>
<button type="button" onclick="GetImage()">Get
Image</button>
<button type="button" onclick="GetBase64Image()">Get Base64
Image</button>
<img id="productImage" src="" alt="Product Image">
</form>

<script>
let baseUrl = "https://localhost:7254/api";

function uploadBase64Image() {
var file =
document.getElementById("imageInput").files[0];
var reader = new FileReader();

reader.onloadend = function () {
var base64String = reader.result.replace("data:",
"").replace(/^.+,/, "");

$.ajax({
url: baseUrl+ '/ProductsApi/UploadBase64Image',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({
ProductImage: $("#productName").val(),
base64Image: base64String
}),
success: function (response) {
alert(response.message);
},
error: function (xhr, status, error) {
alert("Error: " + error);
}
});
};

reader.readAsDataURL(file);
}

function GetBase64Image(){
var productId = 1; // Example product ID
var base64Url = baseUrl +
'/ProductsApi/GetBase64Image?id=' + productId;

$.ajax({
url: base64Url,
type: 'GET',
success: function (data) {
if (data && data.base64Image) {
$('#productImage').attr('src',
data.base64Image);
} else {
alert("Image not found.");
}
},
error: function (xhr, status, error) {
alert("Error: " + error);
}
});

</script>
</body>
</html>
Backend (ASP.NET Core MVC Controller and Repository)

Controller:

using Microsoft.AspNetCore.Mvc;
using YourNamespace.Models;
using YourNamespace.Repositories;
using System;
using System.IO;

namespace YourNamespace.Controllers
{
public class ProductController : Controller
{
private readonly IProductRepository _productRepository;

public ProductController(IProductRepository productRepository)


{
_productRepository = productRepository;
}

[HttpPost]
public IActionResult UploadBase64Image([FromBody] Base64ImageModel model)
{
if (model == null || string.IsNullOrEmpty(model.Base64Image))
{
return BadRequest(new { message = "Invalid image data." });
}

try
{
var imageBytes = Convert.FromBase64String(model.Base64Image);
var fileName = Guid.NewGuid() + ".jpg";
var filePath = Path.Combine(Directory.GetCurrentDirectory(),
"wwwroot/images", fileName);

System.IO.File.WriteAllBytes(filePath, imageBytes);
// Save product info to the database
var product = new Product
{
ProductName = model.ProductName,
ProductPrice = model.ProductPrice,
ProductImage = fileName,
ImagePath = filePath
};

_productRepository.AddProduct(product);
return Ok(new { message = "Image uploaded successfully." });
}
catch (Exception ex)
{
return StatusCode(500, new { message = "Error saving image", error =
ex.Message });
}
}
}

public class Base64ImageModel


{
public string ProductName { get; set; }
public decimal ProductPrice { get; set; }
public string Base64Image { get; set; }
}
}

Image Retrieval :

1. File System-Based Image Retrieval

Backend (ASP.NET Core MVC)

Controller: ProductController.cs

using Microsoft.AspNetCore.Mvc;
using System.IO;

public class ProductController : Controller


{
// Action to serve image files
[HttpGet]
public IActionResult GetImage(string fileName)
{
if (string.IsNullOrEmpty(fileName))
{
return BadRequest("File name is not provided.");
}

var filePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/images",


fileName);

if (!System.IO.File.Exists(filePath))
{
return NotFound("File not found.");
}

var fileBytes = System.IO.File.ReadAllBytes(filePath);


return File(fileBytes, "image/jpeg"); // Adjust MIME type based on image format
}

// Action to get product details including image file name


[HttpGet]
public IActionResult GetProduct(int id)
{
var product = _productRepository.GetProductById(id);
if (product == null)
{
return NotFound();
}

return Json(product);
}
}

Frontend (jQuery AJAX)

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retrieve Product Image</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<img id="productImage" src="" alt="Product Image">

<script>
$(document).ready(function () {
var productId = 1; // Example product ID
var productUrl = '/Product/GetProduct?id=' + productId;

$.ajax({
url: productUrl,
type: 'GET',
success: function (data) {
if (data && data.productImage) {
var imageUrl = '/Product/GetImage?fileName=' + data.productImage;
$('#productImage').attr('src', imageUrl);
} else {
alert("Image not found.");
}
},
error: function (xhr, status, error) {
alert("Error: " + error);
}
});
});
</script>
</body>
</html>

2. Base64 String-Based Image Retrieval

Backend (ASP.NET Core MVC)

Controller: ProductController.cs

using Microsoft.AspNetCore.Mvc;
using System;
using System.IO;

public class ProductController : Controller


{
// Action to get Base64 encoded image
[HttpGet]
public IActionResult GetBase64Image(int id)
{
var product = _productRepository.GetProductById(id);
if (product == null || string.IsNullOrEmpty(product.ProductImage))
{
return NotFound("Product or image not found.");
}

var filePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/images",


product.ProductImage);
if (!System.IO.File.Exists(filePath))
{
return NotFound("Image file not found.");
}

var fileBytes = System.IO.File.ReadAllBytes(filePath);


var base64String = Convert.ToBase64String(fileBytes);

return Json(new { base64Image = "data:image/jpeg;base64," + base64String });


}
}

Frontend (jQuery AJAX)

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retrieve Base64 Product Image</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<img id="productImage" src="" alt="Product Image">

<script>
$(document).ready(function () {
var productId = 1; // Example product ID
var base64Url = '/Product/GetBase64Image?id=' + productId;

$.ajax({
url: base64Url,
type: 'GET',
success: function (data) {
if (data && data.base64Image) {
$('#productImage').attr('src', data.base64Image);
} else {
alert("Image not found.");
}
},
error: function (xhr, status, error) {
alert("Error: " + error);
}
});
});
</script>
</body>
</html>

You might also like