Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

React Native Firebase Multiple Image Upload Problem

$
0
0

In React Native, I select images using the ImagePicker package and upload images to Firebase Storage. I also want to send Firebase Storage image links using the Getdownloadurl() method with the Firebase Rest Api.

I manage to upload images, but when I send them by making a rest api post request, the image links go undefined. I'm following from the console screen making a post request without 100% of the total image size.

const uploadImage = async (uploadUri: string, transferred: number) => {    let filename = uploadUri.substring(uploadUri.lastIndexOf('/') + 1);    transferred = 0;    const storageRef = storage().ref(`images/${filename}`);    const task = storageRef.putFile(uploadUri);    task.on('state_changed', taskSnapshot => {        console.log(`${taskSnapshot.bytesTransferred} transferred out of ${taskSnapshot.totalBytes}`);        transferred = Math.round((taskSnapshot.bytesTransferred / taskSnapshot.totalBytes) * 100);    });    try {        await task;        const url = await storageRef.getDownloadURL();        return url;    } catch (error) {        console.log(error);        return null;    }}export const addPost = (files: string[], post: Post): ThunkAction<void, RootState, null, AddPostAction> => {    return async dispatch => {        try {            dispatch({ type: ADD_POST_LOADING, payload: true });            const imageData: Image[] = [];            files.map(async (item) => {                const imageUrl = await uploadImage(item, 0);                imageData.push({ image: imageUrl! });            });            const postData: Post = {                ...post,                thumb: imageData[0].image            }            const response = await fetch(`${BASE_URL}/post.json`, { method: "POST", body: JSON.stringify(postData) });            if (response.ok) {                const successPostData: AddPostSuccess = await response.json();                dispatch({ type: ADD_POST_SUCCESS, payload: successPostData });            } else {                dispatch({ type: ADD_POST_ERROR, payload: "404" });            }        } catch (error) {            console.log(error);        }    }}

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>