You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React Native函数式组件表单上传报错:Cannot call a class as a function

Issue Description

I'm trying to upload a form containing a file. I've successfully used DocumentPicker to select the file and convert it to a Blob, but when sending the form to the backend, I get a Cannot call a class as a function error. I need help figuring out what's causing this issue.

File Selection Code

const selectFile = async () => {
    // Opening Document Picker to select one file
    try {
      const res = await DocumentPicker.pickSingle({
        type: [DocumentPicker.types.allFiles],
  
      });
      console.log('res simple', res);
      console.log('res : ' + JSON.stringify(res));
     //fetch uri from the response
      const fileUri = res.uri;
      console.log('res : ' + fileUri);
      setSingleFile(res);
   
     
      // handleAcceptedFiles(res);
    } catch (err) {
      setSingleFile(null);
      if (DocumentPicker.isCancel(err)) {
        ToastAndroid.show('Canceled', ToastAndroid.SHORT);

      } else {

        alert('Unknown Error: ' + JSON.stringify(err));
        throw err;
      }
    }
  };

Blob Generation Code

useEffect(() => {
    if (singleFile != null) {
      getData();
    }
  }, [singleFile]);

 
    const getData = async () => {
      console.log("inside getData")
      // console.log("singleFile",singleFile)
      console.log("singlefile",singleFile.uri)
       await fetch(singleFile.uri)
        .then((response)=> {
          
          console.log("response",response.blob())
          // response.blob()
        
          setBlob(response.blob())
        }
          )
        .catch(err=>{
                console.log(err);
            });
    }

Upload Trigger Function (Error Location)

const uploadData = async () => {

    if (singleFile != null) {
      const fileToUpload = singleFile;
      console.log("blob",blob)
      const data = new FormData();
      data.append('Attachment',blob);
      data.append(
        "Address",
        address
      );
      data.append(
        "CNIC",
        CNIC
      );
      data.append(
        "Phone_Number",
        number
      );
      data.append(
        "Status",
        "Pending Response"
      );
      data.append(
        "Description",
        description
      );
      data.append(
        "Appointment_id", 'b082564a-67f0-4f3d-96d7-1a441e071ef4'
      );
      data.append(
        "Patient_id", email
      );
      data.append(
        "Amount", '4200'
      );

      console.log("data",data)
      Alert("data",data)

      let res = await axios.post(
        `${url}/Finance/requestFA` , data,
        {
          headers: {
            Authorization: `Bearer ${user.refresh_token}`
        }
      }
      
      );
      console.log("res in upload",res)
      let responseJson = res.data
      if (responseJson.status == 1) {
        alert('Upload Successful');
      }
    } else {
      // If no file selected the show alert
      alert('Please Select File first');
    }
  };

Content sourced from Stack Exchange, question author: Alishbah Riaz

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.10 11:05:22