63 lines
2.1 KiB
TypeScript
63 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import { View, TouchableOpacity, Image, Text } from 'react-native';
|
|
import * as ImagePicker from 'expo-image-picker';
|
|
import { uploadImage } from '@/lib/appwrite';
|
|
import icons from '@/constants/icons';
|
|
|
|
interface Props {
|
|
onImageSelected: (url: string) => void;
|
|
multiple?: boolean;
|
|
}
|
|
|
|
export const ImagePickerComponent = ({ onImageSelected, multiple = false }: Props) => {
|
|
const pickImage = async () => {
|
|
const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
|
|
|
|
if (status !== 'granted') {
|
|
alert('Sorry, we need camera roll permissions to make this work!');
|
|
return;
|
|
}
|
|
|
|
const result = await ImagePicker.launchImageLibraryAsync({
|
|
mediaTypes: ImagePicker.MediaTypeOptions.Images,
|
|
allowsEditing: true,
|
|
aspect: [4, 3],
|
|
quality: 1,
|
|
allowsMultipleSelection: multiple,
|
|
});
|
|
|
|
if (!result.canceled) {
|
|
try {
|
|
// Convert image to blob
|
|
const response = await fetch(result.assets[0].uri);
|
|
const blob = await response.blob();
|
|
|
|
// Upload to Appwrite
|
|
const imageUrl = await uploadImage({
|
|
uri: result.assets[0].uri,
|
|
type: 'image/jpeg',
|
|
name: 'image.jpg',
|
|
size: blob.size
|
|
});
|
|
onImageSelected(imageUrl);
|
|
} catch (error) {
|
|
console.error('Error uploading image:', error);
|
|
alert('Failed to upload image');
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
onPress={pickImage}
|
|
className="flex items-center justify-center border-2 border-dashed border-gray-300 rounded-lg p-4"
|
|
>
|
|
<Image
|
|
source={icons.dumbell}
|
|
className="w-8 h-8 mb-2"
|
|
/>
|
|
{/* change dumbell to camera */}
|
|
<Text className="text-gray-500">Upload Image</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|