Erreur lors de l'envoie de POST en json React native Express Mongo DB avec version sdk 51 expo go

Questions Dev
1

Bonjour a tous je travaille sur une app mobile qui prend en photo des contrat et les envoie a la Base de données avec egalement plus tard une mise en place d’un appele d’api librairie/IA qui va scanner l’image et recuperer le texte de l’image et envoiyer ce contenu aussi en BDD donc voila pour le contexte.Mon Post fonctionner bien il y a quelque jour mais j’ai mis a jour le SDK de expo go et depuis la maniere de faire a changer j’essaye de mis adapter mais maintenant lors de la prise de photo j’ai une erreur [SyntaxError: JSON Parse error: Unexpected character: <].Je pense que j’ai mal mis en place la nouvelle maniere de faire si quelqu’un peut me donnez le code svp je suis vraiment perdu.Voici la doc Camera - Expo Documentation et mon code.J’ai egalement des probleme mineur aussi mais pas prioritaire qui sont arriver depuis cette Mise a jour c’est que lors de la prise de photo l’ecran avant devient blanc pendant 1 sec cela ne peut etre le flash car je prend la photo avec la camera arriere.Ceci est front end de la page scan:

import React, { useState, useEffect, useRef } from 'react';
import { Button, Text, View, StyleSheet, Image } from 'react-native';
import { CameraView, useCameraPermissions } from 'expo-camera';
import { useNavigation } from '@react-navigation/native';

export default function Scan() {
  const navigation = useNavigation();
  const [permission, requestPermission] = useCameraPermissions();
  const [photoUri, setPhotoUri] = useState(null);
  const cameraRef = useRef(null);

  useEffect(() => {
    if (permission && permission.granted) {
      // Vous pouvez effectuer des actions supplémentaires ici après l'obtention de l'autorisation
    }
  }, [permission]);

  const handleTakePhoto = async () => {
    if (cameraRef.current) {
      const photo = await cameraRef.current.takePictureAsync({ base64: true });
      console.log('Photo prise:', photo.uri);
      setPhotoUri(photo.uri);
      uploadPhoto(photo.uri);
    }
  };

  const handleScanAgain = () => {
    setPhotoUri(null);
  };

  const uploadPhoto = async (uri) => {
    const formData = new FormData();
    formData.append('uri', uri);
    formData.append('photo', {
      uri: uri,
      type: 'image/jpg',
      name: 'photo.jpg',
    });
    formData.append('imageUrl', uri);
    formData.append('date', new Date().toISOString());

    try {
      const response = await fetch('http://192.168.1.106:3000/api/send-contract', {
        method: 'POST',
        body: formData,
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });
      const data = await response.json();
      console.log('Réponse de l\'API:', data);
    } catch (error) {
      console.error('Erreur lors de l\'envoi de la photo:', error);
    }
  };

  if (!permission) {
    return <View />;
  }

  if (!permission.granted) {
    return (
      <View style={styles.container}>
        <Text style={{ textAlign: 'center' }}>We need your permission to show the camera</Text>
        <Button onPress={requestPermission} title="Grant Permission" />
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}> {'Ramasse'.toUpperCase()} </Text>
      <Text style={styles.subtitle}> {'Blue Project'.toUpperCase()} </Text>
      <CameraView
        ref={cameraRef}
        style={styles.camera}
        type={'back'} 
        flashMode={'off'}
      />
      <Button
        title='Prendre une photo'
        onPress={handleTakePhoto}
        color='#7ed957'
      />
      {photoUri && (
        <View style={styles.photoPreview}>
          <Image source={{ uri: photoUri }} style={styles.previewImage} />
        </View>
      )}
      {photoUri && (
        <View style={styles.buttonNouveau}>
          <Button title="Nouveau Qr code" onPress={handleScanAgain} color="#7ed957" />
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#0389eb',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 80,
    color: '#80dc54',
  },
  subtitle: {
    fontSize: 40,
    color: '#629AE5',
    marginBottom:50,
  },
  boutonRetour: {
    marginBottom:50,
  },
  camera: {
    marginBottom:50,
    width: '60%',
    height: '40%',
  },
  text: {
    fontSize: 20,
    color: 'white',
    marginTop: 20,
  },
  photoPreview: {
    alignItems: 'center',
    marginTop: 20,
  },
  previewImage: {
    width: 150,
    height: 150,
    resizeMode: 'contain',
  },
});

Et voici le tratement de la requete au back :

const ConnectDB = require('./connectionDB');
const app = express();
const contractController = require('./controller/contractController');

// Middleware pour analyser le corps des requêtes entrantes au format JSON
app.use(express.json());

// Middleware pour gérer les CORS
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content, Accept, Content-Type, Authorization');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');
  next();
});

// Monter le contrôleur des contrats sous le préfixe /api
app.use('/api', contractController);

// Connexion à la base de données
ConnectDB();

module.exports = app;
ainsi que mon model: const mongoose = require('mongoose');

//Definition du model a utulilser plusieur fois a chaque foi 
const ContractSchema = mongoose.Schema({
    //title:{ type: String, required: true },

    //description:{ type: String, required: false },
    uri:{ type: String, required: true },
    imageUrl:{ type: String, required: true },
    date:{ type: Date, required: true }, 
   //vraie image image:{ type: String, required: true }, 
    //userId:{ type: String, required: true },
  
    
    
});

module.exports = mongoose.model('Contract', ContractSchema); 
//1 er argument = nom du model , 2 eme = nom du schema

Et mon app.js racine :

import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { View, StyleSheet } from 'react-native';
import Home from './screens/Home';
import Start from './screens/Start';
import Loading from './screens/Loading';
import Scan from './screens/Scan';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#0389eb',
  },
});

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <View style={styles.container}>

      <NavigationContainer>

        <Stack.Navigator initialRouteName="Home" screenOptions={{headerShown: false}} > 
            <Stack.Screen name="Home" component={Home} />
            <Stack.Screen name="Start" component={Start} />
            <Stack.Screen name="Loading" component={Loading} />
            <Stack.Screen name="Scan" component={Scan} />
        </Stack.Navigator>

      </NavigationContainer>
      <StatusBar style="auto" />

    </View>
  );
}```