質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

0回答

265閲覧

RailsでTypescriptからファイルを受け取りRails側でアップロードしたい

kuuritar

総合スコア38

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2018/12/12 13:51

TypescriptでFormDataを利用し<input type='file'>でデータをRails側にPOSTしたいのですが、Rails側で以下のようなエラーになります。

原因がわからず、何か知っている方が入ればご教授願います。

大量の文字化けした文字(数100行) undefined ------WebKitFormBoundaryMjQdB3v7onHD1lnN-- ActionDispatch::Http::Parameters::ParseError (743: unexpected token at '------WebKitFormBoundaryMjQdB3v7onHD1lnN Content-Disposition: form-data; name="video"; filename="スクリーンショット 2018-09-18 23.50.09.png" Content-Type: image/png �PNG '): vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.6/lib/action_dispatch/http/parameters.rb:115:in `rescue in parse_formatted_parameters' vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.6/lib/action_dispatch/http/parameters.rb:109:in `parse_formatted_parameters' vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.6/lib/action_dispatch/http/request.rb:361:in `block in POST' vendor/bundle/ruby/2.4.0/gems/rack-2.0.6/lib/rack/request.rb:59:in `fetch' vendor/bundle/ruby/2.4.0/gems/rack-2.0.6/lib/rack/request.rb:59:in `fetch_header' vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.6/lib/action_dispatch/http/request.rb:360:in `POST' vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.6/lib/action_controller/metal/params_wrapper.rb:286:in `_wrapper_enabled?' vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.6/lib/action_controller/metal/params_wrapper.rb:235:in `process_action' vendor/bundle/ruby/2.4.0/gems/activerecord-5.1.6/lib/active_record/railties/controller_runtime.rb:22:in `process_action' vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.6/lib/abstract_controller/base.rb:124:in `process' vendor/bundle/ruby/2.4.0/gems/actionview-5.1.6/lib/action_view/rendering.rb:30:in `process' vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.6/lib/action_controller/metal.rb:189:in `dispatch' vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.6/lib/action_controller/metal.rb:253:in `dispatch' vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.6/lib/action_dispatch/routing/route_set.rb:49:in `dispatch' vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.6/lib/action_dispatch/routing/route_set.rb:31:in `serve' vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.6/lib/action_dispatch/journey/router.rb:50:in `block in serve' vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.6/lib/action_dispatch/journey/router.rb:33:in `each' vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.6/lib/action_dispatch/journey/router.rb:33:in `serve' vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.6/lib/action_dispatch/routing/route_set.rb:844:in `call' vendor/bundle/ruby/2.4.0/gems/warden-1.2.8/lib/warden/manager.rb:36:in `block in call' vendor/bundle/ruby/2.4.0/gems/warden-1.2.8/lib/warden/manager.rb:34:in `catch' vendor/bundle/ruby/2.4.0/gems/warden-1.2.8/lib/warden/manager.rb:34:in `call' vendor/bundle/ruby/2.4.0/gems/rack-2.0.6/lib/rack/etag.rb:25:in `call' vendor/bundle/ruby/2.4.0/gems/rack-2.0.6/lib/rack/conditional_get.rb:38:in `call' vendor/bundle/ruby/2.4.0/gems/rack-2.0.6/lib/rack/head.rb:12:in `call' vendor/bundle/ruby/2.4.0/gems/rack-2.0.6/lib/rack/session/abstract/id.rb:232:in `context' vendor/bundle/ruby/2.4.0/gems/rack-2.0.6/lib/rack/session/abstract/id.rb:226:in `call' vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.6/lib/action_dispatch/middleware/cookies.rb:613:in `call' vendor/bundle/ruby/2.4.0/gems/activerecord-5.1.6/lib/active_record/migration.rb:556:in `call' vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.6/lib/action_dispatch/middleware/callbacks.rb:26:in `block in call' vendor/bundle/ruby/2.4.0/gems/activesupport-5.1.6/lib/active_support/callbacks.rb:97:in `run_callbacks' vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.6/lib/action_dispatch/middleware/callbacks.rb:24:in `call' vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.6/lib/action_dispatch/middleware/executor.rb:12:in `call' vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.6/lib/action_dispatch/middleware/debug_exceptions.rb:59:in `call' vendor/bundle/ruby/2.4.0/gems/web-console-3.7.0/lib/web_console/middleware.rb:135:in `call_app' vendor/bundle/ruby/2.4.0/gems/web-console-3.7.0/lib/web_console/middleware.rb:30:in `block in call' vendor/bundle/ruby/2.4.0/gems/web-console-3.7.0/lib/web_console/middleware.rb:20:in `catch' vendor/bundle/ruby/2.4.0/gems/web-console-3.7.0/lib/web_console/middleware.rb:20:in `call' vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.6/lib/action_dispatch/middleware/show_exceptions.rb:31:in `call' vendor/bundle/ruby/2.4.0/gems/railties-5.1.6/lib/rails/rack/logger.rb:36:in `call_app' vendor/bundle/ruby/2.4.0/gems/railties-5.1.6/lib/rails/rack/logger.rb:24:in `block in call' vendor/bundle/ruby/2.4.0/gems/activesupport-5.1.6/lib/active_support/tagged_logging.rb:69:in `block in tagged' vendor/bundle/ruby/2.4.0/gems/activesupport-5.1.6/lib/active_support/tagged_logging.rb:26:in `tagged' vendor/bundle/ruby/2.4.0/gems/activesupport-5.1.6/lib/active_support/tagged_logging.rb:69:in `tagged' vendor/bundle/ruby/2.4.0/gems/railties-5.1.6/lib/rails/rack/logger.rb:24:in `call' vendor/bundle/ruby/2.4.0/gems/sprockets-rails-3.2.1/lib/sprockets/rails/quiet_assets.rb:13:in `call' vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.6/lib/action_dispatch/middleware/remote_ip.rb:79:in `call' vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.6/lib/action_dispatch/middleware/request_id.rb:25:in `call' vendor/bundle/ruby/2.4.0/gems/rack-2.0.6/lib/rack/method_override.rb:22:in `call' vendor/bundle/ruby/2.4.0/gems/rack-2.0.6/lib/rack/runtime.rb:22:in `call' vendor/bundle/ruby/2.4.0/gems/activesupport-5.1.6/lib/active_support/cache/strategy/local_cache_middleware.rb:27:in `call' vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.6/lib/action_dispatch/middleware/executor.rb:12:in `call' vendor/bundle/ruby/2.4.0/gems/actionpack-5.1.6/lib/action_dispatch/middleware/static.rb:125:in `call' vendor/bundle/ruby/2.4.0/gems/rack-2.0.6/lib/rack/sendfile.rb:111:in `call' vendor/bundle/ruby/2.4.0/gems/rack-cors-1.0.2/lib/rack/cors.rb:97:in `call' vendor/bundle/ruby/2.4.0/gems/railties-5.1.6/lib/rails/engine.rb:522:in `call' vendor/bundle/ruby/2.4.0/gems/thin-1.7.2/lib/thin/connection.rb:86:in `block in pre_process' vendor/bundle/ruby/2.4.0/gems/thin-1.7.2/lib/thin/connection.rb:84:in `catch' vendor/bundle/ruby/2.4.0/gems/thin-1.7.2/lib/thin/connection.rb:84:in `pre_process' vendor/bundle/ruby/2.4.0/gems/thin-1.7.2/lib/thin/connection.rb:53:in `process' vendor/bundle/ruby/2.4.0/gems/thin-1.7.2/lib/thin/connection.rb:39:in `receive_data' vendor/bundle/ruby/2.4.0/gems/eventmachine-1.2.7/lib/eventmachine.rb:195:in `run_machine' vendor/bundle/ruby/2.4.0/gems/eventmachine-1.2.7/lib/eventmachine.rb:195:in `run' vendor/bundle/ruby/2.4.0/gems/thin-1.7.2/lib/thin/backends/base.rb:73:in `start' vendor/bundle/ruby/2.4.0/gems/thin-1.7.2/lib/thin/server.rb:162:in `start' vendor/bundle/ruby/2.4.0/gems/rack-2.0.6/lib/rack/handler/thin.rb:22:in `run' vendor/bundle/ruby/2.4.0/gems/rack-2.0.6/lib/rack/server.rb:297:in `start' vendor/bundle/ruby/2.4.0/gems/railties-5.1.6/lib/rails/commands/server/server_command.rb:44:in `start' vendor/bundle/ruby/2.4.0/gems/railties-5.1.6/lib/rails/commands/server/server_command.rb:135:in `block in perform' vendor/bundle/ruby/2.4.0/gems/railties-5.1.6/lib/rails/commands/server/server_command.rb:130:in `tap' vendor/bundle/ruby/2.4.0/gems/railties-5.1.6/lib/rails/commands/server/server_command.rb:130:in `perform' vendor/bundle/ruby/2.4.0/gems/thor-0.20.3/lib/thor/command.rb:27:in `run' vendor/bundle/ruby/2.4.0/gems/thor-0.20.3/lib/thor/invocation.rb:126:in `invoke_command' vendor/bundle/ruby/2.4.0/gems/thor-0.20.3/lib/thor.rb:387:in `dispatch' vendor/bundle/ruby/2.4.0/gems/railties-5.1.6/lib/rails/command/base.rb:63:in `perform' vendor/bundle/ruby/2.4.0/gems/railties-5.1.6/lib/rails/command.rb:44:in `invoke' vendor/bundle/ruby/2.4.0/gems/railties-5.1.6/lib/rails/commands.rb:16:in `<top (required)>' bin/rails:9:in `require' bin/rails:9:in `<top (required)>' vendor/bundle/ruby/2.4.0/gems/spring-2.0.2/lib/spring/client/rails.rb:28:in `load' vendor/bundle/ruby/2.4.0/gems/spring-2.0.2/lib/spring/client/rails.rb:28:in `call' vendor/bundle/ruby/2.4.0/gems/spring-2.0.2/lib/spring/client/command.rb:7:in `call' vendor/bundle/ruby/2.4.0/gems/spring-2.0.2/lib/spring/client.rb:30:in `run' vendor/bundle/ruby/2.4.0/gems/spring-2.0.2/bin/spring:49:in `<top (required)>' vendor/bundle/ruby/2.4.0/gems/spring-2.0.2/lib/spring/binstub.rb:31:in `load' vendor/bundle/ruby/2.4.0/gems/spring-2.0.2/lib/spring/binstub.rb:31:in `<top (required)>' bin/spring:15:in `require' bin/spring:15:in `<top (required)>' bin/rails:3:in `load' bin/rails:3:in `<main>'

Typescript側はこんな感じで送っています。

ts

1const file_element = <HTMLInputElement>document.getElementById('thumbnail'); 2const file = file_element.files[0]; 3const data = new FormData(); 4data.append('image', file, file.name); 5this.http.post(`APIURL`, data).subscribe( 6{割愛} 7);

他不足している情報があれば教えてください。
(Rails側のAPIのソースは不要かと思い載せませんでした。)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問