③の続きです。
休日の間に連続投稿しておきます。
今回はFirebaseのStorageへ画像をアップロードします。
↓参考資料にした公式ガイド
https://firebase.google.com/docs/storage/web/upload-files?hl=ja
まずはfirebaseのStorageサービスを開始しましょう。
↑にアップロードしていきます。
↑初期値のセキュリティルールでは認証ができたユーザーのみアップロードできるようになっているので、ケースによってセキュリティルールを変更しましょう。
fileを受け取るinputを作ってgetImageメソッドでsetStateを行います。
App.js
<inputtype="file"onChange={(event)=>{this.getImage(event)}}></input>
App.js
//stateでimage:''を設けています getImage(event){letimage=event.target.files[0];this.setState({image:image,});}入力フォームの入力値を送るボタンで、addDataメソッドを発動して、
画像とまとめて送信します。
出力ファイル名が分かりやすいように、
{this.state.name}+pngとしています。
また送信成功したらalertが表示されるようにしています。
App.js
//入力値をデータベースへ送るaddData(){firestore.collection('users').add({name:this.state.name,address:this.state.address,created_at:newDate(),}).then(()=>{this.setState({name:'',address:'',});})//ここからがstorageへのアップロードletstorageRef=firebase.storage().ref().child(this.state.name+`.png`);storageRef.put(this.state.image).then(function(snapshot){alert("送信されました");});}↓全体がこちらです。
App.js
importReactfrom'react';import'./App.css';importfirebasefrom"firebase/app";import"firebase/auth";import"firebase/firestore";import{firestore}from'./plugins/firebase';importButtonfrom'@material-ui/core/Button';importTextFieldfrom'@material-ui/core/TextField';importTextareaAutosizefrom'@material-ui/core/TextareaAutosize';importStyledFirebaseAuthfrom'react-firebaseui/StyledFirebaseAuth';classAppextendsReact.Component{constructor(props){super(props);this.state={name:'',address:'',image:'',isLogin:false,}this.getName=this.getName.bind(this);this.getAddress=this.getAddress.bind(this);this.getImage=this.getImage.bind(this);this.addData=this.addData.bind(this);this.logOut=this.logOut.bind(this);}componentDidMount(){firebase.auth().onAuthStateChanged(user=>{this.setState({isLogin:true,});});}getName(event){this.setState({name:event.target.value,});};getAddress(event){this.setState({address:event.target.value,});};getImage(event){letimage=event.target.files[0];this.setState({image:image,});}addData(){firestore.collection('users').add({name:this.state.name,address:this.state.address,created_at:newDate(),}).then(()=>{this.setState({name:'',address:'',});})letstorageRef=firebase.storage().ref().child(this.state.name+`.png`);storageRef.put(this.state.image).then(function(snapshot){alert("送信されました");});}logOut(){this.setState({isLogin:false,});}render(){constuiConfig={signInFlow:'popup',signInSuccessUrl:'/',signInOptions:[firebase.auth.GoogleAuthProvider.PROVIDER_ID,firebase.auth.EmailAuthProvider.PROVIDER_ID,]}; letsuccessfulUser;if(this.state.isLogin){successfulUser=(<div><form><TextFieldlabel="名前"value={this.state.name}onChange={(event)=>{this.getName(event)}}/><br/><TextareaAutosizearia-label="住所"rowsMax={4}placeholder="住所"value={this.state.address}onChange={(event)=>{this.getAddress(event)}}/>;
<br/><inputtype="file"onChange={(event)=>{this.getImage(event)}}></input>
<br/><Buttonvariant="contained"color="primary"onClick={this.addData}>登録</Button>
</form>
<Buttonvariant="contained"color="secondary"onClick={this.logOut}>ログアウト</Button></div>
);}else{successfulUser=(<div><p>Pleasesign-in:</p>
<StyledFirebaseAuthuiConfig={uiConfig}firebaseAuth={firebase.auth()}/>
</div>
);}return(<div>{successfulUser}</div>
);}}exportdefaultApp;↓のような表示になっているので、ファイルを送ってみます。
送れました！
データベースを見ると反映されています。
そしてストレージへはnameの名前でファイルが保存されています。
今回は以上となります。