Why form submit not working on react native web?

73 views Asked by At

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

0

There are 0 answers