世界一シンプル!drag&dropでファイルアップロードする。ExpressとMulterとDropzoneを使おう!

 

こんにちは!

 

週末は趣味でプログラミングするのでコロナだろうとコロナで無かろうと外出自粛になってしまう、しずかなかずしです。

 

JavaScriptのプログラミングで困ってませんか?

 

以前は、PythonでDjangoフレームワークを使ってWebアプリケーションを書いていました。Djangoの記事は、こちらの記事がおすすめです。通常はWordPress、つまりPHPを実行させて使われることが多いレンタルサーバー(エックスサーバー)ですが、Pythonのアプリも動かせるよ、という奮闘記です。

 

しかし、最近は、Nodejs と Expressフレームワークが手放せません。

今日は、ちょっとした備忘録的に、NodejsのExpressの上で、ファイルをドラッグ&ドロップしてアップロードする、世界一短いWebプログラムを書いてみます。

 

フレームワーク:Express

今回は、クライアントもサーバーもJavaScriptを使っていきます。

サーバーサイドのJavaScriptと言えば、言わずと知れたNodejsですね。今やその筋の人からすると「鬼滅の刃」と同じくらい有名なので当然ご存知でしょう。

そして、NodejsでWebアプリを作る場合は、フレームワークとしてはExpressが流行りです。

 

という訳で、今回のプログラミングはExpressを使っていきます。

Expressを使い始めるためには、Express generatorというツールを使うと、Webアプリケーションの雛形を作ってくれるので非常に便利です。

今日は本題ではないので、使い方は以下のサイトの記事に委ねます。

 

クライアント: Dropzone

本題のドラッグ&ドロップをWebアプリで実現するためのクライアントに選んだのは、dropzoneです。

 

dropzoneのサイトより転載
dropzoneのサイトより転載

dropzoneはクライアント用のJavaScriptライブラリです。Viewの表示やプログレスバー、アップロード画像のサムネールなど、Webブラウザでドロップ画面を表示を簡単に実装できます。

 

使い方は簡単。サイトからzipファイルをダウンロードしてきて、そのdistディレクトリにある「dropzone.js」および「dropzone.css」を見つけます。それらを、WebアプリをExpress generatorで生成した時にできる public フォルダにコピーしておきます。

 

後は、サーバーに設置した.jsファイルと.cssファイルをブラウザが読み込めるように、PUGの layout.pugファイルを以下のように記載します。

 

PUGはExpressで使うテンプレートエンジンの一つです。この言語でWebアプリのViewを記述すると実行時にレンダリングされて最終的にはHTMLがWebブラウザに送られます。

 

(6行目と7行目が追加したコードです)

ブラウザに表示されるときのHTMLのコードは以下の通り。

※ jsファイル、cssファイルのパスは適切なものにして下さい。

 

そして、HTMLでドラッグ&ドロップのターゲットの「枠」を表示するのは以下のコードです。

同様にPugのコードはこちら(p Welcome to #{title}まではgeneratorが作ったコードです)。

 

 

私が追加したのは、最後の3行。 DIV要素(idは’awesome’)の追加と、JavaScriptのコード(new Dropzone()の実装)です

 

これがレンダリングされるとHTML(一部)はとしては以下のように出力されます。

 

アップロードするサーバー側のパスは「/upload」にしています(url:で指定されている)。

このパスは、Expressのサーバーが側のRouterの実装(後述)と合せておく必要があります。

サーバー: Multer

dropzoneだけだと、サーバー側の処理がないので、Expressのサーバー側の処理を実装します。

Multer というライブラリを使用しました。Multerは、HTMLのマルチパートのフォーム形式のファイルアップロードを処理するNodejsのライブラリです。マルチーパートだからmulterなんですね、きっと。

 

インストールは簡単。コマンドラインで以下を実行するだけ。

 

$ npm install multer –save

 

upload.jsというRouterクラスを1つ実装しました。

わずか10行のクラスです。


 

dest: ‘uploads/’がサーバー上で、アップロードされたファイルを格納すされるディレクトリです。

postで受けて、req.file.filenameに、uploadsに格納されたファイル名(ファイル名のみ)が入ります。ファイルの保存は全てmulterがやってくれる訳ですね。そして、サーバー上のファイルはかぶらないように自動的にランダムなファイル名をつけてくれます。req.file.fienameに入るのはそのファイル名です。

 

なんと便利なのでしょう!!

このクラス(Router)を使うために、generatorが生成したapp.jsも編集しましょう。

※ 追加したコードのみ記載しています。

 

app.use()で指定するパスが、dropzoneのライブラリのurl:で指定したパスになっていることに注意。これがすなわち、Webアプリの「ルーティング」という作業ですね。

結果の画面

完成したのがこちら。

Express上でdropzoneとmulterを使ってdrag&dropを実現したアプリ画面
Express上でdropzoneとmulterを使ってdrag&dropを実現したアプリ画面

めちゃめちゃ少量のコードで実現できて驚きます。めちゃめちゃ便利です。

 

NodejsやExpressをもっと知りたい方はこちら↓

created by Rinker
オライリージャパン
¥4,620 (2020/12/03 13:25:50時点 Amazon調べ-詳細)
あなたへのおすすめ

仕事では、メーカーで20年以上のソフトウエア開発。 古くはWindows向けのアプリケーション開発、組み込み機器のソフト開発、などを経て、近年は大規模ソフトのプロジェクト・リーディングを行う。 根っからのプログラミング好きで、週末は、JavascriptやPythonでWeb開発。興味の幅が広く、以前は、仕事の傍らオンラインでBond大学のMBAを取得。 ブログに書くのは、料理、スポーツ、テクノロジー、建築、不動産、音楽、など色々なジャンルの雑記。
投稿を作成しました 359

コメントを残す

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る
%d人のブロガーが「いいね」をつけました。