How to handle image and file uploads in ReactJS with Laravel's storage system



Image not found!!

Handling image and file uploads in a ReactJS frontend with Laravel's storage system on the backend involves a combination of both frontend and backend code. Below are the steps you can follow:

Backend (Laravel)

  1. Setup Laravel Storage: Ensure your Laravel project has storage configured properly. You might need to create a symbolic link from public/storage to storage/app/public. You can do this by running:

    bash
    php artisan storage:link

  2. Configure File Upload in Controller: In your Laravel controller, handle the file upload. Laravel uses the store method to handle file uploads.

    php
    // Inside your controller method
$path = $request->file('file')->store('public/uploaded_files');

  3. Return the Path: Return the path of the uploaded file from your controller to the React frontend.

    php
    return response()->json(['path' => $path]);

Frontend (React)

  1. Create File Input Component: Create a React component for file input. This can be a simple form with an input field of type file.

    jsx
    // FileUploadComponent.jsx
import React, { useState } from 'react';

const FileUploadComponent = ({ onFileUpload }) => {
  const [file, setFile] = useState(null);

  const handleFileChange = (e) => {
    setFile(e.target.files[0]);
  };

  const handleUpload = () => {
    const formData = new FormData();
    formData.append('file', file);

    // Make an API call to upload the file
    fetch('/api/upload', {
      method: 'POST',
      body: formData,
    })
      .then((response) => response.json())
      .then((data) => {
        onFileUpload(data.path);
      })
      .catch((error) => console.error('Error uploading file:', error));
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleUpload}>Upload</button>
    </div>
  );
};

export default FileUploadComponent;

  2. Use the File Upload Component: Integrate the FileUploadComponent in your main React component.

    jsx
    // Your main React component
import React from 'react';
import FileUploadComponent from './FileUploadComponent';

const MainComponent = () => {
  const handleFileUpload = (path) => {
    // Handle the uploaded file path (e.g., save it in state)
    console.log('File uploaded:', path);
  };

  return (
    <div>
      {/* Other components */}
      <FileUploadComponent onFileUpload={handleFileUpload} />
    </div>
  );
};

export default MainComponent;

Make sure to adapt the code according to your specific requirements and project structure. Additionally, consider adding validation, error handling, and security measures as needed for your application.

Category List