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

Primary tabs

これは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>
    <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();
        var result document.querySelector('div');
        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されたことをご確認ください。