Document picker or image uploader is not working in react native windows for desktop application

Question

import React, { useState } from 'react'; import { View, Text, StyleSheet, TextInput, TouchableOpacity, ScrollView } from 'react-native'; //import * as DocumentPicker from 'expo-document-picker';

const CustomPopup = ({ visible, onClose, onSubmit }) => { const [formData, setFormData] = useState({ vendorCode: '', contactNumber: '', email: '', ordersPerDay: '', alreadyTieUp: '', gst: '', packingCharges: '', menuFile: null, queryCallback: false, });

const handleInputChange = (field, value) => {
    setFormData({ ...formData, [field]: value });
};

const handleFilePick = async () => {
    let result = await DocumentPicker.getDocumentAsync({});
    if (result.type === 'success') {
        setFormData({ ...formData, menuFile: result });
    }
};

if (!visible) {
    return null;
}

return (
    <View style={styles.overlay}>
        <View style={styles.popup}>
            <ScrollView contentContainerStyle={styles.scrollViewContent}>
                <Text style={styles.popupTitle}>Are you sure you want to activate Zomato?</Text>

                <Text>Already tie up with Zomato?</Text>
                <View style={styles.radioContainer}>
                    <View style={[styles.radioOptionContainer , styles.radiofirst]}>
                        <TouchableOpacity
                            style={[styles.radioOption, formData.alreadyTieUp === 'Yes' && styles.radioOptionSelected]}
                            onPress={() => handleInputChange('alreadyTieUp', 'Yes')}>
                            {formData.alreadyTieUp === 'Yes' && <View style={styles.radioInnerCircle} />}
                        </TouchableOpacity>
                        <Text style={styles.radioText}>Yes</Text>
                    </View>
                    <View style={styles.radioOptionContainer}>
                        <TouchableOpacity
                            style={[styles.radioOption, formData.alreadyTieUp === 'No' && styles.radioOptionSelected]}
                            onPress={() => handleInputChange('alreadyTieUp', 'No')}>
                            {formData.alreadyTieUp === 'No' && <View style={styles.radioInnerCircle} />}
                        </TouchableOpacity>
                        <Text style={styles.radioText}>No</Text>
                    </View>
                </View>

                <Text>Vendor Code <Text style={styles.required}>*</Text></Text>
                <TextInput
                    placeholder="Vendor Code"
                    style={styles.input}
                    onChangeText={(value) => handleInputChange('vendorCode', value)}
                    value={formData.vendorCode}
                />

                <Text>Reachable Contact No. <Text style={styles.required}>*</Text></Text>
                <TextInput
                    placeholder="Reachable Contact No."
                    style={styles.input}
                    onChangeText={(value) => handleInputChange('contactNumber', value)}
                    value={formData.contactNumber}
                />

                <Text>Reachable Email ID <Text style={styles.required}>*</Text></Text>
                <TextInput
                    placeholder="Reachable Email ID"
                    style={styles.input}
                    onChangeText={(value) => handleInputChange('email', value)}
                    value={formData.email}
                />

                <Text>Number of Orders Per Day (Approx.)</Text>
                <TextInput
                    placeholder="Number of Orders Per Day (Approx.)"
                    style={styles.input}
                    onChangeText={(value) => handleInputChange('ordersPerDay', value)}
                    value={formData.ordersPerDay}
                />

                <Text>Number of Orders Restaurant Receiving from Zomato</Text>
                <TextInput
                    placeholder="100"
                    style={styles.input}
                    onChangeText={(value) => handleInputChange('ordersFromZomato', value)}
                    value={formData.ordersFromZomato}
                />

                <Text>Do you charge GST on your Zomato menu?</Text>
                <View style={styles.radioContainer}>
                    <View style={[styles.radioOptionContainer , styles.radiofirst]}>
                        <TouchableOpacity
                            style={[styles.radioOption, formData.gst === 'Yes' && styles.radioOptionSelected]}
                            onPress={() => handleInputChange('gst', 'Yes')}>
                            {formData.gst === 'Yes' && <View style={styles.radioInnerCircle} />}
                        </TouchableOpacity>
                        <Text style={styles.radioText}>Yes</Text>
                    </View>
                    <View style={styles.radioOptionContainer}>
                        <TouchableOpacity
                            style={[styles.radioOption, formData.gst === 'No' && styles.radioOptionSelected]}
                            onPress={() => handleInputChange('gst', 'No')}>
                            {formData.gst === 'No' && <View style={styles.radioInnerCircle} />}
                        </TouchableOpacity>
                        <Text style={styles.radioText}>No</Text>
                    </View>
                </View>

                <Text>Do you have packing charges applied on your Zomato menu?</Text>
                <View style={styles.radioContainer}>
                    <View style={[styles.radioOptionContainer , styles.radiofirst]}>
                        <TouchableOpacity
                            style={[
                                styles.radioOption,
                                formData.packingCharges === 'Yes' && styles.radioOptionSelected,
                            ]}
                            onPress={() => handleInputChange('packingCharges', 'Yes')}>
                            {formData.packingCharges === 'Yes' && <View style={styles.radioInnerCircle} />}
                        </TouchableOpacity>
                        <Text style={styles.radioText}>Yes</Text>
                    </View>
                    <View style={styles.radioOptionContainer}>
                        <TouchableOpacity
                            style={[
                                styles.radioOption,
                                formData.packingCharges === 'No' && styles.radioOptionSelected,
                            ]}
                            onPress={() => handleInputChange('packingCharges', 'No')}>
                            {formData.packingCharges === 'No' && <View style={styles.radioInnerCircle} />}
                        </TouchableOpacity>
                        <Text style={styles.radioText}>No</Text>
                    </View>
                </View>

                <Text>Upload the menu to be used for Zomato integration.</Text>
                <TouchableOpacity style={styles.fileUploadButton} onPress={handleFilePick}>
                    <Text style={styles.fileUploadButtonText}>
                        {formData.menuFile ? formData.menuFile.name : 'Choose File'}
                    </Text>
                </TouchableOpacity>

                <Text>Have queries? Request for a call back.</Text>
                <View style={styles.checkboxContainer}>
                    <TouchableOpacity
                        style={[
                            styles.checkbox,
                            formData.queryCallback && styles.checkboxSelected,
                        ]}
                        onPress={() => handleInputChange('queryCallback', !formData.queryCallback)}>
                        {formData.queryCallback && <View style={styles.checkboxInnerSquare} />}
                    </TouchableOpacity>
                    <Text style={styles.checkboxText}>Request for a call back</Text>
                </View>

                
            </ScrollView>
            <View style={styles.buttonContainer}>
                <TouchableOpacity style={[styles.button, styles.buttoncanel]} onPress={onClose}>
                    <Text style={styles.buttonText}>Cancel</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.button} onPress={() => onSubmit(formData)}>
                    <Text style={styles.buttonText}>Submit</Text>
                </TouchableOpacity>
            </View>
        </View>
    </View>
);

};

