## laravel react Img upload

## react component

import { useState } from "react";
import { useForm } from "react-hook-form";
import { useDispatch } from "react-redux";
import { createNewPage } from "../../store/edition/edition.action";

export default function PageCreationForm({ setShow }) {
  const { register, handleSubmit } = useForm({
    shouldUseNativeValidation: true,
  });
  const dispatch = useDispatch();
  const [loading, setLoading] = useState(false);
  const onSubmit = async (data, e) => {
    console.log(data);
    const params = {
      inputFile: data.inputFile,
      name: data.inputFile[0].name.split(".")[0],
      smallPreview : true ,
      largePreview : true , 
    };
    console.log({params});
    

    setLoading(true);
    // @ts-ignore
    dispatch(createNewPage(params)).then((res) => {
      setLoading(false);
      e.target.reset();
      setShow(false);
    });
  };

  return (
    <div>
      <form action="" onSubmit={handleSubmit(onSubmit)}>
        <label htmlFor="">Select image</label>
        <br />
        <input
          style={{ marginTop: "10px", marginBottom: "20px" }}
          type="file"
          multiple
          {...register("inputFile", { required: "select a file " }) }
        />
        <br />
        <button
          disabled={loading}
          style={{
            width: "107px",
            height: "30px",
            background: "lightblue",
            borderRadius: "5px",
            border: "0",
          }}
          type="submit"
        >
          {loading ? "creating..." : "create"}
        </button>
      </form>
    </div>
  );
}

## action file

export const createNewPage = (rawData) => async (dispatch, getState) => {
  console.log({ rawData });
  // console.log(data.inputFile[0])
  // console.log(data.inputFile[1])
  // console.log(data.inputFile.length)
  for (let i = 0; i < rawData.inputFile.length; i++) {
    const id = toast.loading(`Uploading file ${rawData.inputFile[i].name}...`);
    //do something else

    // upload page
    const data = {
      inputFile: [rawData.inputFile[i]],
      name: rawData.inputFile[i].name,
      smallPreview: rawData.smallPreview,
      largePreview: rawData.largePreview,
    };
    const uploadFileRequest = await FileUploadApi.upload(data);
    console.log({ uploadFileRequest });
    if (!uploadFileRequest.success) {
      // alert(`failed to upload file`);
      toast.update(id, {
        render: "Upload Failed",
        type: "error",
        isLoading: false,
        autoClose: 1000,
      });
      return 
    }
    toast.update(id, {
      render: "File Uploaded",
      type: "success",
      isLoading: false,
      autoClose: 1000,
    });
    // store in edition
    const newPageParams = {
      id: getId(),
      name: data.name,
      imgFileName: uploadFileRequest.data.name,
      previewImgFileName: uploadFileRequest.data.name,
      smallPreview: uploadFileRequest.data.smallPreview,
      largePreview: uploadFileRequest.data.largePreview,
      areaMaps: [],
    };
    console.log(newPageParams);
    const currentEdition = getState().editionReducer.currentEdition;
    currentEdition.previewPages = [
      ...currentEdition.previewPages,
      newPageParams,
    ];
    // update edition in db
    const editionUpdateParams = {
      ...currentEdition,
    };
    console.log({ editionUpdateParams });
    const editionUpdateRequest = await EditionApi.updateEdition(
      editionUpdateParams
    );
    console.log({ editionUpdateRequest });
    if (!editionUpdateRequest.success) {
      alert(` edition update failed `);
    }

    // toast("Wow so easy!")
    dispatch({
      type: editionActionType.SET_CURRENT_EDITION,
      payload: editionUpdateParams,
    });
  }
};

## api file

import axios from "axios";
import { apiBasePath } from "../lib/api.path";
import {  toast } from 'react-toastify';
export const upload = async (data) => {
  try {
    console.log(data.inputFile);
    var formData = new FormData();
    formData.append("file", data.inputFile[0]);
    // @ts-ignore
    formData.append("smallPreview", data.smallPreview || false);
    // @ts-ignore
    formData.append("largePreview", data.largePreview || false);
    console.log({ formData });
    const response = await axios.post(
      `${apiBasePath}/upload-file`,
      formData,
      {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }
    );
    console.log(response.data);
    return {
      success: true,
      data: {
        ...response.data,
      },
    };
  } catch (error) {
    console.log(` --- there was an error while uploading the file ---`);
    console.log(error);
    return {
      success: false,
      data: null,
    };
  }
};



export default {
  upload,

};

# Laravel Controller

<?php

namespace App\Http\Controllers\Epaper;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Str;
use Intervention\Image\Facades\Image;

class FileUploadController extends Controller
{
    public function upload(Request $request)
    {
        if (!$request->hasFile('file')) {
            return response()->json(['upload_file_not_found'], 400);
        }

        // if (!$request->has('uploadFolder')) {
        //     return response()->json(['upload_folder_not_found'], 400);
        // }
        $uploadPath = 'public/' . $request->uploadFolder;
        // $tempUploadPath = 'storage/app/public/' . $request->uploadFolder; // for live c panel 
        $tempUploadPath = 'storage/' . $request->uploadFolder;
        $file = $request->file('file');
        $extension = $file->getClientOriginalExtension();
        $name = Str::uuid()->toString() . '.' . $extension;
        $smallPreview = Str::uuid()->toString() . '.' . $extension;
        $largePreview = Str::uuid()->toString() . '.' . $extension;
        // $path = $file->storeAs($uploadPath, $name);
        $tempPath = $tempUploadPath . '/' . $name;
        // return [$tempPath,$path] ;
        // $filePath = $uploadPath .'/'. $name ;

        Image::make($request->file('file'))->save($tempPath, 90);
        if ($request->largePreview == 'true') {
            Image::make($request->file('file'))->save($tempUploadPath . '/' . $largePreview, 20);
        }
        if ($request->smallPreview == 'true') {
            Image::make($request->file('file'))->save($tempUploadPath . '/' . $smallPreview, 5);
        }

        // return $img ;

        return response()->json([
            'name' => $name,
            'smallPreview' => $request->smallPreview  == 'true' ? $smallPreview : '',
            'largePreview' => $request->largePreview == 'true' ? $largePreview : '',
            'path' => $tempPath,
            'uploadPath' => $request->uploadFolder,
            'hasLargePreview' => $request->largePreview,
            'hasSmallPreview' => $request->smallPreview
        ], 200);
    }

    public function getBase(Request $request)
    {
        // return "ok" ;
        // getBase
        $path = $request->get('path');
        $type = pathinfo($path, PATHINFO_EXTENSION);
        $data = file_get_contents($path);
        $base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);
        // return $base64 ;
        return response()->json(['data' => strval($base64)], 200);
    }
}