Ошибка [объект объекта] - загрузка файла хранилища Firebase через File API - PullRequest
Новая
       16

Ошибка [объект объекта] - загрузка файла хранилища Firebase через File API

0 голосов
/ 23 февраля 2020

Примечание. Запуск этого кода в codesandbox.io

Попытка загрузить файл в Firebase Storage, но получение сообщения об ошибке [объект объекта]. Я успешно могу написать что-то в FireStore и подтвердил, что selectedFile имеет тип file. 

import React, { useState, useEffect } from 'react';
import firebase from "./firebase"

function AddImage() {

        // Get a reference to the storage service, which is used to create references in your storage bucket
        var storage = firebase.storage();

        // Create a storage reference from our storage service
        var storageRef = storage.ref();

        var imageRef = storageRef.child('imageLogs/wtfd.png');
        //alert(imageRef);

  const uploadImage = () => {
    alert('In upload image');
    var selectedFile = document.getElementById('image').files[0];
    try {

      alert('In try');
      imageRef.put(selectedFile).then(function (snapshot) {
        setImage('Booyah');
        console.log('Uploaded a blob or file!');
      });
    }
    catch (err) {
      console.log(err);
      console.log(err.message);
        }
  }

  const [uploadedImage, setImage] = useState();

  return (
    <div>
      <input type="file" id="image" />
      <br />
      <input type="button" value="Add image" onClick={() => uploadImage()} />
      <br />
      <p>Uploaded Image: {uploadedImage}</p>
    </div>
  );
}

export default AddImage;

Обновление:

Такое же сообщение об ошибке получено для .getDownloadUrl () на существующем образе в Firebase Storage: 

import React, { useState, useEffect } from 'react';
import firebase from "./firebase"

function GetImage() {
        var storage = firebase.storage();

        var imageRef = storage.refFromURL('gs://XXXXX-XXXXX.appspot.com/imageLogs/preview.jpg');

  const getDownloadUrl = () => {
    try {
      imageRef.getDownloadURL().then(function(url) {
        setImageDownloadUrl(url);
      }
      );

    }
    catch (err) {
      console.log(err);
      console.log(err.message);
        }
  }

  const [imageDownloadUrl, setImageDownloadUrl] = useState();

  return (
    <div>
      <input type="button" value="Get Download Url" onClick={() => getDownloadUrl()} />
      <br />
      <p>Image Download Url: {imageDownloadUrl}</p>
    </div>
  );
}

export default GetImage;

firebase. js: 

// Firebase App (the core Firebase SDK) is always required and
// must be listed before other Firebase SDKs
import * as firebase from "firebase/app";

// Add the Firebase services that you want to use
import "firebase/auth";
import "firebase/firestore";
import "firebase/storage";

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  apiKey: "ZZZZZZZZ-XXXXXXXXX",
  authDomain: "XXXXX-XXXXXX.XXXX.com",
  databaseURL: "https://XXXXX-XXXXX.XXXX.com",
  projectId: "XXXXXXXXX-XXXXX",
  storageBucket: "XXXXXX-XXXXX.XXXXX.XXXX",
  messagingSenderId: "ZZZZZZ",
  appId: "1:XXXX:XXXXXXXXXX",
  measurementId: "G-XXXXX"
};

// Initialize Firebase
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
}

export default firebase;

Сообщение об ошибке со стеком:

enter image description here

1 Ответ

0 голосов
/ 23 февраля 2020

Это была запрещенная ошибка 403 из-за правил хранения в firebase.

Он не был захвачен в попытке перехвата, потому что аутентификация была обещанием, которое возвращало ошибку после того, как функция загрузки уже была выполнена.

Ошибка была зафиксирована после того, как она была доставлена ​​на локальный компьютер из CodeSandbox, и возникла исключительная ситуация в Chrome Проверка консоли DevTools. В песочнице кода просто отображается сообщение об ошибке Error [object Object].

После обновления правил хранения, разрешающих доступ, также работает версия репозитория CodeSandox.

...