Загрузка файлов перетаскиванием в Asp.Net Core

[ Полезный рекламный блок ]

Попробуйте свои силы в игре, где ваши навыки программирования на C# станут решающим фактором. Переходите по ссылке 🔰.

В это статье мы рассмотрим, как выполнить загрузку файла на сервер, путем перетаскивания в Asp.Net Core Mvc.

Загрузка файлов путем перетаскивания (drag-and-drop) имеет несколько преимуществ по сравнению с выбором файлов по одному. Перетаскивание файлов является более интуитивным способом загрузки. Пользователю не нужно искать файлы в проводнике и выбирать их по одному. Вместо этого он может просто перетащить файлы с рабочего стола или из другой папки прямо на веб-страницу или в приложение, что сокращает количество шагов и делает процесс более простым.

При выборе файлов по одному пользователю иногда нужно искать файлы среди множества папок, и это может стать сложной задачей, особенно если у файлов нет явной системы иерархии. Перетаскивание файлов устраняет необходимость вручную просматривать структуру папок, что сокращает возможность выбрать неправильный файл.

Создание и настройка проекта

Чтобы создать проект MultipleFileUploader, запустите Visual Studio и выберите в меню File (Файл) — New Project (Создать Проект). Укажите шаблон проекта ASP.NET Core Web Application (Веб-приложение ASP.NET Core).

Введите MultipleFileUploader, в поле Name, на следующей странице укажите Framework .Net 7.0 и нажмите кнопку Create.

Все загруженные изображения, мы будем хранить в папке: wwwroot / uploadedFiles, поэтому сразу создадим ее.

Для визуального отображения формы, папку wwwroot / css, добавим файл formUploader.css, со следующим содержимым:

.files-container label {
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 170px;
    font-family: Arial;
}

.upload {
    position: relative;
    display: block;
    border: 1px solid black;
    background-color: #ecedee;
    padding: 3em;
    margin: 1em auto;
    border-radius: 4px;
}

.files-container button {
    width: 100%;
}

.upload label {
    border-bottom: 1px solid #ccc;
    padding: 1em;
    text-align: center;
    font-weight: bold;
    font-size: 1em;
}

.upload:hover {
    background-color: #86b7fe;
}

.upload input {
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    padding: 0;
}

#names li {
    margin: 1em;
}

.files-container label {

width: 100%;

height: 100%;

text-align: center;

line-height: 170px;

font-family: Arial;

}

.upload {

position: relative;

display: block;

border: 1px solid black;

background-color: #ecedee;

padding: 3em;

margin: 1em auto;

border-radius: 4px;

}

.files-container button {

width: 100%;

}

.upload label {

border-bottom: 1px solid #ccc;

padding: 1em;

text-align: center;

font-weight: bold;

font-size: 1em;

}

.upload:hover {

background-color: #86b7fe;

}

.upload input {

position: absolute;

opacity: 0;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 1;

padding: 0;

}

#names li {

margin: 1em;

}

Для чтения входных файлов и обновления их содержимого с указанием имен файлов, необходимо написать немного JavaScript кода. В папку wwwroot / js, добавим файл formUploader.js, со следующим содержимым:

function displayNames(input, target) {
    const output = document.getElementById(target);
    output.innerHTML = '';
    const files = input.files
    for (let i = 0; i < files.length; i++) {
        let file = files.item(i)
        let el = document.createElement('li');
        el.innerText = file.name;
        output.appendChild(el);
    }
}

