1. Home
  2. Forum
  3. Blazor
  4. Using File Uploader from Blazor Wasm

Using File Uploader from Blazor Wasm

Dear Support,

I need clarity on how to use the SfUploader component. I am using Blazor Wasm.

1. Do we need to install the Syncfusion.Blazor.Inputs nuget package when I have already installed Syncfusion.Blazor package and all other controls are working fine.

2. Do we install this package in the server project or the client project or both?

3. Out of the box, if I only have this code: 

            <SfUploader></SfUploader>

without any controller side code (just as mentioned in your documents), does this upload and save files to any location on the server? What is that location? I get the message file uploaded successfully but I dont see the file on the server side.

4. If I do not write any server side controller code, how do I set the destination directory where the files will be uploaded?

Regards,
Amjad.

3 Replies 1 reply marked as answer
PM Ponmani Murugaiyan Syncfusion Team March 8, 2021 01:47 PM UTC

Hi Amjad, 

Greetings from Syncfusion support. 

Query1: Do we need to install the Syncfusion.Blazor.Inputs nuget package when I have already installed Syncfusion.Blazor package and all other controls are working fine. 
 
No need to install the individual Nuget package (Syncfusion.Blazor.Inputs) if you have already using Syncfusion.Blazor package, which contains all component dependencies. For more information, please find the documentation below. 


Query2: Do we install this package in the server project or the client project or both? 
 
Installing Nuget packages in client side is enough for Blazor WASM application. 
 
Query3: Without any controller side code (just as mentioned in your documents), does this upload and save files to any location on the server? What is that location? I get the message file uploaded successfully but I dont see the file on the server side. 
 
No, without server side API end-point(Controller code), the files will not be saved in the server. We need to add the controller code to upload the files in server. Please find the controller code for save and remove action in the below documentation. 

 
Query4: If I do not write any server side controller code, how do I set the destination directory where the files will be uploaded?  
 
You can upload the files and files of folders in the Blazor application without specifying the server-side API end point(Controller code) using AsyncSettings. You can get the uploaded files as file stream in the ValueChange event argument. Now, you can write the save handler inside ValueChange event to save the files to desired location. For more information, please find the below documentation. 


Kindly check with the above answers helps you to achieve your requirement. Please get back us if you need further assistance. 

Regards, 
Ponmani M  


Marked as answer
BD Boot Dat replied to Ponmani Murugaiyan November 27, 2022 09:44 AM UTC


I'm having some challenges with the server-side API end-point(Controller code),

  1. Method 'Trim' has 0 parameter(s) but is invoked with 1 argument(s)
  2. Argument type 'Microsoft.Extensions.Primitives.StringSegment' is not assignable to parameter type 'string?'
  3. Cannot resolve method 'Open(Microsoft.Extensions.Primitives.StringSegment, System.IO.FileMode)


can you provide a zipped sample that I can look upon?

I'd prefer without a server-side API end-point because I used that in my previous Blazor Server project and files were being uploaded to my path folder. but trying the same method on my now wasm project, the files don't get uploaded to the path although It says uploaded successfully. 


UD UdhayaKumar Duraisamy Syncfusion Team November 28, 2022 02:37 PM UTC

You can refer to the below forum regarding your requirement.

Syncfusion Forum : https://www.syncfusion.com/forums/157285/blazor-file-upload-not-working-webassembly


Also, you can to the below public blog forum regarding your requirement.

https://stackoverflow.com/questions/61007882/blazor-not-able-to-save-file-in-folder-wwwroot-img


Loader.
Up arrow icon