Model Binding & Custom error issues with File Manager
Hello,
I am currently using File Manager in a Blazor Web Assembly solution and ran into some issues.
1.Model binding issue: On the upload call I saw the parameters are sent on the form data.
The problem what I have is that even though I am adding the [FromForm] attribute on the controller method parameters they are coming up as null. The only way I was able to get them was by accessing the Request.Form dictionary and deserialize the objects manually.
2. Custom error issue: Taken from a sample project, I saw that on the upload method you can modify the response so that you are sending a custom error message. I am trying to introduce a validation that stops the user from uploading files if there are more than 5 on the specific repository.
While the status code comes through(and I noticed when using 400 status code the component defaults to a "file already exists" pop-up), the custom error message is not displayed anywhere.
Is there any way of modifying the default "File failed to upload" message?
As an alternative, I have tried to do this by triggering a javascript interop method to modify the message on the onerror event, but I was able to modify the message only using a timeout function. For some reason the onchange event on the file status span does not trigger when changing the status from "Uploading" to "File failed to upload".
I have attached a sample project demonstrating these issues.
Thank you,
Vlad S.
Attachment: BlazorClient3_5a08c9b6.zip
Hello Indhumathy,
Thank you for your reply. For the first issue I will follow your advice and will use the request headers, thank you.
For the second issue, as mentioned in the initial post, I do not see that custom error message being displayed anywhere?
I see the initial dialog that is asking me what to do with the file(this happens when using 400 status code).
And after that I see the image I provided in the original post with the file failed to upload message.
Even looking at the upload call in the network tab I see no trace of the custom error message.
Where should I expect to see the custom error message?
Thank you,
Vla
I'm having the same problem.
Download and upload not working.
Bad request to distribute data as null returns 400
While uploading, at first it seems as if the file exists, just like the problem experienced above. However, there is no file and the directory is empty.
----------------blazor-----------------------
<SfFileManager TValue="FileManagerDirectoryContent">
<FileManagerAjaxSettings Url="http://localhost:5008/api/Demirbas/FileOperations"
UploadUrl="http://localhost:5008/api/Demirbas/Upload"
DownloadUrl="http://localhost:5008/api/Demirbas/Download">
</FileManagerAjaxSettings>
<FileManagerNavigationPaneSettings Visible="false" />
</SfFileManager>
------Api----------------
public class DemirbasController : ControllerBase
{
private readonly IDemirbasService _demirbasService;
public PhysicalFileProvider operation;
public string basePath;
string root = "\\Content\\File";
[Obsolete]
public DemirbasController(IDemirbasService demirbasService, Microsoft.AspNetCore.Hosting.IHostingEnvironment hostingEnvironment)
{
_demirbasService = demirbasService;
this.operation = new PhysicalFileProvider();
this.basePath = hostingEnvironment.ContentRootPath;
this.operation.RootFolder(this.basePath + this.root);
}
[AllowAnonymous]
[Route("FileOperations")]
public object FileOperations([FromBody] FileManagerDirectoryContent args)
{
string path = basePath + "\\Content\\File\\" + args.Path;
if (!Directory.Exists(path))
Directory.CreateDirectory(path);
switch (args.Action)
{
case "read":
// reads the file(s) or folder(s) from the given path.
return this.operation.ToCamelCase(this.operation.GetFiles(args.Path, args.ShowHiddenItems));
case "delete":
// deletes the selected file(s) or folder(s) from the given path.
return this.operation.ToCamelCase(this.operation.Delete(args.Path, args.Names));
case "copy":
// copies the selected file(s) or folder(s) from a path and then pastes them into a given target path.
return this.operation.ToCamelCase(this.operation.Copy(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData));
case "move":
// cuts the selected file(s) or folder(s) from a path and then pastes them into a given target path.
return this.operation.ToCamelCase(this.operation.Move(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData));
case "details":
// gets the details of the selected file(s) or folder(s).
return this.operation.ToCamelCase(this.operation.Details(args.Path, args.Names, args.Data));
case "create":
// creates a new folder in a given path.
return this.operation.ToCamelCase(this.operation.Create(args.Path, args.Name));
case "search":
// gets the list of file(s) or folder(s) from a given path based on the searched key string.
return this.operation.ToCamelCase(this.operation.Search(args.Path, args.SearchString, args.ShowHiddenItems, args.CaseSensitive));
case "rename":
// renames a file or folder.
return this.operation.ToCamelCase(this.operation.Rename(args.Path, args.Name, args.NewName));
}
return null;
}
[AllowAnonymous]
[Route("Download")]
public async Task<IActionResult> Download(string downloadInput)
{
FileManagerDirectoryContent args = JsonConvert.DeserializeObject<FileManagerDirectoryContent>(downloadInput);
return operation.Download("/" + args.Path + "/", args.Names);
}
[AllowAnonymous]
[Route("Upload")]
public IActionResult Upload(string path,IList<IFormFile> uploadFiles,string action)
{
//FileManagerResponse uploadResponse;
//uploadResponse = operation.Upload(path, uploadFiles, action, null);
//if (uploadResponse.Error != null)
//{
// Response.Clear();
// Response.ContentType = "application/json; charset=utf-8";
// Response.StatusCode = Convert.ToInt32(uploadResponse.Error.Code);
// Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = uploadResponse.Error.Message;
//}
return Content("");
}
Hello Prasanth
I updated it to the latest version, but unfortunately the data continues to come up empty.
(FileManagerDirectoryContent args) comes full, there is no problem there, but when downloading and uploading, the data that should come is null.
I am using .net 8 blazor wasm.
I am using .net 7 api server located on localhost.
I think wasm is not sending the correct data to the server.
Alternatively, how can I send downloadInput data to the server?
API RETURN STACK
ArgumentNullException: Value cannot be null. (Parameter 'value')
Newtonsoft.Json.Utilities.ValidationUtils.ArgumentNotNull(object value, string parameterName)
Newtonsoft.Json.JsonConvert.DeserializeObject(string value, Type type, JsonSerializerSettings settings)
Newtonsoft.Json.JsonConvert.DeserializeObject<T>(string value, JsonSerializerSettings settings)
Newtonsoft.Json.JsonConvert.DeserializeObject<T>(string value)
PERP.API.Controllers.DemirbasController.Download(string downloadInput) in
DemirbasController.cs- FileManagerDirectoryContent args = JsonConvert.DeserializeObject<FileManagerDirectoryContent>(downloadInput);
Microsoft.AspNetCore.Mvc.Infrastructure.ActionMethodExecutor+TaskOfIActionResultExecutor.Execute(ActionContext actionContext, IActionResultTypeMapper mapper, ObjectMethodExecutor executor, object controller, object[] arguments)
Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.<InvokeActionMethodAsync>g__Awaited|12_0(ControllerActionInvoker invoker, ValueTask<IActionResult> actionResultValueTask)
Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.<InvokeNextActionFilterAsync>g__Awaited|10_0(ControllerActionInvoker invoker, Task lastTask, State next, Scope scope, object state, bool isCompleted)
Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.Rethrow(ActionExecutedContextSealed context)
Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.Next(ref State next, ref Scope scope, ref object state, ref bool isCompleted)
Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.InvokeInnerFilterAsync()
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeFilterPipelineAsync>g__Awaited|20_0(ResourceInvoker invoker, Task lastTask, State next, Scope scope, object state, bool isCompleted)
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Awaited|17_0(ResourceInvoker invoker, Task task, IDisposable scope)
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Awaited|17_0(ResourceInvoker invoker, Task task, IDisposable scope)
Microsoft.AspNetCore.Routing.EndpointMiddleware.<Invoke>g__AwaitRequestTask|6_0(Endpoint endpoint, Task requestTask, ILogger logger)
Microsoft.AspNetCore.Authorization.AuthorizationMiddleware.Invoke(HttpContext context)
Microsoft.AspNetCore.Authentication.AuthenticationMiddleware.Invoke(HttpContext context)
Swashbuckle.AspNetCore.SwaggerUI.SwaggerUIMiddleware.Invoke(HttpContext httpContext)
Swashbuckle.AspNetCore.Swagger.SwaggerMiddleware.Invoke(HttpContext httpContext, ISwaggerProvider swaggerProvider)
Swashbuckle.AspNetCore.SwaggerUI.SwaggerUIMiddleware.Invoke(HttpContext httpContext)
Swashbuckle.AspNetCore.Swagger.SwaggerMiddleware.Invoke(HttpContext httpContext, ISwaggerProvider swaggerProvider)
Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddlewareImpl.Invoke(HttpContext context)
- API HEADER
| Variable | Value |
|---|---|
| Accept | text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7 |
| Accept-Encoding | gzip, deflate, br |
| Accept-Language | tr,en-US;q=0.9,en;q=0.8 |
| Cache-Control | no-cache |
| Connection | keep-alive |
| Content-Length | 862 |
| Content-Type | application/x-www-form-urlencoded |
| Host | localhost:5008 |
| Origin | null |
| Pragma | no-cache |
| sec-ch-ua | "Not A(Brand";v="99", "Microsoft Edge";v="121", "Chromium";v="121" |
| sec-ch-ua-mobile | ?0 |
| sec-ch-ua-platform | "Windows" |
| Sec-Fetch-Dest | document |
| Sec-Fetch-Mode | navigate |
| Sec-Fetch-Site | cross-site |
| Sec-Fetch-User | ?1 |
| Upgrade-Insecure-Requests | 1 |
| User-Agent | Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36 Edg/121.0.0.0 |
Hi Mehmet,
Based on the shared sample, we were able to replicate the mentioned scenario where downloadInput data values are null when performing the download operation in the Blazor FileManager component on our end. However, to overcome this scenario in the Blazor FileManager component, we suggest that you add explicit HttpMethod bindings to the FileManager component server methods in the controller file
Refer to the below code snippets.
[DemirbasController.cs]
|
namespace PERP.API.Controllers { [Route("api/[controller]")] [EnableCors("AllowAllOrigins")] //[ApiController] //[Authorize] public class DemirbasController : ControllerBase { …
//[AllowAnonymous]
[Route("FileOperations")] [HttpPost] public object FileOperations([FromBody] FileManagerDirectoryContent args) { …
}
//[AllowAnonymous] [Route("Download")] [HttpPost] public IActionResult Download(string? downloadInput) { … }
//[AllowAnonymous] [Route("Upload")] [HttpPost]
public IActionResult Upload(string? path,IList<IFormFile> uploadFiles,string? action) { … }
} }
|
For your reference, we have attached a screenshot and your provider sample.
Screenshot:
|
|
Provider: Attached as a zip file.
Check out the attached sample and let us know if you need any further assistance.
Regards,
Prasanth Madhaiyan.
Attachment: API_95843a93.zip
