通過React提交表單上的Firebase存儲空間上傳

Question

是否可以上傳提交的文件？不知道如何結合這兩個：現在它必須先上傳文件，然後更新名稱或創建新名稱，無需提交文件。

<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來電終極版的功能和更新。

Answer 1

是的，可以做到以下幾點。

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

然後在createLocation功能

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'