React Redux Firebaseアップロードファイルオブジェクト

Question

ファイルオブジェクトをレビュックスアクションに渡して、レビュックスアクション内でその機能を実行しようとしましたが、正しい方法がわからないのですか？しかし、基本的に私はfirebaseのアップロード完了からdownloadURLを元に戻したいので、イメージのフロントエンドを表示することができます。

createLocation(event) { 
    event.preventDefault(); 
    const fileObject = this.state.file; 

    const test = { 
     fileObject 
    } 

    this.props.uploadImage_func(test); 
} 

とアクション機能：

export function uploadImage_func(fileObject) { 
    return dispatch => { 
     const fileName = 'myimage'; 
     const storageRef = firebase.storage().ref('test/' + fileName); 
     const task = storageRef.put(fileObject); 

     task.on('state_changed', 
      function complete(snapshot) { 
       const downloadURL = task.snapshot.downloadURL; 
      }, 
     ).then(function() { 

      dispatch(attemptLogin({ 
       ...downloadURL 
      })); 

     }); 
    } 
} 

エラー：あなたがエラーInvalid argument in 'put' at index 0: Expected Blob or Fileを持って見ることができるように

Answer 1

。だからまず、あなたは正確にファイルまたはBlobのパスが必要です。 createLocationにあなたがいて、ファイルオブジェクトを持っている場合は、const testオブジェクトにそれをラップする必要はありません。そのアクションは不必要なネストを引き起こすので、そのままパスfileObjectとなります。もっと。あなたはfirebase UploadTask onイベントにサブスクライブするときは、パスのコールバック関数をする必要があり、正しい順序でそれを行うので、次を使用してみてください：詳細については

uploadTask.on('state_changed', 
    (snapshot) => { 
    // here you could log loading information in percents but uploading is not finished yes 
    console.log((snapshot.bytesTransferred/snapshot.totalBytes) * 100); 
    }, 
    (error) => console.log(error), 
() => { 
    // And after uploading is complete you could get your download url 
    console.log('Call save img', uploadTask.snapshot.downloadURL); 
    } 
); 

が読んdocumentation for Firebase Storage (Upload files)