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>
(脚注)
WWWサーバとのやりとり２です。ファイルもデータですから
</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: title, smokescreen, shelf, no-footer
# <small>HTML(2)<br>ファイルをアップロードするFORM文</small>

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

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

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

<div class=footnote>
<small><small>
(脚注)
課題は「ファイルを各自のEC2上にアップロード」できることです。
とうぜん設定は各自ことなります
</small></small>
</div>

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

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

```
[例]

<form method="POST" enctype="multipart/form-data" action="http://学籍番号.cloud.fml.org/api/upload/v1">
```

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

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

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

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

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

2. upload.htmlファイルを編集し、WWWサーバ(www.py)にファイルをアップロードできるようにしてください

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

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