Firebaseストレージのアップロード投稿フォーム

Question

提出時にファイルをアップロードすることは可能ですか？これらの2つを組み合わせる方法がわからない：まずファイルをアップロードしてから名前を更新するか、提出時にファイルなしで新しい名前を作成する必要があります。

<form ref={(input) => { this.locationForm = input }} onSubmit={this.createLocation} > 
    <input ref={(input) => this.name = input} type="text" name="name" placeholder="Name" /> 
    <input ref={(input) => this.file = input} type="file" onChange={this.uploadFile} id="fileButton" /> 
</form> 

と

createLocation(event) { 
     event.preventDefault(); 

     const store = { 
      ['store']: { 
       name: this.name.value, 
       desc: this.desc.value 
      } 
     } 

     this.props.setStore(store); 
    } 

    uploadFile(e) { 
     const file = e.target.files[0]; 
     const storageRef = firebase.storage().ref('test/' + file.name); 

     storageRef.put(file); 
    } 

setStore Reduxの機能と更新を呼び出します。

Answer 1

はい、可能です。次の操作を行います。

createLocation機能で次に

<Input type="file" id="my-file-id" /> // no need of on change listener 

var myFile= document.getElementById('my-file-id').files[0]; 
const storageRef = firebase.storage().ref('test/' + myFile.name); 

storageRef.put(file); 

注：コンポーネント「入力」、私は「antd」から輸入してきた、私は上記の感じもJSXの「入力」コンポーネントと連携していない場合、コンポーネントあなたには、次の

npm install antd // for node modules 

を行う

import { Input } from 'antd'