JavascriptによるCSVアップロード

CSVのアップロードについての質問です。

■動作確認中の作業内容
Kintoneのアプリ上の画面にボタンを作成してます。
そのボタンを押下したら、PCローカルに保存してあるCSVを取り込み
その後、Kintoneアプリのレコードに登録をする。

まずは、CSVをKintone上にアップロードをするための方法を
ご教示いただければと思います。
以下の◆◆の箇所より 〈参考〉の(1)にある
コードを入れていきますが、現時点のスキルでは難しいため
このままでは実現したい動作を確認することができません。
サンプルコードを記述いただけると幸いです。

<サンプルソース:CSVLOAD.js>

(function () {
“use strict”;
kintone.events.on(‘app.record.index.show’, function (event) {
if (document.getElementById (‘my_index_button’) != null) {
return;
}

var myIndexButton = document.createElement('button');
    myIndexButton.id = 'my_index_button';
    myIndexButton.innerHTML = 'CSV取り込み';

    // ボタンクリック時の処理
    myIndexButton.onclick = function() {

◆ ここにCSVアップロードする処理 ◆

}

    kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);
});

})();

〈参考〉

▼テーブル形式データを含んだCSVの一括取込
https://cybozudev.zendesk.com/hc/communities/public/questions/201356730
(1)JavaScript で File API を使用してファイルを読み取る
ファイル選択にフォーム入力を使用する
http://www.html5rocks.com/ja/tutorials/file/dndfiles/

よろしくお願い致します。

kids007さん
cstapの落合です。

まず、ブラウザからローカルファイルを直接見に行くことはできません。これはセキュリティ上許してはいけない操作です。

そのため、ドラッグ&ドロップなどでブラウザにローカルファイルを手渡ししないと、ファイル操作はできません。

以上を認識した上で開発するとJavascriptによるCSVアップロード機能も実現できるかと思います。

具体的には、file フォームなどでファイル情報を取得し、CSV → JSON 変換を行い、REST API で登録/更新/削除する感じです。

以上、参考になりますでしょうか?

cstap
落合 様

ご回答いただき、有り難うございます。
早速、参考にさせていただき、一つ目がクリアできました。
カスタマイズビューとJavascriptを組み合わせて
ドラッグ&ドロップにてファイル情報を取得することが
確認できています。

今度は、CSVからJSONに変換を行う箇所で試行錯誤してます。

カスタマイズビューに変換するためのボタンを追加して
変換処理をかけようとしていますがうまくいきません。
コードを一部、抜粋したものを以下に記載します。

・カスタマイズビューより一部抜粋

<input type=“submit” id=“the_form” value=“JSON変換”
class=“btn”/>
<output id=“list2”></output>

・test.jsより一部抜粋(ファイル情報取得の処理も含まれてます)

function handleFileList(evt) {
var res = evt.dataTransfer.files;
var d = res.split(‘’);
var jsonArray = csvjson(d);
}

function csvjson(csvArray){
var jsonArray = [];
var items = csvArray[0].split(‘,’);

for (var i = 1; i < csvArray.length - 1; i++) {
var a_line = new Object();
var csvArrayD = csvArray[i].split(‘,’);

 for (var j = 0; j < items.length; j++) {

a_line[items[j]] = csvArrayD[j];
}
jsonArray.push(a_line);
}
//console.debug(jsonArray);
//return jsonArray;
document.getElementById(‘list2’).innerHTML = ‘<ul>’

  • jsonArray.join(‘’) + ‘</ul>’;
    }

・・ (中略)・・

var btn1 = document.getElementById(‘button1’);
btn1.addEventListener(‘submit’, handleFileList, false);

ご教示いただけますでしょうか。
宜しくお願いいたします。

kids007さん
cstapの落合です。

CSV → JSON 変換については、ライブラリを利用すると良いでしょう。
GitHubで検索 すると、いくつか使えそうなライブラリが見つかると思います。

https://github.com/shancarter/mr-data-converter
https://github.com/rwjblue/pivot.js

ライブラリを使って JSON に変換した後は、REST API の仕様に沿った形式に変換し、 kintone.api を使ってアップロードします。

登録/編集/削除それぞれAPIが異なりますので、それぞれのAPI仕様に沿った形式にJSONを変換する必要があります。

以上、参考になりますでしょうか?

回答いただき有り難うございます。
参考にさせていただき、トライしてみます。