Uploading Files in Blazor Web Assembly & ASP.NET Core Web API [Blazor Topics] | AK Academy 

Thank you so much for this amazing feedback

Thank you so much for that nice support

Hi dear That's very forget about SingleOrDefaultAsync() so this will give you a collection of file and then put them within a foreach() in the client and receive an array of files in the server instead of single file

Glad it was helpful! Thanks for nice feedback

Thanks for reaching out Could you share more details about the code and issue via my Twitter account @AhmadMozaffar99 Thank you

So happy for that thanks

Hi dear Basically one of the solution is to remove the size limit, and your action within the controller you can handle that manually like if(file.Length > 50000) return BadRequest("The file cannot be bigger than 5mb");

@@ahmad.mozaffar Thank you. I'm already doing that. The problem is that the entire file is uploaded first whereas RequestSizeLimit stops the request after it reaches the limit (I think).

I have checked that, I think this is currently not possible because the server reject the request before it processes it so you can take control of the response. The best way in this case is to make the validation for the size of the file client side then push if it's valid this quicker and safer

Welcome glad you liked it Ramadan Kareem for you too Yes actually I wake up at 04:00 some times 03:30 AM but how you know that?

Raymond Bell thanks a lot for your feedback Yea you can set the limit on the level of the server and on the client using the options while registering the service

@@ahmad.mozaffar HI. Whereabouts do i set that? Thanks!

@@ahmad.mozaffar Its ok i solved my problem

Hi dear Thanks for your feedback Did you make sure that the name of the parameter you are sending is the same of the parameter name in controller’s action?

​@@ahmad.mozaffar Oh! yeah it's correct, All work fine! Thaks for you response, and exist one way for make this operation without nuget package?

Hi dear Thanks for your interest and reaching out When the server sends you back a HttpResponseMessage just do like this var response = sendrequest........ var contentAsString = await response.Content.ReadAsStringAsync(); Then you have the content you can extract the filename from it Hope that helps you solve your issue

@@ahmad.mozaffar Got it Thanks a ton!

Charles Happy for that

Actually I didn't get the question well, could you explain more please?

@@ahmad.mozaffar Actually, I have a project where the UI part I developed in Blazor Web Assembly with (PWA), and for API I developed in DotNetCore, API is on another domain and UI is on another domain. Now I want to Upload an employee profile photo and one document like (Gov. ID proof). So, My questions are 1) How to upload photos and documents in the UI domain which is Blazor Web Assembly? 2) What is good practice to store Images and documents, either the API domain or the UI domain?

Sorry for late reply, I totally got your point, all the files have to be on the server-side The best way to store your file is to use Azure Blob Storage, and you can have two containers within it one called ui & domain for example, it's very easy to setup and almost free.

@@ahmad.mozaffar Thank you so much.

Glad you liked it Sure I can I will mention here a link on my website for such a task in a while Thank you

Hi dear Thanks for reaching out just the ...../{thefolder and your image} for example localhost:1000:/uploads/1.jpg

@@ahmad.mozaffar Owh.. thankyou.. your content is great!

Gadmon HP so happy to hear that Thanks

Hi You can do that by simply retrieve the name of the folder and the name of the uploaded file concatenated with the API url for example localhost:5555/uploads/test-image-11112222.jpg Navigate to the url and you will get the files

Well when I downloaded your source code on githib it works perfect. So I will try to see difference. Thanks

Hey thanks for your interest Okay great Try it and inform me with the result

AK Academy Thanks for the input. It appears that the project you created was while it’s still in preview. When I created it was production release 1st version. I would think something like . would be okay in a release 1 if it worked in preview, It’s old school file uploading. They do have a blazor control . but the on change event for that doesn’t fire either. My project was a professional project I am being paid for (my first of blazor ) I hate to use preview but if I can’t get it to work I may have to and upgrade it later. The risk of being an early adopter I guess. I like blazor mvvm style and want to see it work. I may try is as a blazor server _hosting

Charles Yeah that could be the issue because the video is months ago while Blazor WASM wasn’t released yet for public but while you have the latest version of .NET and VS everything should work very fine

@@ahmad.mozaffar I wish you could see me slap my head and call myself a dummy. I did not put the @ in front of the onchange in the input tag I still maintain quite a few asp.net applications and it did not look like an error in my head and compiler had no issue with it. Took me 24 hours, but it was actually worth it, because I studied every byte of the code and learned a lot. I appreciate all your videos, going to do SignalR next. Thank you.

