記事
· 2020年9月16日 4m read

HTMLからRESTを使って画像ファイルをアップロードする方法

これはInterSystems FAQ サイトの記事です。

HTMLからRESTを使って画像ファイルをアップロードする方法をご紹介します。

1.はじめに、以下のようなhtmlとクラスを作成してください。

*UploadTest.html

<html lang="ja">
<head>
    <title>Upload</title>
</head>
<body>
    <input id="up" type="file" />
    <button id="btn">Upload</button>
    <div></div>
    <script type="text/javascript">
    const sendfile = function(e) {
        let up = document.getElementById("up");
        let file = up.files[0];
        let fd = new FormData();
        fd.append("imgfile", file);
        let xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function () {
            var result = document.querySelector('div');
            xmlhttp.onload = function () {
                result.innerHTML = xmlhttp.responseText;
            };
        };
        xmlhttp.open("POST", "http://127.0.0.1:52773/csp/user/isjtest/uploadimg", true);
        xmlhttp.send(fd);
    }
    let btn = document.getElementById("btn");
    btn.addEventListener("click", sendfile);    
    </script>
</body>
</html>


*User.MyREST.cls (IRIS/CachéサーバのUSERネームスペースに作成してください)

こちらのサンプルでは、C:\tempフォルダにファイルをUploadしています。
 適宜フォルダを作成して頂くか、任意のフォルダパスに変更して再コンパイルしてください。

Class User.MyREST Extends %CSP.REST
{

Parameter CONVERTINPUTSTREAM = 1;
Parameter HandleCorsRequest = 1;

XData UrlMap
{
 <Routes>
  <Route Url="/uploadimg" Method="POST" Call="readMimeData" />
  </Routes>
}
ClassMethod readMimeData() As %Status
{
    set upload=$g(%request.MimeData("imgfile", 1))
    set fname=%request.MimeData("imgfile",1).FileName
    set file=##class(%File).%New("c:\temp\"_fname)
    do file.Open("NWUK\BIN\")
    do file.CopyFrom(upload)
    set st = file.%Save()
    if st {
        write fname_" アップロード完了!!"
    } else {
        write fname_" アップロード失敗"
    }
    do file.Close()
    quit $$$OK
 }
}


2. ウェブ・アプリケーション /csp/user/isjtest の定義を作成します。
  管理ポータル:[システム管理]>[セキュリティ]>[アプリケーション]>
                             [ウェブ・アプリケーション]>[新しいウェブ・アプリケーションを作成]
  RESTのディスパッチ・クラスに、1.で作成したUser.MyRESTクラスを指定します。(下記画像参照)

3. 必要に応じて UploadTest.html を編集し(※1)、Webサーバのドキュメントルート(※2)に配置します。
  ※1. xmlhttp.openには、環境にあったIPアドレス・ポートを指定してお試しください。

xmlhttp.open("POST", "http://<サーバIP>:<IRIS/Cachéポート>/csp/user/isjtest/uploadimg", true);

   ※2. 例:C:\inetpub\wwwroot

4. クライアントブラウザより以下を実行し、任意のファイルをUploadします。
  http://localhost/UploadTest.html

5. 指定したフォルダにファイルがUploadされたことをご確認ください。

ディスカッション (3)1
続けるにはログインするか新規登録を行ってください

この投稿を参考にさせて頂き、初めてRESTでIRISへの接続をするプログラムを作成してみました。何となく思った通りに動作しそうな雰囲気です。アプリケーション開発環境での組み込みができていませんので、まだ何が起こるか不安がよぎっていますが、現時点では満足しています。本日は力尽きました...

私の場合、すでに構築済みの手法(フレームワーク、と呼べるほど大層なものではなりません)があり、その手法に合わせるために、敢えてJSONを利用していません。そのため、多くのRESTのサンプルコードがJSON前提ということもあり参考になるものが見当たらず、苦しみました。(自業自得、ですが..)

ところで、上記のサンプルコード(UploadTest.html のJavaScript部分)についてです。

var result document.querySelector('div'); 

のコードがありますが、「div」に対応するオブジェクト(タグ)が無いように思われます。その為?サーバーからのレスポンスが画面上に表示されないようです。ご確認頂ければ幸いです。

RESTでIRISへの接続をお試しいただきありがとうございます。

また、サンプルコードへのご指摘ありがとうございます。
確かに、タグが抜けておりました。大変失礼いたしました。
サンプル(UploadTest.html)に足りないタグを追加しました。
お手数をおかけしますが、ご確認をよろしくお願いいたします。

    <button id="btn">Upload</button>
    
<div></div>        このタグを追加