Drag and drop file uploading with .NET 5.0 Blazor InputFile component

Drag and drop file uploading with .NET 5.0 Blazor InputFile component

One of my pet projects requires file uploading. And because I decided to create that application to be .NET 5.0 ready, it was necessary to investigate what options do we have for file uploading with .NET 5.0 Blazor applications. The first...

One of my pet projects requires file uploading. And because I decided to create that application to be .NET 5.0 ready, it was necessary to investigate what options do we have for file uploading with .NET 5.0 Blazor applications. The first candidate to investigate is a new InputFile component, of course. So, let’s see what it can do for us.

Installing .NET 5.0 SDK

You have to download and install a fresh version of .NET 5.0 SDK. At the moment when I’m writing this post, the SDK 5.0.100-rc.1 is available. But, probably, at the moment when you read this blog, there is a fresher version of SDK, so use it.

Creating ASP.NET Core Blazor Server application project

This time I’m going to create a Blazor Server project because I want my application can upload files to somewhere and I want it can generate links to the uploaded files. It seems to me, a Blazor Server application is most convenient for this.

So, just put the next command to your console

dotnet new blazorserver -o BlazorUploads

This time my choice is the Visual Studio 16.8.0 Preview 3.2 as an IDE. But, as usual, you can use any IDE that supports developing Blazor projects.

Clean Up

Completely remove the files and directories selected on the image below.

In the NavMenu.razor component delete the next lines of code

<li class="nav-item px-3">
    <NavLink class="nav-link" href="counter">
          Counter
    </NavLink>
</li>
<li class="nav-item px-3">
    <NavLink class="nav-link" href="fetchdata">
          Fetch data
    </NavLink>
</li>

In the Startup.cs remove the row where the WeatherForecastService is added in the ConfigureServices() method

services.AddSingleton< WeatherForecastService>() ;

And finally, remove almost all content of the_ Index.razor_ page, except the first line.

@page "/"

posts .net 5.0 blazor blazor server component drag and drop drop file inputfile uploading

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Multiple Files Preview & Upload Using InputFile Component In Blazor | .NET 5

How to preview & upload multiple file or image using Blazor .NET 5 InputFile. Upload Files Using InputFile Component In Blazor. New Feature of .NET 5 Blazor.

Multiple File Upload in Laravel 7, 6

laravel 7.x,6 multiple file upload with validation example. This tutorial explains, how you can upload multiple files into laravel folder and MySQL DB

How to call isolated JavaScript code in .NET 5.0 Blazor projects with JSObjectReference

A dozen days ago the .NET 5.0 Release Candidate 1 (RC1) became available. And as you probably know, there are a lot of [“treats”](https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-5-release-candidate-1/) among the new features of...

Simple Drag and Drop File Upload using Dropzone JS - Laravel 8

Drag and drop file upload using dropzone js. Here, you will learn how to drag and drop upload multiple files in laravel 8 using dropzone js. drag and drop image upload jquery.

jQuery Ajax CRUD in ASP.NET Core MVC with Modal Popup

In this article, we’ll discuss how to use jQuery Ajax for ASP.NET Core MVC CRUD Operations using Bootstrap Modal. With jQuery Ajax, we can make HTTP request to controller action methods without reloading the entire page, like a single page application.