igUpload を利用してサーバーにファイルをアップロードする

igUpload コントロールを利用することで、素早くファイルアップロード機能を実装することができます。今回は、.NET 5 で ASP.NET Core MVC と組み合わせて、igUpload の利用方法を紹介します。

1. Ignite UI for jQuery ファイルの読み込み

igUpload コントロールを表示するページで、Ignite UI for jQuery の JS / CSS ファイルを読み込みます。Index.cshtml にて下記の実装を行います。

@section Styles {
    <link href="https://cdn-na.infragistics.com/igniteui/2020.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet">
    <link href="https://cdn-na.infragistics.com/igniteui/2020.2/latest/css/structure/infragistics.css" rel="stylesheet">
}
@section Scripts {
    <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
    <script src="https://cdn-na.infragistics.com/igniteui/2020.2/latest/js/i18n/infragistics-ja.js"></script>
    <script src="https://cdn-na.infragistics.com/igniteui/2020.2/latest/js/infragistics.core.js"></script>
    <script src="https://cdn-na.infragistics.com/igniteui/2020.2/latest/js/infragistics.lob.js"></script>
    <script>
        $(function () {
            ...
        });
    </script>
}

2. igUpload コントロールの初期化

igUpload コントロールの初期化を行います。Index.cshtml にて下記の実装を行います。

<div id="igUpload1"></div>

@section Styles {
    ...
}
@section Scripts {
    ...
    <script>
        $(function () {
            $("#igUpload1").igUpload({
                mode: 'single',
                autostartupload: true,
                progressUrl: "/IGUploadStatusHandler.ashx",
                controlId: "serverID1"
            });
        });
    </script>
}

3. igUpload ミドルウェアの登録

Startup.cs にて、igUpload のミドルウェアを登録します。

public class Startup
{
    ...
    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        ...
        //igUpload ミドルウェアの登録
        app.UseUploadHandlerMiddleware();
        app.UseUploadModuleMiddleware();
    }
}

4. ファイルを保存するフォルダの指定

Startup.cs の Configureservices メソッドで、ファイルのアップロード先（フォルダ）とファイルの最大サイズを指定します。

public class Startup
{
    ...
    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddControllersWithViews();

        // ファイルのアップロード先の指定、及び、ファイルの最大サイズの指定
        services.Configure<UploadAppSettings>(options => {
            options.FileUploadPath = "~/wwwroot/FileUploads";
            options.maxFileSizeLimit = "100000000";
        });
    }

    ...
}

5. ファイルアップロード時にサーバー側で発生するイベントの捕捉

Startup.cs のコンストラクタで、ファイルアップロード時に発生するイベントを HomeController 内で実装されているイベントハンドラーと紐づけます。

public class Startup
{
    public Startup(IConfiguration configuration)
    {
        ...
        // ファイルアップロード時に発生するイベントの、イベントハンドラーを登録
        UploadProgressManager.Instance.AddStartingUploadEventHandler("serverID1", HomeController.HandlerUploadStarting);
        UploadProgressManager.Instance.AddFinishingUploadEventHandler("serverID1", HomeController.HandlerUploadFinishing);
    }
    ...
}

これで、HomeController でファイルアップロード時のイベントを捕捉することができるようになります。

public class HomeController : Controller
{
    ...

    internal static void HandlerUploadStarting(object sender, UploadStartingEventArgs args)
    {

    }

    internal static void HandlerUploadFinishing(object sender, UploadFinishingEventArgs args)
    {

    }
}