新しい投稿
記事
· 2020年9月16日 4m read

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

#CSP #REST API #Caché #Ensemble #InterSystems IRIS #InterSystems IRIS for Health

これは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
続けるにはログインするか新規登録を行ってください
Seiji Hirose · 2021年2月20日

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

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

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

var result = document.querySelector('div');　

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

0 0
Megumi Kakechi · 2021年2月21日

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

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

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

0 0