97 lines
3.3 KiB
TypeScript
97 lines
3.3 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { View, TouchableOpacity, Image, Text, ScrollView } 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;
|
|
images: string[];
|
|
}
|
|
|
|
export const ImagePickerComponent = ({ onImageSelected, images }: Props) => {
|
|
const pickImage = async () => {
|
|
if (images.length >= 5) {
|
|
alert('Maximum 5 images allowed');
|
|
return;
|
|
}
|
|
|
|
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: ['images'],
|
|
allowsEditing: true,
|
|
aspect: [4, 3],
|
|
quality: 1,
|
|
});
|
|
|
|
if (!result.canceled) {
|
|
try {
|
|
const response = await fetch(result.assets[0].uri);
|
|
const blob = await response.blob();
|
|
|
|
const imageUrl = await uploadImage({
|
|
uri: result.assets[0].uri,
|
|
type: 'image/jpeg',
|
|
name: 'image.jpg',
|
|
size: blob.size
|
|
});
|
|
onImageSelected([...images, imageUrl]);
|
|
} catch (error) {
|
|
console.error('Error uploading image:', error);
|
|
alert('Failed to upload image');
|
|
}
|
|
}
|
|
};
|
|
|
|
const removeImage = (index: number) => {
|
|
const newImages = [...images];
|
|
newImages.splice(index, 1);
|
|
onImageSelected(newImages);
|
|
};
|
|
|
|
return (
|
|
<View>
|
|
<ScrollView
|
|
horizontal
|
|
showsHorizontalScrollIndicator={false}
|
|
className="mb-4"
|
|
>
|
|
{images.map((image, index) => (
|
|
<View key={index} className="relative mr-2">
|
|
<Image
|
|
source={{ uri: image }}
|
|
className="w-24 h-24 rounded-lg"
|
|
/>
|
|
<TouchableOpacity
|
|
onPress={() => removeImage(index)}
|
|
className="absolute -top-2 -right-2 bg-red-500 rounded-full p-1"
|
|
>
|
|
<Text className="text-white text-xs">✕</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
))}
|
|
</ScrollView>
|
|
|
|
{images.length < 5 && (
|
|
<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"
|
|
/>
|
|
<Text className="text-gray-500">
|
|
Upload Image ({images.length}/5)
|
|
</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|