🦁

axiosで画像アップロード、Remix版

2021/12/12に公開

Laravel

Node.js

Remix

tech

概要:

axiosでファイルアップロードで、
前のRemix + Laravel 構成になります。

構成

remix : 1.0.6
Laravel 8
axios
axios設定は、 Remix + Laravelの記事と同様になります

参考のぺージ

アップロード

app/routes/test/file.tsx

file型にファイルをセットすると転送

file.tsx


import { useEffect, useRef, useState } from "react";
import type { MetaFunction, LoaderFunction } from "remix";
import { useLoaderData, Link } from "remix";
import { Form, json, useActionData, redirect } from "remix";
import axios from '~/lib/axios'

export let meta: MetaFunction = () => {
  return {
    title: "test",
    description: "Welcome to remix!"
  };
};

export default function Page() {
//  const [items, setItems] = useState([]);
  const upload = function(){
    var params = new FormData();
    const files = document.querySelector<HTMLInputElement>('#file1').files;
    const fileObject = files[0]; 
    if (typeof fileObject === "undefined") {
      console.error("none, fileObject");
      return;
    }
    params.append('file1', fileObject);
    axios.post("/api/file/upload", params).then(function(response) {
      // 成功時
      console.log("OK, file");
    })
    .catch(function(error) {
      // エラー時
      console.error(error);
    });
  }
  useEffect(() => {
    document.getElementById("file1").addEventListener("change", function() {
      console.log("#change");
      upload();
    });  
  },[]);
  return (
    <div className="remix__page">
      <main>
        <h2>File , Test 222</h2>
        <hr />
        file : <br />
        <input type="file" name="file1" id="file1" />
      </main>
      {/*
        <hr />
        <button onClick={() => onClick()}>Test</button>
      */}
    </div>
  );
}

laravelは、下記

app/Http/Controllers/api/ApiFileController.php

ApiFileController.php

    public function upload(Request $request){
        $ret = true;
        $datetime = (String)strtotime("now");
        $temporary_file = $request->file('file1')->store('files_tmp');
        $origiinal_name = $request->file('file1')->getClientOriginalName();
    //var_dump( "temporary_file=". $temporary_file );
        $filename = $datetime . "_" . $origiinal_name;
        $storage_path = storage_path('app/') . $temporary_file;
        Storage::copy($temporary_file , 'files/' . $filename );
        Storage::delete($temporary_file );
        $arr = [
            'ret' => 'OK',
            'filename' => $filename,
        ];
        return response()->json($arr);
    }

....

概要:

構成

参考のぺージ

アップロード

Discussion