Laravel Inertia js file upload

Laravel Inertia js file upload

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');
    }


Leave a Reply