A. Fileupload.jsx
import Navbar from "@/Layouts/Navbar"; import { Head, Link, router } from "@inertiajs/react"; import React from "react"; import { useState, useRef } from 'react' function Fileupload(props) { const thumbnail = useRef(null); const {id, file, errors} = props; const [values, setValues] = useState({ id : '1', file : '', }) function handleChange(e) { const key = e.target.id; const value = e.target.value setValues(values => ({ ...values, [key]: value, })) } function handleSubmit(e) { e.preventDefault() const formData = new FormData(); formData.append('file', thumbnail.current.files[0]); router.post("file_upload", formData) } return ( <div> <Navbar /> <form onSubmit={handleSubmit}><br/><br/> <label htmlFor="file">Upload File:</label> <input ref={thumbnail} type="file" className="form-control" id="file" value={values.file} onChange={handleChange} /><br/> {errors.file && <small>{errors.file}</small>} <br/> <buttontype="submit"className="btn btn-primary" >Update</button> </form> </div> ) } export default Fileupload;
B. web.php
Route::post('/file_upload', [HomeController::class, 'file_upload'])->name('file_upload');
C. HomeController.php
public function file_upload(Request $req){ $this->validate($req, [ 'file' => ['required'], ]); $incorporate_document = $req->file('file'); // your base64 encoded $incorporate_document_name = time().'_pk.'.$req->file('file')->getClientOriginalExtension(); $incorporate_document_file_store = $req->file('file')->move(public_path('userimages'), $incorporate_document_name); $imageurl_corporate_url = URL::to('/userimages/')."/".$incorporate_document_name; DB::table('fileupload')->insert([ 'file_path' => $imageurl_corporate_url ]); return redirect('create'); }