This code is properly working on mobile expo go app and it able to upload file and form data to server using expo image picker but the same code not working on react native web
const CompleteRegisterScreen = ({ navigation,route }) => {
const { id } = route.params; // Access the id from the route params
useEffect(()=>{
if(!id){
navigation.navigate("College Login")
}
})
const states = [
'Andhra Pradesh',
'Arunachal Pradesh',
';.....]
const [state,setState]=useState('');
const [description,setDescription]=useState('');
const [city,setCity]=useState('');
const [mobile,setMobile]=useState('')
const [logo,setLogo]=useState(null)
const pickImage= async ()=>{
let result=await ImagePicker.launchImageLibraryAsync({
mediaTypes:ImagePicker.MediaTypeOptions.Images,
allowsEditing:true,
aspect:[4,3],
quality:1,
})
console.log(result)
if (!result.canceled) {
setLogo(result.assets[0].uri);
}
}
console.log(logo)
const handleSubmit =()=>{
const formData = new FormData();
formData.append('state', state);
formData.append('description', description);
formData.append('city', city);
formData.append('mobile', mobile);
formData.append('logo', { uri: logo, name: 'logo.jpg', type: 'image/jpeg' });
fetch(`${API}/college/details/${id}`, {
method: 'POST',
body: formData,
})
.then((response) => response.json())
.then((result) => {
console.log(JSON.stringify(result));
navigation.navigate('College Login');
})
.catch((error) => {
console.error("here"+error);
});
}
return (
<View style={styles.subcontainer}>
<Text style={styles.text}>Complete Your Registration</Text>
<SelectDropdown
data={states}
onSelect={(selectedItem, index) => {
setState(selectedItem);
}}
buttonTextAfterSelection={(selectedItem, index) => {
return selectedItem
}}
rowTextForSelection={(item, index) => {
return item
}}
defaultButtonText="Select State"
style={{marginBottom:5,backgroundColor:'#37fae6'}}
/>
<View style={{padding:10}}></View>
<SelectDropdown
data={getDistrictsByState(state)}
onSelect={(selectedItem, index) => {
setCity(selectedItem);
}}
buttonTextAfterSelection={(selectedItem, index) => {
return selectedItem
}}
rowTextForSelection={(item, index) => {
return item
}}
defaultButtonText="Select City"
style={{marginBottom:5,backgroundColor:'#37fae6'}}
/>
<View style={{padding:10}}></View>
<TextInput
placeholder="Describe your college"
style={styles.txtinput}
value={description}
onChangeText={setDescription}
/>
{/*<TextInput
placeholder="Enter city"
style={styles.txtinput}
value={city}
onChangeText={setCity}
/>*/}
<TextInput
placeholder="Enter Mobile No."
style={styles.txtinput}
value={mobile}
onChangeText={setMobile}
/>
<Button title="Upload Logo" onPress={()=>pickImage()} color="#37fae6"/>
<View style={{height:7}}></View>
{logo && <Image source={{uri:logo}} style={{ width: 200, height: 200 }}/>}
<TouchableOpacity style={styles.btn} onPress={()=>{
handleSubmit()
}}>
<Text style={styles.btntxt}>Register</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => navigation.navigate('College Login')}>
<Text style={styles.atext}>Login here</Text>
</TouchableOpacity>
</View>
);
};
I have tried to use Platform specific code using input tag and onchange method to upload the image file but not working. The code should be able to work on all platforms