react native pdf upload
import React, { useState } from 'react';
import { View, Text, Button, Image, TouchableOpacity, StyleSheet } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import * as DocumentPicker from 'expo-document-picker';
export default function FileUploadScreen() {
const [files, setFiles] = useState([]);
const pickImage = async () => {
const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
quality: 1,
});
if (!result.canceled) {
setFiles((prevFiles) => [...prevFiles, { uri: result.assets[0].uri, type: 'image' }]);
}
};
const pickPDF = async () => {
const result = await DocumentPicker.getDocumentAsync({
type: 'application/pdf',
});
if (result.type === 'success') {
setFiles((prevFiles) => [...prevFiles, { uri: result.uri, name: result.name, type: 'pdf' }]);
}
};
const deleteFile = (uri) => {
setFiles((prevFiles) => prevFiles.filter((file) => file.uri !== uri));
};
return (
<View style={styles.container}>
<Button title="Pick an Image" onPress={pickImage} />
<Button title="Pick a PDF" onPress={pickPDF} />
<View style={styles.filesContainer}>
{files.map((file, index) => (
<View key={index} style={styles.fileContainer}>
{file.type === 'image' ? (
<Image source={{ uri: file.uri }} style={styles.image} />
) : (
<Text style={styles.pdfName}>{file.name || 'PDF File'}</Text>
)}
<TouchableOpacity
style={styles.deleteButton}
onPress={() => deleteFile(file.uri)}
>
<Text style={styles.deleteText}>Delete</Text>
</TouchableOpacity>
</View>
))}
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
backgroundColor: '#fff',
},
filesContainer: {
marginTop: 20,
},
fileContainer: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 10,
},
image: {
width: 50,
height: 50,
marginRight: 10,
},
pdfName: {
flex: 1,
fontSize: 16,
},
deleteButton: {
backgroundColor: 'red',
padding: 5,
borderRadius: 5,
},
deleteText: {
color: 'white',
fontWeight: 'bold',
},
});
Comments
Post a Comment