CODEWITHSUNDEEP
reactjslaravelfile-uploadform-data
moussa
moussa

Reputation: 21

How to store an image with React and Laravel using two components?

I'm building a sign-up form using React and Laravel, and I want to allow users to upload a profile picture. I have two components, one for the sign-up form and another for the home component. I'm using the following code to upload the image in the sign-up component

<form enctype="multipart/form-data">
<input   name="profile_image" placeholder="Profil Picture" type='file' onChange={handleFileChange}/>
</form>

code in home component

 const [image, setImage] = useState(null);

    function handleFileChange(event) {
      setImage(event.target.files[0]);
     
    }
    const formData = new FormData();
    formData.append('image', image);

    const signup = ev => {
     
      ev.preventDefault()
      const payload = {
        Name: nameRef.current.value,
        Email: emailRef.current.value,
        password: passwordRef.current.value,
        password_confirmation: password_confirmation.current.value,
        ville_id:ville_ref.current.value,
        profil_picture:formData
        
      }
      console.log(payload);
      AxiosClients.post('/signup', [payload,formData])
      .then(({data}) => {
        
        setcurrentUser(data.user);
        Settoken(data.token);
      })
      
      .catch((err) => {
         const response = err.response;
        if (response && response.status === 422) {
            Seterrors(response.data.errors);
        }
        // console.log(Erors.Name);
       
      })
    
    }
   
    
  const login=(e)=>{
     e.preventDefault();
     const payload={
        email:Emailref.current.value,
        password:PassRef.current.value
     }

     AxiosClients.post('/login', payload)
     .then(({data}) => {
    //    setcurrentUser(data.user);
        //   console.log(data.token);
          Settoken(data.token);        
     })
     
     .catch((err) => {
        const response = err.response;
       if (response && response.status === 422) {
        console.log(response);
        setMessage(response.data.message);
       }
       // console.log(Erors.Name);
      
     })


  }

controller

$path = $request->file('image')->store('public/images');

/** @var \App\Models\User $student */
$user = User::create([
    'name' => $data['Name'],
    'email' => $data['Email'],
    'ville_id'=>$data['ville_id'],
    'profil'=>$data['profil'],
    'password' => bcrypt($data['password']),
    'profil_picture'=>$path,
]);

However, when I try to store the image, I get store a null value. Can someone help me figure out what I'm doing wrong? Thanks in advance!

Upvotes: 0

Views: 137

Answers (1)

MrEduar
MrEduar

Reputation: 1931

It seems that the issue might be related to the way you are appending the formData to the payload. In your signup function, you are creating a new FormData instance and appending the image state to it. However, you are then passing both the payload and formData as an array to the AxiosClients.post method. This might be causing an issue with how the data is being sent to the server.

To fix this, you can append the formData directly to the payload object, like this:

const payload = new FormData();
payload.append('Name', nameRef.current.value);
payload.append('Email', emailRef.current.value);
payload.append('password', passwordRef.current.value);
payload.append('password_confirmation', password_confirmation.current.value);
payload.append('ville_id', ville_ref.current.value);
payload.append('profil_picture', image);

Before making this change, check it in the Controller by doing a dd($request->file('image')) to verify a before and after.

Upvotes: 0

Related Questions