2018年4月28日土曜日

Sinatra でアップロードフォームを作成してみた

概要
環境
必要なディレクトリ作成
アプリ作成
起動ファイル作成
テンプレートファイル作成
動作確認
最後に
参考サイト

概要

タイトルの通りですがアップロードフォームを作成してみました

環境

macOS 10.13.4
Ruby 2.4.1p111
sinatra 1.4.8

必要なディレクトリ作成

mkdir -p public/img
mkdir views

アプリ作成

vim upload.rb

require 'sinatra'

class MyApp < Sinatra::Base
  post '/upload' do
    @filename = params[:file][:filename]
    file = params[:file][:tempfile]
    File.open("./public/img/#{@filename}", 'wb') do |f|
      f.write(file.read)
    end
    erb :complete
  end

  get '/' do
    erb :form
  end
end

ポイントは params[:file][:tempfile] でファイルの実体を取得して .read で読み込んで保存する部分です

起動ファイル作成

vim config.ru

require './upload.rb'
run MyApp

これで

bundle exec rackup config.ru

で起動します

テンプレートファイル作成

vim views/form.erb

<html>
<head>
  <title>upload</title>
</head>
<body>
  <form action="/upload" method="POST" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="Upload image">
  </form>
</body>
</html>

ファイルを送信するので enctype="multipart/form-data" を使います

vim views/complete.erb

<html>
<head>
  <title>Complete</title>
</head>
<body>
  <h1>Show your uploaded image</h1>
  <img src="/img/<%= @filename %>" />
</body>
</html>

アップロードされたファイルを参照しているだけです
今回は画像がアップロードされることを想定しています

動作確認

起動してアップロードしてみましょう

最後に

Sinatra でアップロードフォームを作成してみました
ただ、これだと進捗など確認できないかなと思います
また、JavaScript からやりたくなるケースがあると思うので jQuery からも試してみたいと思います

参考サイト

https://gist.github.com/runemadsen/3905593

hawksnowlog