handleSubmit() function i am sending data in application/json and multiform/data to backend but none data in student_image: null
Published: 2023-10-08 17:49:16


I have to handle application/json and multiform/data, student_image: fileState, where fileState is e.target.file[0] value which is the image and other field are just application/json will store but this fileState need multiform/data even after changing also my image is not stored in a database. how to send data to api as my api accepts a list object. please help me other ideas to store images along with other field values in models.py in DRF because i have alomost spend 8 hours no resolution so far.

const handleSubmit = () => {
        let dataToSend = {};
      
        if (Array.isArray(formData)) {
          // Handle array data
          dataToSend = formData.map((formFields, index) => ({
        //     // Map the fields accordingly for each object in the array
        //     // Adjust this based on your data structure
            sn: formFields.sn,
            student_image: fileState,
            
           
            // Add other fields as needed
          }));
          
        } else if (typeof formData === 'object') {
            // dataToSend = [formData]
          // Handle object data
          dataToSend = [{
            // Map the fields accordingly for the object
            // Adjust this based on your data structure
            nepali: formData.nepali,
            international: formData.international,
            graduate_school_or_campus: formData.Campus,
            student_image: fileState,
            first_name: formData.first_name,
            middle_name: formData.middle_name,
            last_name: formData.last_name,
            email: formData.email,
            contact_no: formData.contact_no,
            gender: formData.gender,
            blood_group: formData.blood_group,
            ethnicity: formData.ethnicity,
            religion: formData.religion,
            date_of_birth_bs: formData.date_of_birth_bs,
            date_of_birth_ad: formData.date_of_birth_ad,
            batch: formData.batch,
            disability_status: formData.disability_status,
            sponsorship_status: formData.sponsorship_status,
            rural_district: formData.rural_district,
            martyr_lineage: formData.martyr_lineage,
            // citizenship_no: citizenship_no,
            // citizenship_image: formData.citizenship_image,
            school: formData.school,
            level: formData.level,
            program: formData.program,
            semester: formData.semester,
            status: formData.status,
            // 
            father_name: formData.father_name,
            mother_name: formData.mother_name,
            father_phone: formData.father_phone,
            mother_phone: formData.mother_phone,
            father_email: formData.father_email,
            mother_email: formData.mother_email,
            father_profession: formData.father_profession,
            mother_profession: formData.mother_profession,
            emergency_contact_name: formData.emergency_contact_name,
            emergency_contact_phone: formData.emergency_contact_phone,
            address: formData.address,
            relation_with_student: formData.relation_with_student,
            permanent_province: formData.permanent_province,
            permanent_district: formData.permanent_district,
            permanent_palika: formData.permanent_palika,
            permanent_ward_no: formData.permanent_ward_no,
            permanent_street_name: formData.permanent_street_name,
            permanent_house_no: formData.permanent_house_no,
            present_province: formData.present_province,
            present_district: formData.present_district,
            present_palika: formData.present_palika,
            present_ward_no: formData.present_ward_no,
            present_street_name: formData.present_street_name,
            present_house_no: formData.present_house_no,
            remarks: formData.remarks,
            education_history: formData.nestedForms,
            awardsMeritsScholarship: formData.nestedForms2

            // Add other fields as needed
        }];
        
    }
      
        console.log('this is actual data', dataToSend);
        console.log('Type of dataToSend:', typeof dataToSend);
        // Now you can send a POST request with dataToSend to your APIw
        // For example using Axios or fetch
        // Replace 'YOUR_API_URL' with the actual API endpoint
        // Replace 'YOUR_ACCESS_TOKEN' with any authorization token you might need
        console.log("this is final data to sent", dataToSend)
        fetch(`${URL}`, {
          method: 'POST',
          headers: {
            // 'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW', // Adjust the content type
            'Content-Type': 'application/json', // Adjust the content type
           'Authorization': `Bearer${Ttoken.access}`
          },
          body: JSON.stringify(dataToSend),
        })
          .then(response => response.json())
          .then(data => {
            console.log('Response from API:', data);
            // Additional logic after receiving a response from the API
          })
          .catch(error => {
            console.error('Error:', error);
            // Handle errors from the API call
          });
      };