Image uploading working on emulator, but not on real device in React-Native

Viewed 301

Backend is Laravel and Firebase, frontend is React Native. I tried to upload image to server on app, it is working well on emulator, but on real device. Actually on real device when I click the upload button, the image saves to the MySQL DB correctly, but it doesn't navigate to the next page and I can't get any response. (On emulator, all works fine.)

Following is my uploading code.(react-native)

import { url } from "../config/config";
const link = "/personal_info";

export default class Personal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: "",
            national_id: "",
            email: "",
            country: "US",
            address: "",
            company: "",
            job_title: "CEO",
            user_id: "",
            front_image: {},
            back_image: {},
            front_image_upload: '',
            back_image_upload: '',
        };
    }

    SavePersonal = () => {
        var myobj = this;
        var apiUrl = url + link;
        console.log("api is ", apiUrl);
        fetch(apiUrl, {
            method: "post",
            body: JSON.stringify(this.state),
            headers: {
                "Accept": "application/json",
                "Content-Type": "application/json",
            },
        }).then(function (response) {
            console.log('response->', response);              //--- I can't get this response.
            response.json().then(function (resp) {
                console.log('resp->', resp);                  //--- I can't get this resp.
                if (resp == 0) {                              //--- But image saves well in MySQL DB.
                    Alert.alert(
                        "Something Went Wrong",
                        "Please Make Sure You Fill All Fields."
                    );
                } else if (resp == 1) {
                    console.log('success->', resp);
                    myobj.props.navigation.push("Work");
                }
            });
        }).catch((error) => {
            console.log('personal_info_error', error);
        })
    };

    render() {
        return (
            .......   ........   ........
            <View style={{ ...styles.margin_btm, marginTop: 20 }}>
                <Button
                    onPress={() => {
                        this.SavePersonal();
                    }}
                    mode="contained"
                >
                    Continue
                </Button>
            </View>
        )
    }
}

That is Laravel backend code.

<?php

namespace App\Http\Controllers;

use App\Personal;
use Illuminate\Http\Request;

class PersonalController extends Controller
{
    function personal_info(Request $request)
    {
        $img = $request->front_image_upload;
        // $img = explode(',', $request->front_image_upload);
        $file = base64_decode($img);
        $folderName = 'public/uploads/';
        $safeName = uniqid().'.'.'png';
        $destinationPath = public_path() . $folderName;
        $success = file_put_contents(public_path().'/uploads/'.$safeName, $file);
        $front_img = 'uploads/'.$safeName;

        $img2 = $request->back_image_upload;
        // $img2 = explode(',', $request->back_image_upload);
        $file2 = base64_decode($img2);
        $folderName2 = 'public/uploads/';
        $safeName2 = uniqid().'.'.'png';
        $destinationPath2 = public_path() . $folderName2;
        $success = file_put_contents(public_path().'/uploads/'.$safeName2, $file2);
        $back_img = 'uploads/'.$safeName2;
        
        $personal = new Personal;
        $personal->user_id = $request->user_id;
        $personal->name = $request->name;
        $personal->address = $request->address;
        $personal->company = $request->company;
        $personal->country = $request->country;
        $personal->email = $request->email;
        $personal->job_title = $request->job_title;
        $personal->national_id = $request->national_id;
        $personal->front_img = $front_img;
        $personal->back_img = $back_img;

        $personal->save();

        if($personal)
        {
            $code = 1;
        }
        else
        {
            $code = 0;            
        }
        return $code;
    }
}
2 Answers

Try this. You have a problem with the .then().then().catch() grammar.

 SavePersonal = () => {
    // var myobj = this;
    var apiUrl = url + link;
    console.log("api is ", apiUrl);
    fetch(apiUrl, {
      method: "post",
      body: JSON.stringify(this.state),
      headers: {
        "Accept": "application/json",
        "Content-Type": "application/json",
      },
    })
      .then((response) => response.json())
      .then((resp) => {
        console.log('---', resp);
        if (resp == 0) {
          Alert.alert(
            "Something Went Wrong",
            "Please Make Sure You Fill All Fields."
          );
        } else if (resp == 1) {
          console.log('success = ', resp);
          this.props.navigation.push("Work");
        }
      })
      .catch((error) => {
        console.log('personal_info_error', error);
      })
  };

you can try to pass the url in another way, instead of:

import {url} from "../config/config" 

use

import {url} from "/ config / config"
Related