【PHPファイルアップロード】brandonsavage/Uploadライブラリを使って、画像アップロード機能を作る

今回は、PHPライブラリを使って、画像アップロード機能を作ってみます。アップロードは、以前ライブラリ無しで作ったことがあったけど、かなり面倒な印象がありました。また、今回使ったものは、ネット上に日本語の情報があまりありませんでしたが、なんとかなりました。さっそく内容を確認していきましょう。

今回使ったライブラリ（brandonsavage/Upload）について

ネットでいろいろ検索していて見つけたライブラリ。githubリポジトリに、ある程度の情報が記載されており、 HTMLフォーム組み方や、サーバーサイドでの処理のしかたなどが書いてあります。そのほか、バリデーションやファイルサイズ制限、try/catchによるアップロード成功判定の方法も。

なお、ライセンスは『MIT License』となっているので緩めです。

brandonsavage/Upload・githubリポジトリ
https://github.com/brandonsavage/Upload

Uploadライブラリインストール＆諸々の準備

まずは、html＆フォーム部分を静的構築しておきます。 actionの送信先はまだ空ですが、ここに後で、裏で処理するスクリプトを指定します。内容はinput type="file"と、input type="submit"の二つ。フォームのname属性や、idの指定などもあとで行います（javascriptでフロント制御とかで使う）。

次に、コマンドでライブラリをインストールします（composer使用します）。composer使った方が、オートローダーとかが入ってきて読み込みがラクかもしれません。xammpのディレクトリに『study/2024-11-fileup』のフォルダを作っておいて、以下のコマンド（cdはインストールしたい場所によって変わります。）。

vendorとかcomposer関連のファイルが入りました。あと、アップしたファイルの保存先として『photo』というフォルダも追加しています。

brandonsavage/Uploadライブラリを使った、画像アップローダーのコード

都合によりPHP/html/js部分を一個にまとめてしまいましたが、こんな感じです。管理人の環境では、フォームhtml部分はindexにして、同じ階層にcontroller.phpを置いています。

ポイント１（PHP部分）

オートロードしたあとは、保存フォルダや送信元フォームのname属性の指定を行い、リネーム(uniqidファンクション使用)して、ファイルタイプやサイズでバリデーションをかけてtry/catchで 判定する、という流れになっています。ファイルが入らなかった場合のエラーは変数$errorsに格納されているので、アクセスしてその内容を表示しても良いです（日本語にするファンクション挟んでもベターです）。

ポイント２（htmlフォーム）

actionの送信先は、同じ階層に置いたcontroller.php（phpの部分）です。typeとnameを指定するほか、『required』をつけて空送信されないようにします。また、submitボタンにはクリックイベントを仕込みました。

ポイント３（javascript）：

document.getElementByIdでフォームを取得し、空でない場合はconfirmで『アップロードしますか？』が出るようにしています。上記のsubmitボタンクリックイベントと連動しています。

表示・操作例

では作ったアップローダーを操作してみます。 『required』をつけておくと、空の状態では『ファイルを選択してください』になります（getErrorsを使ったけどサーバーサイド空判定があってもよいです）。

アップして送信ボタンを押したときの挙動。confirmでワンクッションいれました。

アップロード後のcontroller.php。『アップロードしました』の表示がでるような作りにしました。状況によってはリダイレクトにするかも。

アップロードフォルダを見てみましょうか。こんな感じでuniqidファンクションによるリネームされたファイルが格納されていきます。命名規則とか作っても使いやすいかもです。

あとがき・まとめ

まとめると、こんなところでしょうか。昔PHPでアップローダ自作したときは（経験が少なかったのもあって）かなり苦戦したんですけど、今回のUploadライブラリはわりとサックリ作れた気がします。