function displayNames(input, target) {

const output = document.getElementById(target);

output.innerHTML = '';

const files = input.files

for (let i = 0; i < files.length; i++) {

let file = files.item(i)

let el = document.createElement('li');

el.innerText = file.name;

output.appendChild(el);

}

В этом приложении мы будем использовать валидацию данных на стороне клиента

Клиентская валидация позволяет проверить введенные пользователем данные на стороне клиента (веб-браузера) до того, как данные будут отправлены на сервер. Это может быть полезным для обеспечения более быстрой обратной связи пользователю и снижения нагрузки на сервер, так как некоторые простые проверки могут быть выполнены без отправки данных на сервер.

Откроем файл Views / Shared / _ValidationScriptsPartial.cshtml и изменим его содержимое следующим образом:

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

В проекте нашего типа, по умолчанию уже определены все необходимые скрипты для валидации данных на стороне клиента.

Первоначальная настройка завершена.

Модель представления

Ради повышения удобства работы с приложением в процессе загрузки и обработки файлов, определим в корне папку ViewModels, в которую добавим класс UploadFileViewModel.cs, со следующим содержимым:

public class UploadFileViewModel
    {
        [Required(ErrorMessage = "Choose file(s).")]
        [Display(Name = "Drag your files here or click in this area.")]
        public List<IFormFile> Uploads { get; set; }
    }

public class UploadFileViewModel

{

[Required(ErrorMessage = "Choose file(s).")]

[Display(Name = "Drag your files here or click in this area.")]

public List<IFormFile> Uploads { get; set; }

}

Данный класс содержит коллекцию загружаемых файлов и атрибуты валидации.

Контроллер и представления

Перейдем в контроллер Home и изменим его содержимое следующим образом:

public class HomeController : Controller
    {
        [HttpGet]
        public IActionResult Index()
        {
            return View();
        }

        [HttpPost]
        [AutoValidateAntiforgeryToken]
        public async Task<IActionResult> UploadFiles([FromServices] IWebHostEnvironment environment, UploadFileViewModel ufv)
        {
            if (ModelState.IsValid)
            {
                long size = 0;
                var files = ufv.Uploads;

                foreach (var file in files)
                {
                    string path = $"/uploadedfiles/{file.FileName}";
                    using (var fileStream = new FileStream(environment.WebRootPath + path, FileMode.Create))
                    {
                        await file.CopyToAsync(fileStream);
                    }
                    size += file.Length;
                }
                string message = $"{files.Count} file(s) / {size} bytes uploaded successfully!";
                return Json(message);
            }
            return View(nameof(Index),ufv);
        }
    }

public class HomeController : Controller

{

[HttpGet]

public IActionResult Index()

{

return View();

}

[HttpPost]

[AutoValidateAntiforgeryToken]

public async Task<IActionResult> UploadFiles([FromServices] IWebHostEnvironment environment, UploadFileViewModel ufv)

{

if (ModelState.IsValid)

{

long size = 0;

var files = ufv.Uploads;

foreach (var file in files)

{

string path = $"/uploadedfiles/{file.FileName}";

using (var fileStream = new FileStream(environment.WebRootPath + path, FileMode.Create))

{

await file.CopyToAsync(fileStream);

}

size += file.Length;

}

string message = $"{files.Count} file(s) / {size} bytes uploaded successfully!";

return Json(message);

}

return View(nameof(Index),ufv);

}

Контроллер Home, представляет действие, которое обрабатывает POST-запрос, отправленный на сервер с целью загрузки одного или нескольких файлов. Код использует аннотации и инъекцию зависимостей для обеспечения безопасности и доступа к окружению приложения.

Атрибут [HttpPost] указывает, что данное действие должно обрабатывать только POST-запросы.

Атрибут [AutoValidateAntiforgeryToken] обеспечивает защиту от атак CSRF (межсайтовой подделки запроса) путем автоматической проверки токена антифоргери. Этот токен генерируется во время формирования HTML-форм на клиентской стороне и должен совпадать с ожидаемым значением на сервере.

Интерфейс IWebHostEnvironment предоставляет информацию об окружении приложения, включая путь к корневой папке веб-хостинга, где расположены статические файлы и другая информация.

В папке Views / Home, изменим содержимое представления Index.cshtml, следующим образом:

@using MultipleFileUploader.ViewModels;
@{
    ViewData["Title"] = "File Uploader";
}
@model UploadFileViewModel

@section Styles{
    <link rel="stylesheet" href="~/css/formUploader.css" />
}

<div class="h-100 d-flex align-items-center justify-content-center">
<div class="files-container">
    <form asp-controller="Home" asp-action="UploadFiles" method="post" enctype="multipart/form-data">
        <div class="upload">
            <label asp-for="Uploads"></label>
            <input asp-for="Uploads" class="form-control" onchange="displayNames(this, 'names')" />
            <ul id="names" class="d-flex justify-content-start flex-wrap"></ul>
            <span asp-validation-for="Uploads" class="text-danger"></span>
        </div>
        @Html.AntiForgeryToken()
        <button type="submit" class="btn btn-primary">Upload</button>
    </form>
</div>
</div>

@section Scripts{
    <script src="~/js/formUploader.js"></script>
    @*To validate the model on the client*@
    @await Html.PartialAsync("_ValidationScriptsPartial")
}

@using MultipleFileUploader.ViewModels;

ViewData["Title"] = "File Uploader";

}

@model UploadFileViewModel

@section Styles{

}

</div>

@Html.AntiForgeryToken()

<button type="submit" class="btn btn-primary">Upload</button>

</form>

</div>

@section Scripts{

@*To validate the model on the client*@

@await Html.PartialAsync("_ValidationScriptsPartial")

}

Это представление представляет собой страницу с формой для загрузки файлов и использует модель представления UploadFileViewModel для обработки этих данных на сервере. Оно также подключает стили и скрипты, которые управляют отображением и взаимодействием элементов страницы.

Запустим приложение и проверим его работу.

Я надеюсь, что вам понравилось читать эту статью, и она оказалась легкой для понимания. Пожалуйста, дайте мне знать, если у вас есть какие-либо комментарии или исправления.

Так же вам может быть интересна предыдущая статья — Bulk Operations в Entity Framework Core.

Вы хотите научится писать код на языке программирования C#?

Создавать различные информационные системы, состоящие из сайтов, мобильных клиентов, десктопных приложений, телеграмм-ботов и т.д.

Переходите к нам на страницу Dijix и ознакомьтесь с условиями обучения, мы специализируемся только на индивидуальных занятиях, как для начинающих, так и для более продвинутых программистов. Вы можете взять как одно занятие для проработки интересующего Вас вопроса, так и несколько, для более плотной работы. Благодаря личному кабинету, каждый студент повысит качество своего обучения, в вашем распоряжении: