본문 바로가기

워크

BlazorInputFile FileUpload

@page "/Up"

@using BlazorInputFile
@using System.IO


@inject IFileUpload FileUpload


<h1>단일 파일 업로드 코드 조각</h1>

<BlazorInputFile.InputFile OnChange="HandleSelection"></BlazorInputFile.InputFile>

<input type="button" value="저장" @onclick="btnSave_Click" />

<p>@status</p>

@code {
    string status;

    private MemoryStream ms = new MemoryStream();
    private IFileListEntry[] selectedFiles;
    void HandleSelection(IFileListEntry[] files)
    {
        selectedFiles = files;
    }

    private async Task btnSave_Click()
    {
        var file = selectedFiles.FirstOrDefault();

        if (file != null)
        {
            await FileUpload.UploadAsync(file); 
        }

        var uploadFolder = Path.Combine(Environment.CurrentDirectory, "");

        using (var fileStream = new FileStream(Path.Combine(uploadFolder, file.Name), FileMode.Create))
        {
            await file.Data.CopyToAsync(fileStream); // 저장
        }
    }
}
 

 

using BlazorInputFile;
using Microsoft.AspNetCore.Hosting;
using System.IO;
using System.Threading.Tasks;

namespace BlazorApp9
{
    public interface IFileUpload
    {
        Task UploadAsync(IFileListEntry file);
    }

    public class FileUpload : IFileUpload
    {
        private readonly IWebHostEnvironment _environment;
        public FileUpload(IWebHostEnvironment env)
        {
            _environment = env;
        }

        public async Task UploadAsync(IFileListEntry fileEntry)
        {
            var path = Path.Combine(_environment.WebRootPath, "Upload", fileEntry.Name);
            var ms = new MemoryStream();
            await fileEntry.Data.CopyToAsync(ms);
            using (FileStream file = new FileStream(path, FileMode.Create, FileAccess.Write))
            {
                ms.WriteTo(file);
            }
        }
    }
}
 

 


    <script src="_content/BlazorInputFile/inputfile.js"></script>
    <script src="_framework/blazor.server.js"></script>

 

 

 

Summary

=============================

Nuget에서 Preview 체크하고 BlazorInputFile 추가

=============================

<script src="_content/BlazorInputFile/inputfile.js"></script>

=============================

using BlazorInputFile;
using System.Threading.Tasks;

namespace BlazorApp.Services
{
    public interface IFileUploadService
    {
        Task UploadAsync(IFileListEntry file);
    }
}
 

=============================

using BlazorInputFile;
using Microsoft.AspNetCore.Hosting;
using System.IO;
using System.Threading.Tasks;

namespace BlazorApp.Services
{
    public class FileUploadService : IFileUploadService
    {
        private readonly IWebHostEnvironment _environment;

        public FileUploadService(IWebHostEnvironment env)
        {
            this._environment = env;
        }

        public async Task UploadAsync(IFileListEntry fileEntry)
        {
            var path = Path.Combine(_environment.WebRootPath, "Upload", fileEntry.Name);
            var ms = new MemoryStream();
            await fileEntry.Data.CopyToAsync(ms);
            using (FileStream file = new FileStream(path, FileMode.Create, FileAccess.Write))
            {
                ms.WriteTo(file); 
            }
        }
    }
}
 

=============================

services.AddScoped<IFileUploadService, FileUploadService>();

=============================

@page "/FrmFileUploadTest"

<h3>단일 파일 업로드 코드 조각</h3>

<BlazorInputFile.InputFile OnChange="HandleSelection">
</BlazorInputFile.InputFile>

<input type="button" name="Save" value="업로드"
       @onclick="UploadClick" />
 

=============================

using BlazorApp.Services;
using BlazorInputFile;
using Microsoft.AspNetCore.Components;
using System.Linq;

namespace BlazorApp.Pages
{
    public partial class FrmFileUploadTest
    {
        [Inject]
        public IFileUploadService FileUploadServiceReference { get; set; }

        private IFileListEntry[] selectedFiles; 
        protected void HandleSelection(IFileListEntry[] files)
        {
            this.selectedFiles = files;
        }

        protected async void UploadClick()
        {
            var file = selectedFiles.FirstOrDefault();
            if (file != null)
            {
                await FileUploadServiceReference.UploadAsync(file);
            }
        }
    }
}
=============================

 

 

 

'워크' 카테고리의 다른 글

sessionStorage localStorage  (0) 2020.07.15
blazor MatTab  (0) 2020.07.13
NavigationManager 시트  (0) 2020.07.12
특정 폴더의 특정 확장자들 지정해서 파일 가져오기  (0) 2020.07.11
생성 주기  (0) 2020.07.09