Hi Kishor,
Thank you for your update. We completely understand your concern regarding the Syncfusion demo taking too long to upload a 6MB file. Additionally, We acknowledge that you require a working example demonstrating smooth large-file uploads using chunk upload, without relying on API calls. Since your application uses an application layer to interact with the database directly, the standard Syncfusion examples that utilize API calls may not fully align with your requirements.
To address this, We have outlined a simple Blazor example that demonstrates chunk upload functionality without external API dependencies. This example utilizes the Syncfusion Blazor File Upload component, implementing chunk upload logic directly within the Blazor component.
If you're looking to improve large-file upload performance, adjusting the ChunkSize parameter can help optimize the upload speed.
Index.razor
<SfUploader ID="UploadFiles">
<UploaderAsyncSettings SaveUrl="api/SampleData/Save" RemoveUrl="api/SampleData/Remove" ChunkSize="2097152">
</UploaderAsyncSettings>
<UploaderEvents ValueChange="OnFileSelected" OnChunkSuccess="OnChunkSuccess" OnChunkFailure="OnChunkFailure" OnChunkUploadStart="OnChunkUploading"></UploaderEvents>
</SfUploader>
</div>
@code {
private void OnFileSelected(UploadChangeEventArgs args)
{
}
private void OnChunkSuccess(SuccessEventArgs args)
{
}
private void OnChunkFailure(FailureEventArgs args)
{
}
private void OnChunkUploading(UploadingEventArgs args)
{
// Modify chunk data if needed (e.g., add headers, adjust chunk size dynamically)
// args.CurrentChunkIndex, args.CurrentRequest, args.CurrentChunk are available
}
private void SaveUploadedFile()
{
// Implement logic to save the uploaded file
// Example: Moving temporary chunks to the final storage location
}
}
|
SampleDataController.cs
using Microsoft.AspNetCore.Http.Features;
using Microsoft.AspNetCore.Mvc;
using System.Net.Http.Headers;
namespace BlazorApp1
{
[Route("api/[controller]")]
public class SampleDataController : Controller
{
public string uploads = Path.Combine(Directory.GetCurrentDirectory(),
"Uploaded Files"); // Set your desired upload directory path
[HttpPost("[action]")]
public async Task<IActionResult> Save(IFormFile UploadFiles)
{
try
{
if (UploadFiles.Length > 0)
{
var fileName = UploadFiles.FileName;
// Create upload directory if it doesn't exist
if (!Directory.Exists(uploads))
{
Directory.CreateDirectory(uploads);
}
if (UploadFiles.ContentType == "application/octet-stream") //Handle chunk upload
{
// Fetch chunk-index and total-chunk from form data
var chunkIndex = Request.Form["chunk-index"];
var totalChunk = Request.Form["total-chunk"];
// Path to save the chunk files with .part extension
var tempFilePath = Path.Combine(uploads, fileName + ".part");
using (var fileStream = new FileStream(tempFilePath,
chunkIndex == "0" ? FileMode.Create : FileMode.Append))
{
await UploadFiles.CopyToAsync(fileStream);
}
// If all chunks are uploaded, move the file to the final destination
if (Convert.ToInt32(chunkIndex) == Convert.ToInt32(totalChunk) - 1)
{
var finalFilePath = Path.Combine(uploads, fileName);
// Move the .part file to the final destination without the .part extension
System.IO.File.Move(tempFilePath, finalFilePath);
// Here you can add logic to save the file information to your database
// or move the file to its final storage location
return Ok(new { status = "File uploaded successfully" });
}
return Ok(new { status = "Chunk uploaded successfully" });
}
else //Handle normal upload
{
var filePath = Path.Combine(uploads, fileName);
using (var fileStream = new FileStream(filePath, FileMode.Create))
{
await UploadFiles.CopyToAsync(fileStream);
}
return Ok(new { status = "File uploaded successfully" });
}
}
return BadRequest(new { status = "No file to upload" });
}
catch (Exception ex)
{
return StatusCode(500, new { status = "Error", message = ex.Message });
}
}
// Method to handle file removal (optional if needed)
public async Task<IActionResult> Remove(string UploadFiles)
{
try
{
var filePath = Path.Combine(uploads, UploadFiles);
if (System.IO.File.Exists(filePath))
{
System.IO.File.Delete(filePath);
return Ok(new { status = "File deleted successfully" });
}
else
{
return NotFound(new { status = "File not found" });
}
}
catch (Exception ex)
{
return StatusCode(500, new { status = "Error", message = ex.Message });
}
}
}
}
|
For further reference, you may find these documentation links helpful:
This SampleDataController provides a basic implementation for handling chunk uploads on the server side. It temporarily saves each chunk and combines them once all chunks are received. You may need to modify this logic to align with your application layer and database storage requirements.
Regards,
Priyanka K
Attachment:
SyncfusionFileUpload_a0f9e25.zip
