SKILL-INTRO_04__ファイルをアップロードする

name:  index
class: title, smokescreen, shelf, no-footer
# 情報システム開発基礎演習<br><small>ITインフラ編 第04回</small>

<div class=footnote>
<small><small>
Copyright (C) Ken'ichi Fukamachi &lt;fukachan@fml.org&gt;, 2021-2025. CC BY-NC-SA 4.0
</small></small>
</div>

---
class: compact
# 本日の目標

<div class=footnote>
<small><small>
(脚注1)
WWWサーバとのやりとり２です。ファイルもデータですから
<br>
(脚注2)
機械学習編で画像認識（AWS Rekognition）をやるので、その前準備も兼ねています
</small></small>
</div>

1. サーバにファイルをアップロードすることが出来る

---
class: compact
# おしながき

<small>
1. 解説

1. 演習 (Colitasの支援あり)
    - [課題] ファイルを各自のEC2上にアップロードできる

1. 動作確認(TA/SAさんに見せてください)
</small>

---
name:  review
class: title, smokescreen, shelf, no-footer
# <small>前回の復習</small>

<div class=footnote>
<small><small>
<A HREF="/slides/skill-intro/janken/#demo">
前回のスライドページ
</A>
</small></small>
</div>

---
class: compact
# <small>値を送るFORM文(復習)</small>

![height480px](../images/html-form-rendering-w-result.png)

---
class: title, smokescreen, shelf, no-footer
# <small>HTML(2)<br>ファイルをアップロードするFORM文</small>

---
class: compact
# <small>【デモ】ファイルアップロードするFORM文</small>

---
class: compact
# <small>ファイルアップロードするFORM文</small>

![height480px](../images/html-form-uploading-w-result.png)

---
class: compact
# <small>ファイルをアップロードできるFORM文(1): サーバの設定</small>

<div class=footnote>
<small><small>
(脚注1)
<b>課題は「ファイルを各自のEC2上にアップロード」できること</b>です。
とうぜん設定は各自ことなります
<br>
(脚注2)
つまり<b>各自のwww.pyをWeb APIサーバ（アップロード先のサーバ）</b>にしてください
</small></small>
</div>

<small>
- <b>（値ではなく）ファイルを送る（アップロードする）にはFORM文の設定変更が必要</b>です

- FORM文(`<FORM ...>`)のサーバ設定に関する属性を変更してください
    1. actionのURLを変更
        - 変更後のURL = `http://学籍番号.cloud.fml.org/api/upload/v1`
    1. 属性も追加
        - 追加する属性は `enctype="multipart/form-data"`

</small>

---
class: compact,img-right
# <small>ファイルをアップロードできるFORM文(2): ファイル選択欄の作成</small>

<div class=footnote>
<small><small>
(脚注)
ちなみに、この場合、ブラウザからサーバへ送るデータ（値）はファイルの中身そのものです。
www.pyは、送られてきた値（ファイルの中身）を取り出し、
<b>/home/admin/htdocs/file.uploaded</b>
に保存するように作ってあります（ハードコーディング）
</small></small>
</div>

![height240px](../images/html-form-type=file.png)

<small>
- inputタグで「ファイル選択欄」を作成できます
    <small>
    - <B>inputタグをtype=file</B>で作ると、よくある「ファイルを選択」欄(右図)が作成されます
    - ここでアップロードしたいファイルを選択し、送信すれば、選択したファイルがアップロードされます
    </small>

- <B>キーはfile</B>にしてください
<small>
    - 事前にwww.pyへ仕込まれているアップロード処理をする関数は、
      CGIのキーfileでファイルの中身が送られてくるつもりでいます
      （「キーをfileにする」指示は、そういう意味です）
</small>      
</small>

---
name:  exercises
class: title, smokescreen, shelf, no-footer
# <small>演習</small>

---
class: compact
# 本日の課題

<small>
1. lsform.htmlファイルをコピーしてupload.htmlファイルを作成してください

2. upload.htmlファイルを編集し各自のEC2上にファイルをアップロードできるようにしてください

3. アップロードされたファイルを確認してください

4. 動作確認(TA/SAに見せてください)

- 次回(GWあけに)は口頭試問をします。よく復習＆準備をしておいてください。
    - 詳細は、ポータルを見てください 
</small>