React + TypeScriptでカメラからとった画像をアップロードする

前の記事で、カメラからとった画像を取得することが出来るようになりました。 今度はこれをアップロードしてみたいと思います。

といっても手抜き実装でbase64でエンコードしたものを、JSONの文字列として送って、サーバーサイドではそれをデコードしてさくっとファイルに吐き出しています。

Reactのコードは以下のような感じです。readAsBinaryStringで取得した結果をbtoaでbase64にしてJSONの文字列にしています。

import * as React from 'react';

export default class IndexPage extends React.Component<{}, {}> {

    private img: HTMLImageElement;
    private file: HTMLInputElement;

    private handleSubmit(e: React.SyntheticEvent) {
        e.preventDefault();
        var r = new FileReader();
        r.onload = _ => {
            fetch('api/Upload', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(btoa(r.result))
            });
        };
        r.readAsBinaryString(this.file.files[0]);
    }

    private handleChange(e: React.FormEvent) {
        var r = new FileReader();
        r.onload = _ => {
            this.img.src = r.result;
        };
        r.readAsDataURL(this.file.files[0]);
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit.bind(this)}>
                <input type='submit' />
                <hr />
                <input type='file' accept='image/*;capture=camera' onChange={this.handleChange.bind(this) } ref={x => this.file = x} />
                <hr />
                <img ref={x => this.img = x} width={200}/>
            </form>
        );
    }
}

因みに、サーバー側はこんな感じで実装しました。

using System;
using System.Diagnostics;
using System.IO;
using System.Web.Http;

namespace ReactApplication26.Controllers
{
    public class UploadController : ApiController
    {
        public IHttpActionResult Post([FromBody] string base64)
        {
            Debug.WriteLine(base64.Length);
            var dist = System.Web.Hosting.HostingEnvironment.MapPath("~/sample.png");
            File.WriteAllBytes(dist, Convert.FromBase64String(base64));
            return Ok();
        }
    }
}