Загрузка изображения в хранилище Firebase с помощью React Native

Продолжая создавать наше Приложение React Native Social Poster, мы хотим, чтобы наши пользователи сделали снимок и загрузили его в Firebase Storage. React Native Image Picker идеально подходит для использования нативного интерфейса камеры телефона.

   _takePicture = () => {
      const cam_options = {
        mediaType: 'photo',
        maxWidth: 1000,
        maxHeight: 1000,
        quality: 1,
        noData: true,
      };
      ImagePicker.launchCamera(cam_options, (response) => {
        if (response.didCancel) {
        }
        else if (response.error) {
        }
        else {
          this.setState({
            imagePath: response.uri,
            imageHeight: response.height,
            imageWidth: response.width,
          })
        }
      })
    }

Поскольку в React Native отсутствует реализация Blob, мы используем хорошо поддерживаемый пакет React Native Fetch Blob. Это позволяет нам создать Blob из локальной фотографии, чтобы мы могли легко загрузить его в Firebase Storage.

const Blob = RNFetchBlob.polyfill.Blob
const fs = RNFetchBlob.fs
window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest
window.Blob = Blob
const uploadImage = (uri, imageName, mime = 'image/jpg') => {
  return new Promise((resolve, reject) => {
    const uploadUri = Platform.OS === 'ios' ? uri.replace('file://', '') : uri
      let uploadBlob = null
      const imageRef = firebaseApp.storage().ref('posts').child(imageName)
      fs.readFile(uploadUri, 'base64')
      .then((data) => {
        return Blob.build(data, { type: `${mime};BASE64` })
      })
      .then((blob) => {
        uploadBlob = blob
        return imageRef.put(blob, { contentType: mime })
      })
      .then(() => {
        uploadBlob.close()
        return imageRef.getDownloadURL()
      })
      .then((url) => {
        resolve(url)
      })
      .catch((error) => {
        reject(error)
      })
  })
}

Это решение очень хорошо работает с Firebase Javascript SDK 3.6.0, но новая версия 3.6.1 фактически нарушает работу storage.imageref.put (). Служба поддержки Firebase знает о проблеме и в настоящее время изучает ее. Будем надеяться, что они скоро найдут решение этой проблемы.

ОБНОВЛЕНИЕ 28 ноября 2016 г.

Команда поддержки Firebase ответила на эту проблему: Похоже, проблема связана с response-native-fetch-blob, в котором была ошибка, из-за которой он не работал должным образом с выпуском 3.6.1. Ошибка исправлена ​​в версии v0.10.1-beta.1 с PR # 194. Самая последняя версия - v0.10.1-beta.2. См. Примечания к выпуску для получения более подробной информации.

Я обновился до новой бета-версии response-native-fetch-blob и последней версии Firebase 3.6.1 sdk и хорошие новости, все работает очень хорошо. Спасибо команде поддержки Firebase за их реакцию.

Не стесняйтесь клонировать наше Приложение Social Poster и изменять его по своему усмотрению.