Backend using Laravel

The backend part of the project is done using laravel.

Install steps

• php composer.phar install installs the different packages required
• php artisan migrate --seed creates and add data in the database
• php artisan serve runs the application

Upload files on the server

If you want to upload a file in the server. Use the following piece of code in a react component

import logo from './logo.svg';
import axios from "axios";
import {useState} from 'react';

import './App.css';

function App() {
const UPLOAD_ENDPOINT = "http://127.0.0.1:8000/api/test";
  const [file, setFile] = useState(null);
  const [name, setName] = useState("");
  const [status, setStatus] = useState("");

  const handleSubmit = async (event) => {
    setStatus(""); // Reset status
    event.preventDefault();
    const formData = new FormData();
    formData.append("avatar", file); // The file to upload
    formData.append("name", name);   // The other field

        const resp = await axios.post(UPLOAD_ENDPOINT, formData, {
      headers: {
          "content-type": "multipart/form-data",
      },
	});
    setStatus(resp.status === 200 ? "Thank you!" : "Error."); //You can make a redirection here...
  };

    if(status)
	return 
OK

  return (
    

      
React File Upload
       setFile(e.target.files[0])} />
       setName(e.target.value)} value={name} />
      
        Upload File
      

    
  );}

export default App;


export default postWithFile;
    

Then, in the laravel application, treat the form as usual.

    
    function store(Request $request) {
        $request->validate([
            'avatar' => 'file|required', // And mime type for instance
            'name' => 'required'
        ]);

        $f = $request->file('avatar')->hashName();
        $request->file('avatar')->move("upload", $f); // The file is now in public_html/uploads

        // Insert the result in the database. Remember that the path to the image is uploads/$f
    }