Завантаження файлів перетягуванням в Asp.Net Core

Загрузка файлов перетаскиванием в 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 і ознайомтеся з умовами навчання, ми спеціалізуємося тільки на індивідуальних заняттях, як для початківців, так і для просунутих програмістів. Ви можете взяти як одне заняття для опрацювання питання, що вас цікавить, так і кілька, для більш щільної роботи. Завдяки особистому кабінету, кожен студент підвищить якість свого навчання, у вашому розпорядженні: