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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails 5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

1回答

877閲覧

Reactでファイルをアップロード

sunki4211

総合スコア12

Ruby on Rails 5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2019/06/05 08:35

前提・実現したいこと

初めて質問させていただきます。
Rails API mode + webpacker + reactでアプリを作っています。
rails + Reactで画像ファイルをアップロード/表示させたいです。

発生している問題・エラーメッセージ

画像+テキストの投稿フォームを作成しているのですが、
投稿後、コンソールに以下のエラーが出て画像が表示されません。

net::ERR_UNKNOWN_URL_SCHEME

該当のソースコード

以下、フォームのコードを書いているファイルです。

jsx

1import React from 'react'; 2 3class SpotForm extends React.Component { 4 constructor(props) { 5 super(props) 6 7 this.state = { 8 comment: '', 9 image: '' 10 } 11 12 this.createSpot = this.createSpot.bind(this); 13 } 14 15 createSpot(event) { 16 let request = new Request('/api/v1/spots', { 17 method: 'POST', 18 headers: new Headers({ 19 'Content-Type': 'application/json' 20 }), 21 body: JSON.stringify({ 22 comment: this.state.comment, 23 image: this.state.image 24 }) 25 }); 26 27 fetch(request).then(function (response) { 28 return response.json(); 29 }).then((spot) => { 30 this.props.getSpots(); 31 }).catch(function (error) { 32 console.error(error); 33 }).finally(() => { 34 this.setState({ 35 comment: '', 36 image: '' 37 }) 38 }); 39 40 event.preventDefault(); 41 } 42 43 render() { 44 let { comment, image } = this.state; 45 46 return ( 47 <div className="form"> 48 <form onSubmit={this.createSpot}> 49 <ul> 50 <li> 51 <input 52 type="file" accept="image/*" 53 value={image} 54 onChange={(e) => { 55 this.setState({ 56 image: e.target.value 57 }) 58 }} 59 /> 60 </li> 61 <li> 62 <input 63 type="text" value={comment} 64 placeholder="Comment" 65 onChange={(e) => { 66 this.setState({ 67 comment: e.target.value 68 }) 69 }} 70 /> 71 </li> 72 <li> 73 <input type="submit" value="Create Spot" /> 74 </li> 75 </ul> 76 </form> 77 </div> 78 ) 79 } 80} 81 82export default SpotForm; 83 84 85

試したこと

<input type="file">では正しく情報を送ることができない、ということはなんとなく理解しているのですが
具体的な解決手段が見つかりません。
参考サイトやアドバイスなどございましたら教えていただけると助かります。

補足情報(FW/ツールのバージョンなど)

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

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

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

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

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

guest

回答1

0

<input type="file">については、value経由で中身の制御ができないので、value書かずに値の保管をHTML側に任せる、Uncontrolledの形をとる必要があります。

実際の画像データについては、onChangeなどでelement.files経由で取得して、それをFormDataに詰め込むことで、Content-Type: multipart/form-dataとして送信が可能です(いちおう、エンコードをかければapplication/jsonに載せられなくもないかもしれませんが、手間も容量も余計に食うだけであまりメリットはありません)。

React + fetch APIでFileをUploadする

投稿2019/06/05 08:48

maisumakun

総合スコア145121

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問