{"id":53523,"date":"2020-07-27T08:00:58","date_gmt":"2020-07-27T06:00:58","guid":{"rendered":"https:\/\/code-maze.com\/?p=53523"},"modified":"2024-01-31T15:17:03","modified_gmt":"2024-01-31T14:17:03","slug":"blazor-webassembly-file-upload","status":"publish","type":"post","link":"https:\/\/code-maze.com\/blazor-webassembly-file-upload\/","title":{"rendered":"File Upload with Blazor WebAssembly and ASP.NET Core Web API"},"content":{"rendered":"

In the previous article<\/a>, we have created a form where we had to manually type the image URL. But of course, this is not the solution we are aiming for. In this article, we are going to modify that logic and learn about file upload with Blazor WebAssembly. We are going to add the server logic first and then we are going to implement the client-side upload functionality.<\/p>\n

To download the source code for this article, you can visit the File Upload with Blazor WebAssembly repository<\/a>.<\/div>\n

For the complete navigation for this series, you can visit the Blazor Series page<\/a>.<\/p>\n

Time to start.<\/p>\n

File Upload – ASP.NET Core Web API Implementation<\/h2>\n
Before we start with the Web API upload implementation, we want to mention that we have a great article on this topic<\/a> and if you like to learn more about this topic, feel free to read it.<\/div>\n

That said, let\u2019s start with the Web API implementation.<\/p>\n

The first thing we are going to do is to create a new StaticFiles<\/code> folder and inside a new Images<\/code> folder. Then, let\u2019s create a new Upload<\/code> controller and modify it with a new Upload<\/code> action:<\/p>\n

[Route(\"api\/upload\")]\r\n[ApiController]\r\npublic class UploadController : ControllerBase\r\n{\r\n    [HttpPost]\r\n    public IActionResult Upload()\r\n    {\r\n        try\r\n        {\r\n            var file = Request.Form.Files[0];\r\n            var folderName = Path.Combine(\"StaticFiles\", \"Images\");\r\n               var pathToSave = Path.Combine(Directory.GetCurrentDirectory(), folderName);\r\n\r\n            if (file.Length > 0)\r\n            {\r\n                var fileName = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('\"');\r\n                var fullPath = Path.Combine(pathToSave, fileName);\r\n                var dbPath = Path.Combine(folderName, fileName);\r\n\r\n                using (var stream = new FileStream(fullPath, FileMode.Create))\r\n                {\r\n                    file.CopyTo(stream);\r\n                }\r\n\r\n                return Ok(dbPath);\r\n            }\r\n            else\r\n            {\r\n                return BadRequest();\r\n            }\r\n        }\r\n        catch (Exception ex)\r\n        {\r\n            return StatusCode(500, $\"Internal server error: {ex}\");\r\n        }\r\n    }\r\n}\r\n<\/pre>\n
We extract the file from the Request<\/code> and create paths for the local storage and the database. After that, we just copy the file to the stream and return the path for the database. Additionally, take note that you have to include the System.Net.Http.Headers<\/code> for the ContentDispositionHeaderValue<\/code> class. 
 We use the synchronous way to read from the form body, but you can do it in an asynchronous way as well. You can read our Upload Files article<\/a> to read more about the async way of reading from the form body and why should we do it.<\/div><\/p>\n
Now, we have to make our StaticFiles<\/code> folder servable for the client application:<\/p>\n
app.UseStaticFiles();\r\napp.UseStaticFiles(new StaticFileOptions()\r\n{\r\n    FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), @\"StaticFiles\")),\r\n    RequestPath = new PathString(\"\/StaticFiles\")\r\n});\r\n<\/pre>\n
And that\u2019s all it takes.<\/p>\n
Take note that we are not disabling the request size limit, because we are going to restrict the size of the file we want to upload.<\/p>\n
File Upload with Blazor WebAssembly<\/h2>\n
With the server-side in place, we can continue with the File Upload with Blazor WebAssembly.<\/p>\n
We are going to show you how to use a third-party library to upload our files (if we use the older version of Blazor WebAssembly), and then how to do the same thing using without a third-party library supported from .NET 5 and above.<\/strong><\/p>\n
The first thing we are going to do is to install the Tewr.Blazor.FileReader<\/code> library:<\/p>\n
\"File<\/a><\/p>\n
After the installation, we have to register it in the Program.cs<\/code> class:<\/p>\n
builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(\"https:\/\/localhost:5011\/api\/\") });\r\nbuilder.Services.AddScoped<IProductHttpRepository, ProductHttpRepository>();\r\nbuilder.Services.AddFileReaderService(o => o.UseWasmSharedBuffer = true);\r\n\r\nawait builder.Build().RunAsync();\r\n<\/pre>\n
The AddFileReaderService<\/code> method resides in the Tewr.Blazor.FileReader<\/code> namespace. Additionally, we are using the UseWasmSharedBuffer<\/code> to speed up the upload process. This option is not available for the server-side Blazor.<\/p>\n
Now, let\u2019s modify the IProductHttpRepository<\/code> interface:<\/p>\n
public interface IProductHttpRepository\r\n{\r\n    Task<PagingResponse<Product>> GetProducts(ProductParameters productParameters);\r\n    Task CreateProduct(Product product);\r\n    Task<string> UploadProductImage(MultipartFormDataContent content);\r\n}\r\n<\/pre>\n
And the ProductHttpRepository<\/code> class:<\/p>\n
public async Task<string> UploadProductImage(MultipartFormDataContent content)\r\n{\r\n    var postResult = await _client.PostAsync(\"https:\/\/localhost:5011\/api\/upload\", content);\r\n    var postContent = await postResult.Content.ReadAsStringAsync();\r\n\r\n    if (!postResult.IsSuccessStatusCode)\r\n    {\r\n        throw new ApplicationException(postContent);\r\n    }\r\n    else\r\n    {\r\n        var imgUrl = Path.Combine(\"https:\/\/localhost:5011\/\", postContent);\r\n        return imgUrl;\r\n    }\r\n}\r\n<\/pre>\n
Creating Component<\/h3>\n
To continue, let\u2019s create a new ImageUpload<\/code> component (with both razor and cs files) in the Shared<\/code> folder.<\/p>\n
We are going to modify the razor file first:<\/p>\n
<input type=\"file\" @ref=\"_input\" @onchange=\"HandleSelected\" accept=\".jpg, .jpeg, png\" \/>\r\n@if (ImgUrl != null)\r\n{\r\n    <div>\r\n        <img src=\"@ImgUrl\" style=\"width:300px\" \/>\r\n    <\/div>\r\n}\r\n<\/pre>\n
So, here we use the input file control with the @ref<\/code> directive, @onchange<\/code> event, and the accept<\/code> attribute to restrict the file types we want to allow. Then, we display our uploaded image if the ImgUrl<\/code> property is not null. This property will be populated as soon as the upload action is finished. Additionally, we are going to set this property as a parameter because we are going to use this component for the Edit form as well. Of course, when we edit the product, it already has the image path assigned, and all we have to do is to pass that path to the Upload component.<\/p>\n
Now, we have to modify the class file:<\/p>\n
public partial class ImageUpload\r\n{\r\n    private ElementReference _input;\r\n\r\n    [Parameter]\r\n    public string ImgUrl { get; set; }\r\n    [Parameter]\r\n    public EventCallback<string> OnChange { get; set; }\r\n    [Inject]\r\n    public IFileReaderService FileReaderService { get; set; }\r\n    [Inject]\r\n    public IProductHttpRepository Repository { get; set; }\r\n\r\n\r\n    private async Task HandleSelected()\r\n    {\r\n        foreach (var file in await FileReaderService.CreateReference(_input).EnumerateFilesAsync())\r\n        {\r\n            if (file != null)\r\n            {\r\n                var fileInfo = await file.ReadFileInfoAsync();\r\n                using (var ms = await file.CreateMemoryStreamAsync(4 * 1024))\r\n                {\r\n                    var content = new MultipartFormDataContent();\r\n                    content.Headers.ContentDisposition = new ContentDispositionHeaderValue(\"form-data\");\r\n                    content.Add(new StreamContent(ms, Convert.ToInt32(ms.Length)), \"image\", fileInfo.Name);\r\n\r\n                    ImgUrl = await Repository.UploadProductImage(content);\r\n\r\n                    await OnChange.InvokeAsync(ImgUrl);\r\n                }\r\n            }\r\n        }\r\n    }\r\n}\r\n<\/pre>\n
Here, we start with the _input<\/code> variable of type ElementReference<\/code> that we use for the @ref<\/code> directive. Then, we have two parameters and two injected services. The IFileReaderService<\/code> lives inside the Tewr.Blazor.FileReader<\/code> namespace, so you have to include that as well. As soon as we select our file, the HandleSelected<\/code> method will execute. In the foreach loop, we can see how to use the FileReaderReference<\/code> service and the _input<\/code> variable to enumerate and return all the files we select from the input file control.<\/p>\n
If a file exists, we extract the info of the file and create a memory stream with a specified buffer size. Then, we create a MultipartFormDataContent<\/code> object to use as a body for our POST request. This class lives in the System.Net.Http<\/code> namespace, so you have to include it. After adding the value for the content-disposition header, we add a new StreamContent to our content variable. We have to include the System.Net.Http.Headers<\/code> namespace for the ContentDispositionHeaderValue<\/code> class.<\/p>\n
After we create our content, we just call a repository method and invoke a parent method with the ImgUrl<\/code> parameter.<\/p>\n
CreateProduct Component Modification<\/h3>\n
Finally, let\u2019s modify the CreateProduct.razor<\/code> file, by removing the text box for the image and adding our newly created component:<\/p>\n
<div class=\"form-group row\">\r\n    <label for=\"image\" class=\"col-md-2 col-form-label\">Image:<\/label>\r\n    <div class=\"col-md-10\">\r\n        <ImageUpload OnChange=\"AssignImageUrl\" \/>\r\n    <\/div>\r\n<\/div>\r\n<\/pre>\n
And let\u2019s add the AssignImageUrl<\/code> method to the class file:<\/p>\n
private void AssignImageUrl(string imgUrl) => _product.ImageUrl = imgUrl;<\/code><\/p>\n
And we are done. Now, let\u2019s see how this works in practice:<\/p>\n
\"File<\/a><\/p>\n
Great job. We can see that the upload functionality is working as we expected alongside the creation action.<\/p>\n
Working With .NET 5 and Above<\/h2>\n
From .NET 5, we have the possibility to use a built-in InputFile component to upload our files. We don’t have to use any third-party libraries.<\/p>\n
So, the prerequisites for this are having a .NET 5 installed and also having VisualStudio 16.8.0 (or above) version installed.<\/p>\n
The implementation is almost the same as we have in this article, but of course, you don’t need any third-party library and you don’t need its registration in the Program<\/code> class.<\/p>\n
We have to apply a small modification to the ImageUpload.razor<\/code> file:<\/p>\n
<InputFile OnChange=\"@HandleSelected\" multiple \/>\r\n\r\n@if (ImgUrl != null)\r\n{\r\n    <div>\r\n        <img src=\"@ImgUrl\" style=\"width:300px\" \/>\r\n    <\/div>\r\n}<\/pre>\n
As you can see, this time we are using the InputFile component instead of the input element.<\/p>\n
Then, we have to modify the ImageUpload.razor.cs<\/code> file:<\/p>\n
public partial class ImageUpload\r\n{\r\n    [Parameter]\r\n    public string ImgUrl { get; set; }\r\n\r\n    [Parameter]\r\n    public EventCallback<string> OnChange { get; set; }\r\n    [Inject]\r\n    public IProductHttpRepository Repository { get; set; }\r\n\r\n    private async Task HandleSelected(InputFileChangeEventArgs e)\r\n    {\r\n        var imageFiles = e.GetMultipleFiles();\r\n        foreach (var imageFile in imageFiles)\r\n        {\r\n            if(imageFile != null)\r\n            {\r\n                var resizedFile = await imageFile.RequestImageFileAsync(\"image\/png\", 300, 500);\r\n                    \r\n                using (var ms = resizedFile.OpenReadStream(resizedFile.Size))\r\n                {\r\n                    var content = new MultipartFormDataContent();\r\n                    content.Headers.ContentDisposition = new ContentDispositionHeaderValue(\"form-data\");\r\n                    content.Add(new StreamContent(ms, Convert.ToInt32(resizedFile.Size)), \"image\", imageFile.Name);\r\n\r\n                    ImgUrl = await Repository.UploadProductImage(content);\r\n\r\n                    await OnChange.InvokeAsync(ImgUrl);\r\n                }\r\n            }\r\n        }\r\n    }\r\n}<\/pre>\n
Here, we don’t have the FileReaderService<\/code> injected anymore because we don’t need it. We have the InputFileChangeEventArgs e<\/code> parameter from which we can extract our files with the e.GetMultipleFiles<\/code> method. Then, we iterate through all the files, and if the file exists, we use the RequestImageFileAsync<\/code> method to request another file with the provided type and dimensions. After that, we just open the stream, create a MultiPartFormDataContent<\/code> variable, populate it, and send it to the repository method as we did with the previous implementation.<\/p>\n
As you can see, the implementation is pretty similar to the one we previously used. But if you are working with .NET 5 project, it is better to use this implementation instead.<\/p>\n
Conclusion<\/h2>\n
We have covered a lot of ground in this series and this article was no exception. We have learned how to create server-side upload functionality, how to create a reusable upload component to Upload File with Blazor WebAssembly, and how to use the result from the server to attach it to the object that we want to create.<\/p>\n
So, the next thing we have to do is to learn how to handle PUT and DELETE requests in Blazor WebAssembly<\/a>, and that\u2019s exactly what we are going to do in the next article. Additionally, we are going to show you how to use javascript functions inside the Blazor WebAssembly<\/a> applications.<\/p><\/p>\n","protected":false},"excerpt":{"rendered":"
In the previous article, we have created a form where we had to manually type the image URL. But of course, this is not the solution we are aiming for. In this article, we are going to modify that logic and learn about file upload with Blazor WebAssembly. We are going to add the server […]<\/p>\n","protected":false},"author":3,"featured_media":55055,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[683,684,12,2079],"tags":[685,686,408],"class_list":["post-53523","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blazor","category-blazor-webassembly","category-csharp","category-web-api","tag-blazor","tag-blazor-webassembly","tag-file-upload","et-has-post-format-content","et_post_format-et-post-format-standard"],"yoast_head":"\nFile Upload with Blazor WebAssembly and ASP.NET Core Web API<\/title>\n<meta name=\"description\" content=\"In this article, we are going to learn about the File Upload with Blazor WebAssembly and ASP.NET Core Web API as the backend sever.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/code-maze.com\/blazor-webassembly-file-upload\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"File Upload with Blazor WebAssembly and ASP.NET Core Web API\" \/>\n<meta property=\"og:description\" content=\"In this article, we are going to learn about the File Upload with Blazor WebAssembly and ASP.NET Core Web API as the backend sever.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/code-maze.com\/blazor-webassembly-file-upload\/\" \/>\n<meta property=\"og:site_name\" content=\"Code Maze\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-27T06:00:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-31T14:17:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/07\/10-File-Upload-with-Blazor-WebAssembly-and-ASP.NET-Core-Web-API.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"620\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Marinko Spasojevi\u0107\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/CodeMazeBlog\" \/>\n<meta name=\"twitter:site\" content=\"@CodeMazeBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marinko Spasojevi\u0107\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/code-maze.com\/blazor-webassembly-file-upload\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/code-maze.com\/blazor-webassembly-file-upload\/\"},\"author\":{\"name\":\"Marinko Spasojevi\u0107\",\"@id\":\"https:\/\/code-maze.com\/#\/schema\/person\/d6fa06e66820968d19b39fb63cff2533\"},\"headline\":\"File Upload with Blazor WebAssembly and ASP.NET Core Web API\",\"datePublished\":\"2020-07-27T06:00:58+00:00\",\"dateModified\":\"2024-01-31T14:17:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/code-maze.com\/blazor-webassembly-file-upload\/\"},\"wordCount\":1183,\"commentCount\":17,\"publisher\":{\"@id\":\"https:\/\/code-maze.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/code-maze.com\/blazor-webassembly-file-upload\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/07\/10-File-Upload-with-Blazor-WebAssembly-and-ASP.NET-Core-Web-API.png\",\"keywords\":[\"Blazor\",\"Blazor WebAssembly\",\"file upload\"],\"articleSection\":[\"Blazor\",\"Blazor WebAssembly\",\"C#\",\"Web API\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/code-maze.com\/blazor-webassembly-file-upload\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/code-maze.com\/blazor-webassembly-file-upload\/\",\"url\":\"https:\/\/code-maze.com\/blazor-webassembly-file-upload\/\",\"name\":\"File Upload with Blazor WebAssembly and ASP.NET Core Web API\",\"isPartOf\":{\"@id\":\"https:\/\/code-maze.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/code-maze.com\/blazor-webassembly-file-upload\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/code-maze.com\/blazor-webassembly-file-upload\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/07\/10-File-Upload-with-Blazor-WebAssembly-and-ASP.NET-Core-Web-API.png\",\"datePublished\":\"2020-07-27T06:00:58+00:00\",\"dateModified\":\"2024-01-31T14:17:03+00:00\",\"description\":\"In this article, we are going to learn about the File Upload with Blazor WebAssembly and ASP.NET Core Web API as the backend sever.\",\"breadcrumb\":{\"@id\":\"https:\/\/code-maze.com\/blazor-webassembly-file-upload\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/code-maze.com\/blazor-webassembly-file-upload\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/code-maze.com\/blazor-webassembly-file-upload\/#primaryimage\",\"url\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/07\/10-File-Upload-with-Blazor-WebAssembly-and-ASP.NET-Core-Web-API.png\",\"contentUrl\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/07\/10-File-Upload-with-Blazor-WebAssembly-and-ASP.NET-Core-Web-API.png\",\"width\":1100,\"height\":620,\"caption\":\"10 File Upload with Blazor WebAssembly and ASP.NET Core Web API\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/code-maze.com\/blazor-webassembly-file-upload\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/code-maze.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"File Upload with Blazor WebAssembly and ASP.NET Core Web API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/code-maze.com\/#website\",\"url\":\"https:\/\/code-maze.com\/\",\"name\":\"Code Maze\",\"description\":\"Learn. Code. Succeed.\",\"publisher\":{\"@id\":\"https:\/\/code-maze.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/code-maze.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/code-maze.com\/#organization\",\"name\":\"Code Maze\",\"url\":\"https:\/\/code-maze.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/code-maze.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/Code-Maze-Only-Logo-Transparent-HRez.png\",\"contentUrl\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/Code-Maze-Only-Logo-Transparent-HRez.png\",\"width\":3511,\"height\":3510,\"caption\":\"Code Maze\"},\"image\":{\"@id\":\"https:\/\/code-maze.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/CodeMazeBlog\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/code-maze.com\/#\/schema\/person\/d6fa06e66820968d19b39fb63cff2533\",\"name\":\"Marinko Spasojevi\u0107\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/code-maze.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/marinko-1x1-3-150x150.jpg\",\"contentUrl\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/marinko-1x1-3-150x150.jpg\",\"caption\":\"Marinko Spasojevi\u0107\"},\"description\":\"Hi, my name is Marinko Spasojevic. Currently, I work as a full-time .NET developer and my passion is web application development. Just getting something to work is not enough for me. To make it just how I like it, it must be readable, reusable, and easy to maintain. Prior to being an author on the CodeMaze blog, I had been working as a professor of Computer Science for several years. So, sharing knowledge while working as a full-time developer comes naturally to me.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/marinko-spasojevic\/\",\"https:\/\/x.com\/https:\/\/twitter.com\/CodeMazeBlog\"],\"url\":\"https:\/\/code-maze.com\/author\/marinko\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"File Upload with Blazor WebAssembly and ASP.NET Core Web API","description":"In this article, we are going to learn about the File Upload with Blazor WebAssembly and ASP.NET Core Web API as the backend sever.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/code-maze.com\/blazor-webassembly-file-upload\/","og_locale":"en_US","og_type":"article","og_title":"File Upload with Blazor WebAssembly and ASP.NET Core Web API","og_description":"In this article, we are going to learn about the File Upload with Blazor WebAssembly and ASP.NET Core Web API as the backend sever.","og_url":"https:\/\/code-maze.com\/blazor-webassembly-file-upload\/","og_site_name":"Code Maze","article_published_time":"2020-07-27T06:00:58+00:00","article_modified_time":"2024-01-31T14:17:03+00:00","og_image":[{"width":1100,"height":620,"url":"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/07\/10-File-Upload-with-Blazor-WebAssembly-and-ASP.NET-Core-Web-API.png","type":"image\/png"}],"author":"Marinko Spasojevi\u0107","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/CodeMazeBlog","twitter_site":"@CodeMazeBlog","twitter_misc":{"Written by":"Marinko Spasojevi\u0107","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/code-maze.com\/blazor-webassembly-file-upload\/#article","isPartOf":{"@id":"https:\/\/code-maze.com\/blazor-webassembly-file-upload\/"},"author":{"name":"Marinko Spasojevi\u0107","@id":"https:\/\/code-maze.com\/#\/schema\/person\/d6fa06e66820968d19b39fb63cff2533"},"headline":"File Upload with Blazor WebAssembly and ASP.NET Core Web API","datePublished":"2020-07-27T06:00:58+00:00","dateModified":"2024-01-31T14:17:03+00:00","mainEntityOfPage":{"@id":"https:\/\/code-maze.com\/blazor-webassembly-file-upload\/"},"wordCount":1183,"commentCount":17,"publisher":{"@id":"https:\/\/code-maze.com\/#organization"},"image":{"@id":"https:\/\/code-maze.com\/blazor-webassembly-file-upload\/#primaryimage"},"thumbnailUrl":"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/07\/10-File-Upload-with-Blazor-WebAssembly-and-ASP.NET-Core-Web-API.png","keywords":["Blazor","Blazor WebAssembly","file upload"],"articleSection":["Blazor","Blazor WebAssembly","C#","Web API"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/code-maze.com\/blazor-webassembly-file-upload\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/code-maze.com\/blazor-webassembly-file-upload\/","url":"https:\/\/code-maze.com\/blazor-webassembly-file-upload\/","name":"File Upload with Blazor WebAssembly and ASP.NET Core Web API","isPartOf":{"@id":"https:\/\/code-maze.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/code-maze.com\/blazor-webassembly-file-upload\/#primaryimage"},"image":{"@id":"https:\/\/code-maze.com\/blazor-webassembly-file-upload\/#primaryimage"},"thumbnailUrl":"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/07\/10-File-Upload-with-Blazor-WebAssembly-and-ASP.NET-Core-Web-API.png","datePublished":"2020-07-27T06:00:58+00:00","dateModified":"2024-01-31T14:17:03+00:00","description":"In this article, we are going to learn about the File Upload with Blazor WebAssembly and ASP.NET Core Web API as the backend sever.","breadcrumb":{"@id":"https:\/\/code-maze.com\/blazor-webassembly-file-upload\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/code-maze.com\/blazor-webassembly-file-upload\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/code-maze.com\/blazor-webassembly-file-upload\/#primaryimage","url":"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/07\/10-File-Upload-with-Blazor-WebAssembly-and-ASP.NET-Core-Web-API.png","contentUrl":"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/07\/10-File-Upload-with-Blazor-WebAssembly-and-ASP.NET-Core-Web-API.png","width":1100,"height":620,"caption":"10 File Upload with Blazor WebAssembly and ASP.NET Core Web API"},{"@type":"BreadcrumbList","@id":"https:\/\/code-maze.com\/blazor-webassembly-file-upload\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/code-maze.com\/"},{"@type":"ListItem","position":2,"name":"File Upload with Blazor WebAssembly and ASP.NET Core Web API"}]},{"@type":"WebSite","@id":"https:\/\/code-maze.com\/#website","url":"https:\/\/code-maze.com\/","name":"Code Maze","description":"Learn. Code. Succeed.","publisher":{"@id":"https:\/\/code-maze.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/code-maze.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/code-maze.com\/#organization","name":"Code Maze","url":"https:\/\/code-maze.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/code-maze.com\/#\/schema\/logo\/image\/","url":"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/Code-Maze-Only-Logo-Transparent-HRez.png","contentUrl":"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/Code-Maze-Only-Logo-Transparent-HRez.png","width":3511,"height":3510,"caption":"Code Maze"},"image":{"@id":"https:\/\/code-maze.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/CodeMazeBlog"]},{"@type":"Person","@id":"https:\/\/code-maze.com\/#\/schema\/person\/d6fa06e66820968d19b39fb63cff2533","name":"Marinko Spasojevi\u0107","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/code-maze.com\/#\/schema\/person\/image\/","url":"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/marinko-1x1-3-150x150.jpg","contentUrl":"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/marinko-1x1-3-150x150.jpg","caption":"Marinko Spasojevi\u0107"},"description":"Hi, my name is Marinko Spasojevic. Currently, I work as a full-time .NET developer and my passion is web application development. Just getting something to work is not enough for me. To make it just how I like it, it must be readable, reusable, and easy to maintain. Prior to being an author on the CodeMaze blog, I had been working as a professor of Computer Science for several years. So, sharing knowledge while working as a full-time developer comes naturally to me.","sameAs":["https:\/\/www.linkedin.com\/in\/marinko-spasojevic\/","https:\/\/x.com\/https:\/\/twitter.com\/CodeMazeBlog"],"url":"https:\/\/code-maze.com\/author\/marinko\/"}]}},"_links":{"self":[{"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/posts\/53523","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/comments?post=53523"}],"version-history":[{"count":6,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/posts\/53523\/revisions"}],"predecessor-version":[{"id":70479,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/posts\/53523\/revisions\/70479"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/media\/55055"}],"wp:attachment":[{"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/media?parent=53523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/categories?post=53523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/tags?post=53523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}