const styles = StyleSheet.create({ overlay: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0, 0, 0, 0.5)', }, popup: { width: '80%', maxHeight: '80%', backgroundColor: '#fff', borderRadius: 10, }, scrollViewContent: { flexGrow: 1, padding: 30, }, popupTitle: { fontSize: 18, fontWeight: 'bold', marginBottom: 15, }, input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 5, padding: 10, marginTop: 10, marginBottom:15 }, required: { color: 'red', }, radioContainer: { flexDirection: 'row', marginTop:10, marginBottom:15

},
radiofirst:{
    marginRight:20
},
radioOptionContainer: {
    flexDirection: 'row',
    alignItems: 'center',
},
radioOption: {
    width: 24,
    height: 24,
    borderWidth: 2,
    borderColor: '#ccc',
    borderRadius: 12,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 10,
},
radioOptionSelected: {
    borderColor: '#00c0ff',
},
radioInnerCircle: {
    width: 12,
    height: 12,
    borderRadius: 6,
    backgroundColor: '#00c0ff',
},
radioText: {
    fontSize: 16,
},
fileUploadButton: {
    padding: 10,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 5,
    alignItems: 'center',
    marginBottom: 15,
    marginTop:10
},
fileUploadButtonText: {
    color: '#000',
},
checkboxContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 15,
    marginTop:10
},
checkbox: {
    width: 24,
    height: 24,
    borderWidth: 2,
    borderColor: '#ccc',
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 10,
},
checkboxSelected: {
    borderColor: '#00c0ff',
},
checkboxInnerSquare: {
    width: 12,
    height: 12,
    backgroundColor: '#00c0ff',
},
checkboxText: {
    fontSize: 16,
},
buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    backgroundColor:'#fff',
    padding:20,
    
    borderTopWidth: 1,
    borderTopColor: '#ccc',
},
button: {
  
    paddingVertical: 10,
    paddingHorizontal:30,
    borderRadius: 5,
    backgroundColor: '#00c0ff',
    alignItems: 'center',
    marginHorizontal: 5,
},
buttoncanel:{
    backgroundColor:'red'
},
buttonText: {
    color: '#fff',
    fontWeight: 'bold',
},
footer: {
    marginTop: 20,
    alignItems: 'center',
},
footerText: {
    fontSize: 16,
    color: '#000',
},

});

export default CustomPopup;

 <TouchableOpacity style={styles.fileUploadButton} onPress={handleFilePick}>
                    <Text style={styles.fileUploadButtonText}>
                        {formData.menuFile ? formData.menuFile.name : 'Choose File'}
                    </Text>
                </TouchableOpacity>