2022年3月8日火曜日

jQuery-File-Upload を使ってみた

概要
環境
サーバ側実装
クライアント側実装
jQuery-File-Upload のインストール
動作確認
少し解説
最後に
参考サイト

概要

jQuery-File-Upload は jQuery を使って簡単にファイルアップロード用のフォームが実装できるライブラリです
今回は簡単な使い方を紹介します

なおこのリポジトリはすでにアーカイブ状態になっているので使用する際はご注意ください

環境

macOS 11.6.4
Ruby 3.0.3p157
sinatra 2.2.0

サーバ側実装

bundle init
vim Gemfile

gem "sinatra"
gem "thin"

bundle install
mkdir views public upload
vim app.rb

# coding: utf-8
require 'sinatra'

class TestUpload < Sinatra::Base
  get '/' do
    erb :index
  end

  post '/upload' do
    if params[:file]
      save_path = "./upload/#{params[:file][:filename]}"
      File.open(save_path, 'wb') do |f|
        f.write params[:file][:tempfile].read
        @msg = params[:file][:filename].force_encoding("utf-8")
      end
    else
      @msg = "Upload Error..."
    end
    content_type :json, :charset => 'utf-8'
    {'filename': @msg}.to_json
  end
end

クライアント側実装

vim views/index.erb

<!DOCTYPE HTML>
<html>
  <head>
  <meta charset="utf-8">
  <title>Upload Test</title>
  </head>
<body>
<input id="fileupload" type="file" name="file" data-url="/upload">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>
<script src="jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
<script src="jQuery-File-Upload/js/jquery.fileupload.js"></script>
<script>
$(function () {
  $('#fileupload').fileupload({
    dataType: 'json',
    add: function (e, data) {
      data.context = $('<button></button>').text('Upload')
      .appendTo(document.body)
      .click(function () {
        data.context = $('<p></p>').text('Uploading...').replaceAll($(this));
        data.submit();
      });
    },
    done: function (e, data) {
      data.context.text(data.result.filename);
    }
  });
});
</script>
</body> 
</html>

jQuery-File-Upload のインストール

CDN などですべてのファイルが公開されているわけではないので手元に持ってきてから使用します

cd public
git clone https://github.com/blueimp/jQuery-File-Upload.git

動作確認

bundle exec rackup config.ru

フォーム画面が表示されてファイルが upload ディレクトリ配下に作成されれば OK です

少し解説

$('#fileupload').fileupload を呼び出すだけで必要なフォームを作成してくれます
今回はボタンを押したらアップロードしたかったので add コールバックメソッドを実装していますがなくても動作します

レスポンスは JSON 形式を想定しているので Sinatra から返却されるレスポンスは application/json にする必要があります

Sinatra 側ではファイルをローカルに保存していますがここは自由に変更して OK です

Sinatra の public ファイルは public ディレクトリ配下に配置する必要があるので git clone したライブラリは public 配下に配置しています

最後に

スタイルなど当てることもできるようです
リポジトリはすでにリードオンリーになっているのでくれぐれも使用する際は注意しましょう

参考サイト

https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

hawksnowlog