Image Picker and Uploader for Expo and React Native

Reactnative.js

import * as ImagePicker from "expo-image-picker";

const [image, setImage] = useState(null);

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,import * as ImagePicker from "expo-image-picker";

const [image, setImage] = useState(null);

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,
  });

  if (!result.canceled) {
    setImage(result.assets[0].uri);
  }
};

const handleUpdatePersonalInformation = () => {
  const formData = new FormData();
  const filePath = image.split("file:/").join("");
  formData.append("profilePicture", {
    uri: filePath,
    type: "image/jpeg",
    name: "profile-picture.jpg",
  });

  fetch(`YOUR SERVER URL`, {
    method: "PATCH",
    body: formData,
  })
    .then((res) => Toast("Uploaded Image to ImageKit!"))
    .catch((err) => console.log(err));
};

return (
  <SafeAreaView style={styles.container}>
    <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
      <Image
        source={{
          uri: image
            ? image
            : "https://ik.imagekit.io/13x54r/I%20Send%20Money/Screenshot%202023-11-23%20063405.png?updatedAt=1700739253715",
        }}
        style={{ width: 55, height: 55 }}
      />
      <TouchableOpacity onPress={pickImage}>
        <Text
          style={{
            fontWeight: 600,
            padding: 5,
            backgroundColor: "#0001",
          }}
        >
          Upload Image
        </Text>
      </TouchableOpacity>
    </View>
  </SafeAreaView>
);

    });

    if (!result.canceled) {
      setImage(result.assets[0].uri);
    }
  };
  
  const handleUpdatePersonalInformation = () => {
    const formData = new FormData();
    const filePath = image.split("file:/").join("");
    formData.append("profilePicture", {
      uri: filePath,
      type: "image/jpeg",
      name: "profile-picture.jpg",
    });

    fetch(
      `YOUR SERVER URL`,
      {
        method: "PATCH",
        body: formData,
      }
    )
      .then((res) => Toast("Uploaded Image to ImageKit!"))
      .catch((err) => console.log(err));
  };
  
  return <SafeAreaView style={styles.container}>
    <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
            <Image
              source={{
                uri: image
                  ? image
                  : "https://ik.imagekit.io/13x54r/I%20Send%20Money/Screenshot%202023-11-23%20063405.png?updatedAt=1700739253715",
              }}
              style={{ width: 55, height: 55 }}
            />
            <TouchableOpacity onPress={pickImage}>
              <Text
                style={{
                  fontWeight: 600,
                  padding: 5,
                  backgroundColor: "#0001",
                }}
              >
                Upload Image
              </Text>
            </TouchableOpacity>
          </View>
  </SafeAreaView>