uploading image to firebase storage with react native/expo?

How to / Third Party Tooling
1

Hello , I am fairly new to react native, i am trying to upload images to firebase storage using the expo image picker by pulling the image off the state but for so reason the image is not reaching to the firebase storage after reaching the state what can i do any help?

import React from 'react';
import {
Button,
Image,
View,
} from 'react-native';
import { Constants, ImagePicker, Permissions } from 'expo';
import uuid from 'uuid';
import * as firebase from 'firebase';

console.disableYellowBox = true;


const firebaseConfig = {
apiKey: 'AIzaSyAlZruO2T_JNOWn4ysfX6AryR6Dzm_VVaA',
authDomain: 'blobtest-36ff6.firebaseapp.com',
databaseURL: 'https://blobtest-36ff6.firebaseio.com',
storageBucket: 'blobtest-36ff6.appspot.com',
messagingSenderId: '506017999540',
};

firebase.initializeApp(firebaseConfig);

export default class App extends React.Component {
state = {
image: null,

};

componentDidMount() {
this.getPermissionAsync();
}

render() {
  let { image } = this.state;

return (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>


    {image &&
      <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}


    <View style={{ padding: 5 }}>
      <Button
        onPress={this._pickImage}
        title="Pick an image from camera roll"
      />

    </View>

    <Button onPress={this.onButtonPress} title="upload to firebase" />

  </View>
);
   }




getPermissionAsync = async () => {
if (Constants.platform.ios) {
  const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
  if (status !== 'granted') {
    alert('Sorry, we need camera roll permissions to make this work!');
  }
}
}

_pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
  mediaTypes: ImagePicker.MediaTypeOptions.All,
  allowsEditing: true,
  aspect: [4, 3],
});



if (!result.cancelled) {
  this.setState({ image: result.uri });
  }
 };
}

onButtonPress = async () => {

 uploadUrl = await uploadImageAsync(this.state.image);

}

async function uploadImageAsync(uri) {

console.log(uri)

const blob = await new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.onload = function () {
  resolve(xhr.response);
};
xhr.onerror = function (e) {
  console.log(e);
  reject(new TypeError('Network request failed'));
};
xhr.responseType = 'blob';
xhr.open('GET', uri, true);
xhr.send(null);
});

const ref = firebase
.storage()
.ref()
.child(uuid.v4());
const snapshot = await ref.put(blob);

blob.close();

return await snapshot.ref.getDownloadURL();
}
2

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.