Upload images in app RN - blob make problem

Questions and Answers
1
System Information
  • Strapi Version:
  • Operating System:
  • Database:
  • Node Version:
  • NPM Version:
  • Yarn Version:

Hi, I’m trying to do a simple photo attachment in a React Native app. Basically, my strapi backend is set up correctly to work with cloudinary , because with Postman I manage to send a request and attach an image. There is some problem with the blob but I can’t find a solution. I also tried with axios and what not, but the error it gives me is “TypeError: Network request failed]”

import React, { useState, useEffect } from 'react';
import { Button,  Image, StyleSheet, Text, useWindowDimensions, View, } from 'react-native';
import * as ImagePicker from 'expo-image-picker';

import { useAuth } from '../../../hooks';


export default function UploadScreen() {
  const [image, setImage] = useState(null);
  const { user, updateUser } = useAuth();
  
console.log(user);

  const pickImage = async () => {
    // No permissions request is necessary for launching the image library
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
      base64: true,
    });

    //console.log(result);

    if (!result.canceled) {
      try {
        setIsLoading(true);

        const base64 = `data:image/png;base64,${result.assets[0].base64}`;
        const blob = await fetch(base64).then((res) => res.blob());

        const formData = new FormData();
        formData.append('files', blob, 'avatar.png');
        formData.append('ref', 'user'); // Model name
        formData.append('refId', user.id); // User ID
        formData.append('field', 'avatar_url'); // Field name in the model

        const response = await fetch('http://10.6.7.55:1337/api/upload', {
          method: 'POST',
          body: formData,
        });
console.log(response);
        if (response.ok) {
          const responseData = await response.json();
          const updatedUser = { ...user, avatar_url: responseData[0]?.url };

          // Update user data in your app state
          updateUser(updatedUser);
        } else {
          console.error('Failed to upload image to Strapi');
        }
      } catch (error) {
        console.error('Error during image upload:', error);
      } finally {
        setIsLoading(false);
      }
    }
  };

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button title="Pick an image from camera roll" onPress={pickImage} />
      {image && <Image source={{uri: user.avatar_url}}
        style={{width:'100%',height:110,borderTopLeftRadius:10,
      borderTopRightRadius:10}} />}

      <View>
        {user && <Image source={{ uri: user?.avatar_url }} style={styles.avatar} />}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  headerContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 24,
  },
  header: {
    fontFamily: 'mon-b',
    fontSize: 24,
  },
  card: {
    backgroundColor: '#fff',
    padding: 24,
    borderRadius: 16,
    marginHorizontal: 24,
    marginTop: 24,
    elevation: 2,
    shadowColor: '#000',
    shadowOpacity: 0.2,
    shadowRadius: 6,
    shadowOffset: {
      width: 1,
      height: 2,
    },
    alignItems: 'center',
    gap: 14,
    marginBottom: 24,
  },
  avatar: {
    width: 100,
    height: 100,
    //borderRadius: 50,
    //backgroundColor: Colors.grey,
  },
  editRow: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
  },
});