Bluemix の flask で、csv をアップロードして表示 #Flask

参考にしたページ
Flask にアップロードされたCSVファイルを保存せずに読み込む

実行結果

Bluemix のサンプルに対して変更した部分
welcome.py
requirements.txt
runtime.txt　　　　追加
static/index.html
static/csv_upload.js　　　追加
static/jquery-3.2.1.min.js　　　追加

welcome.py

# -*- coding: utf-8 -*-
# -----------------------------------------------------------------------
#
#   welcome.py
#
#                   Jun/29/2017
#
# -----------------------------------------------------------------------
import os
import io
import csv
from flask import Flask
from flask import jsonify
from flask import request
# -----------------------------------------------------------------------
def to_table_proc(list):
    str_out = ""
    str_out += "<table>"
    for raw in list:
        str_out += "<tr>"
        for col in raw:
            str_out += "<td>" + col + "</td>"
        str_out += "</tr>"
#
    str_out += "</table>"
#
    return str_out
# -----------------------------------------------------------------------
app = Flask(__name__)

@app.route('/')
def Welcome():
    return app.send_static_file('index.html')

# -----------------------------------------------------------------------
@app.route('/upload', methods=['POST'])
def upload_proc():
    filebuf = request.files.get('file_csv')
    text_stream = io.TextIOWrapper(filebuf.stream, encoding='utf-8')
    list = []
    for row in csv.reader(text_stream):
        print (row)
        list.append(row)
    str_out = to_table_proc(list)
    return str_out
#
# -----------------------------------------------------------------------
port = os.getenv('PORT', '5000')
if __name__ == "__main__":
    app.run(host='0.0.0.0', port=int(port))
# -----------------------------------------------------------------------

requirements.txt

Flask==0.12.2
requests==2.7.0

runtime.txt

python-3.6.0

static/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="static/jquery-3.2.1.min.js"></script>
<script src="static/csv_upload.js"></script>
<title>csv_upload Jun/29/2017</title>
</head>
<body>
<h1>csv_upload</h1>
<blockquote>
    <button class="upload" id="upload">Upload</button><p />
</blockquote>
<div id="contents">contents</div>
<hr />
<div id="outarea_aa">outarea_aa</div>
<div id="outarea_bb">outarea_bb</div>
<div id="outarea_cc">outarea_cc</div>
<div id="outarea_dd">outarea_dd</div>
<div id="outarea_ee">outarea_ee</div>
<div id="outarea_ff">outarea_ff</div>
<div id="outarea_gg">outarea_gg</div>
<div id="outarea_hh">outarea_hh</div>
<hr />
Jun/29/2017 PM 18:41</li>
</body>
</html>

csv_upload.js

// -----------------------------------------------------------------------
//  ekzemplaro_hh.js
//
//                  Jun/29/2017
//
// -----------------------------------------------------------------------
jQuery (function ()
{
    jQuery("#outarea_aa").text ("*** csv_upload.js *** start ***")

    button_upload_click_proc ()

    jQuery("#outarea_hh").text ("*** csv_upload.js *** end ***")
})

// -----------------------------------------------------------------------
// [4]:
function button_upload_click_proc ()
{
    jQuery ("button.upload").click (function ()
        {
        jQuery ("button").css ("color","black")
        jQuery ("button#" + this.id).css ("color","blue")

        var str_out = ""
        str_out += this.id + " is clicked ***<br />"

        jQuery("#outarea_cc").html (str_out)

        var html = '<form id="uploadForm" class="upload-form" style="display: none;">' + '<input id="theFile" name="file_csv" type="file">' + '</form>'
        jQuery('body').append(html)
        jQuery('#theFile').on('change',uploadFile).click()
        })
}

// -----------------------------------------------------------------------
var uploadFile = function ()
{
    var formData = new FormData(jQuery('#uploadForm')[0])

    jQuery.ajax({
        url: '/upload',
        type: 'post',
        data: formData,
        processData: false,
        contentType: false,
        timeout: 10000
        }).done(function (res) {
            jQuery("#contents").html (res)
            jQuery("#outarea_ee").text ("*** done ***")
            console.log('done')
        }).fail(function () {
            console.log('fail')
        }).then(function () {
            jQuery('#uploadForm').remove()
        })
}

// -----------------------------------------------------------------------