Yea that’s a cool idea but meanwhile you can take advantage of using this library joshclose.github.io/CsvHelper/ Very powerful and super easy to use

بشير منافيخي - Bashir Manafikhi Sorry, I didn’t got your question

@@ahmad.mozaffar why don't we upload files to client side project?

Yea sure, in this demo I upload the file to the server via ASP.Net Core API

prathamesh shende Hi thanks for your interest Here you can find exactly what you want ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-UzpnwrQQ4uY.html

@@ahmad.mozaffar Thanks Buddy. Got What I need exactly.

prathamesh shende Happy for that

Hi dear That's very forget about SingleOrDefaultAsync() so this will give you a collection of file and then put them within a foreach() in the client and receive an array of files in the server instead of single file

Hi dear Thanks for reaching out Could you please provide me with more details about the issue And yes .NET Core doesn't support Server.MapPath() you can do this instea Directory.GetCurrentDirectory() + "/wwwroot/" + "YOUR FILES PATH in THE PROJECT"

@@ahmad.mozaffar Thank you, didn't think of wwwroot I assumed it was / as root. so I am doing Directory.GetCurrentDirectory() + "/files/" Let me try that. One issue that is interesting is File.Exists() does not throw error if the file does not exist. Which makes sense.

Charles Happy to know that it works fine

Hi dear Which link exactly?, the only important link for this video is the GitHub repo and it's working fine

@@ahmad.mozaffar The link to "Getting Started with Blazor Web Assembly:"

Surely dear Here to help

@@ahmad.mozaffar please..see code below... model public class TblstudentDocument { public int Id { get; set; } public int? StudentId { get; set; } public string DocumentType { get; set; } public int? Typeid { get; set; } public string DocumentName { get; set; } public string DocumentFile { get; set; } public int? Status { get; set; } public IFormFile UploadedFile { get; set; } } This is API [HttpPost("Save")] public async Task DocumentInsert( [FromForm]TblstudentDocument document) { var file = Request.Form.Files; if (file == null) { return BadRequest(new { code = "08", Message = "Empty Model" }); } else { using (connection) { try { connection.Open(); document.UploadedFile = file[0]; var returnvalue = await GetRepo.saveDocument(document, connection); if (returnvalue != null) { return Ok(new { code = "03", Message = "Data Saved Success", data = returnvalue }); } else { return BadRequest(new { code = "01", Message = "Data Not Saved" }); } } catch (Exception ee) { return BadRequest(new { code = "06", Message = ee.Message }); } finally { connection.Close(); } } } } my repo public async Task SaveStudentDocument(TblstudentDocument details, MemoryStream ff) { using (var content = new MultipartFormDataContent()) { content.Headers.ContentDisposition = new ContentDispositionHeaderValue("form-data"); StringContent ss = new StringContent(JsonConvert.SerializeObject(details)); content.Add(new StreamContent(ff, (int)ff.Length), "UploadedFile",details.DocumentFile); content.Add(new StringContent(details.DocumentType), "DocumentType"); content.Add(new StringContent(details.DocumentName), "DocumentName"); content.Add(new StringContent(details.StudentId.ToString()), "StudentId"); content.Add(new StringContent(details.Typeid.ToString()), "typeid"); content.Add(ss, "data"); var response = await httpClient.PostAsync("api/Document/save", content); return JsonConvert.DeserializeObject(await response.Content.ReadAsStringAsync()); } throw new System.NotImplementedException(); } Everything ok till this repo but when memoryStream get data but when i recived data in api the length of data is 0

@@ahmad.mozaffar i am using blazor server app

And it works fine when test from postman

When push the request from Blazor, Do you get only the file as 0 length or also other properties come empty?

Thanks happy for that. And this is exactly what I’m doing, a new course is being recorded called “Advanced Notifications System with ASP.NET Core 5.0, SignalR, Blazor WebAssembly and UWP apps” It will be online at the beginning of February

@@ahmad.mozaffar what i meant was push notification like android notification center like when you got new message in whatsapp. Not like fb new notification when we got red button in chiming bell icon. Is it the same with your course direction?

Ah okay you mean push notifications a native notification from the browser to the operating system

@@ahmad.mozaffar yes. Like the example microsoft team put in blazing pizza app. But with api.