return axios.post() not working in react js with lumen

Question

I want to Post data with matrix, color, and source (upload file) to an API with lumen laravel. here my code

generateMotif(data, token) {
        var path = `motif`;

        var formData = new FormData();

        formData.append("matrix", data.matrix);
        formData.append("color", data.color);
        formData.append("source", data.file);

        return axios.post(`${API_URL}/${path}`, formData, {
            headers: {
              'Content-Type': 'multipart/form-data',
              token: token,
            },
            params: {
                token: token,
            },
        })
        .catch((error) => {
            if (error.response) {
                return Promise.reject({
                    message: error.response.data.error,
                    code: error.response.status
                });
            } else if (error.request) {
              // The request was made but no response was received
              // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
              // http.ClientRequest in node.js
              // The request was made but no response was received
              console.log(error.request);
              throw error;
            } else {
              // Something happened in setting up the request that triggered an Error
              console.log('Error', error.message);
            //   console.log(error.response.data);
              throw error;
            }
        });
    },

here my API controller code

public function generateMotif(Request $request)
    {
        $all_ext = implode(',', $this->image_ext);

        $this->validate($request, [
            'matrix' => 'required',
            'color' => 'required',
            'source' => 'required|file|mimes:' . $all_ext . '|max:' . $this->max_size,
        ]);

        $model = new UserMotif();

        $file = $request->file('source');

        $store = Storage::put('public/upload', $file);
        dd($store);   

        $client = new Client;

        
        try {
            $response = $client->request('POST', 'http://localhost:9000/motif', [
                'multipart' => [
                    [
                        'name'     => 'matrix',
                        'contents' => $request->input('matrix'),
                        'headers'  => [ 'Content-Type' => 'multipart/form-data']
                    ],
                    [
                        'name'     => 'color',
                        'contents' => $request->input('color'),
                        'headers'  => [ 'Content-Type' => 'multipart/form-data']
                    ],
                    [
                        'name'     => 'img_file',
                        // 'contents' => fopen(storage_path('app/' . $store), 'r'),
                        'contents' => $request->file('source'),
                        'filename' => $file->getClientOriginalName(),
                        'headers'  => [ 'Content-Type' => 'multipart/form-data']
                    ],
                ]
            ]);        

            $images = $data->getBody()->getContents();

            $filePath = '/public/' . $this->getUserDir();
            $fileName = time().'.jpeg';

            if ($result = Storage::put($filePath . '/' . $fileName, $images)) {
                $generated =  $model::create([
                    'name' => $fileName,
                    'file_path' => $filePath,
                    'type' => 'motif',
                    'customer_id' => Auth::id()
                ]);

                return response()->json($generated);
            }
            
        } catch (RequestException $e) {
            echo $e->getRequest() . "
";
            if ($e->hasResponse()) {
                echo $e->getResponse() . "
";
            }

            return response($e->getResponse());
        }

        return response()->json(false);
   }

There are no errors in my controller because I'm not found any error or issues when compiling the code. Response in my controller terminal is 200.

The results that I want from this code are an image. Because in this API, it will process an image and give new image response. But when I'm posting an image, the results are scripts like this.

{data: "↵", status: 200, statusText: "OK", headers: {…}, config: {…}, …}

I don't know what's wrong in my code, but you have any suggestion for my code, please help me. Any suggestions will be very helpful to me.

return axios.post() not working in react js with lumen

0 Answers