0

I wrote an API in laravel and I'm trying to make a registration with accepting a photo and other parameters in React. But I had a problem, most likely because of the photo, when I try to register (I click on the button), I get an Axios 500 error, although the data is all accepted.

Register.js `

const navigate = useNavigate();
  const {http, setToken} = AuthUser();


  const registration = (e) => {
    e.preventDefault();
    // console.log(name, email, phone, photo, password, passwordConfirmation);
    console.log(photo);

    http.post('/register', {name:name, email:email,phone:phone, photo:photo, password:password, password_confirmation:passwordConfirmation})
      .then((response) => {
        console.log(response.data.message, response.data.user, response.data.token);  
        navigate('/login');
      })
  }

`

AuthUser.js

import axios from "axios";
import { useState } from 'react';
import { useNavigate } from "react-router-dom";

export default function AuthUser() {
  const navigate = useNavigate();

  const getToken = () => {
    const tokenString  = sessionStorage.getItem('token');
    const userToken = JSON.parse(tokenString);
    return userToken;
  }

  const getUser = () => {
    const userString  = sessionStorage.getItem('user');
    const user_detail = JSON.parse(userString);
    return user_detail;
  }


  const [token, setToken] = useState(getToken());
  const [user, setUser] = useState(getUser());

  const saveToken = (user,token)  => {
    sessionStorage.setItem('token', JSON.stringify(token));
    sessionStorage.setItem('user', JSON.stringify(user));

    setToken(token);
    setUser(user);
    navigate('/');
  }

  const logout = () => {
    sessionStorage.clear();
    navigate('/login');
  }

  const http = axios.create({
    baseURL: "http://127.0.0.1:8000/api",
    headers: {
      "Content-Type": "application/json",
      // "Content-Type": "application/vnd.api+json",
      "Authorization": `Bearer ${token}`,
    }
  });
  return {
    setToken:saveToken,
    token,
    user,
    getToken,
    http,
    logout
  }
}

LARAVEL AuthController.php

 public function register(RegisterRequest $request) {
        $request->validated($request->all());

        $image = $request->photo;
        $imageName = Str::random(32).'.'.$request->photo->getClientOriginalExtension();

        $user = User::create([
            'name' => $request->name,
            'email' => $request->email,
            'phone'=>$request->phone,
            'photo' => $imageName,
            'location' => '',
            'bio' => '',
            'password' => Hash::make($request->password),
        ]);

        $path = public_path('upload/users');

        $image -> move($path, $imageName);
        return response([
            'message' => 'User has been created',
            'user' => new UserResource($user),
            'token' => $user->createToken($user->name)->plainTextToken
        ]);
    }

Tried to replace "Content-Type": "application/json" with "Content-Type": "application/vnd.api+json", didn't help; I tried to check through *Postman *that everything works; input without a picture, about the same code also works.

Adfegecy
  • 13
  • 3
  • 1
    I checked my axios code to upload files. I've added the header `'Content-Type': 'multipart/form-data'` – Techno Nov 01 '22 at 15:01
  • Maybe check https://stackoverflow.com/questions/43013858/how-to-post-a-file-from-a-form-with-axios I think this is where I got my working example from – Techno Nov 01 '22 at 15:04
  • if it return 500 then error should be recorded at laravel error log. Just check it – Nipun Tharuksha Nov 01 '22 at 15:28
  • @Techno more thanks for coment but i replaced this "Content-Type": "application/json", with this 'Content-Type': 'multipart/form-data' , but the error remains, laravel logs are not written; I tried to redo it as in the article, but it still occurs. Is it normal when I display the file path, then I have some kind of incomplete one, or is it supposed to be like that? "C:\fakepath\kisukeUrahra.gif"? – Adfegecy Nov 01 '22 at 16:35
  • error not showing in console – Adfegecy Nov 01 '22 at 16:36

0 Answers0