前提・実現したいこと
初めて質問させていただきます。
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">では正しく情報を送ることができない、ということはなんとなく理解しているのですが
具体的な解決手段が見つかりません。
参考サイトやアドバイスなどございましたら教えていただけると助かります。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。