remix, axios file upload sample

axios.ts

import Axios from 'axios'
import Config from '../../config';

//console.log(Config.API_URL);
const axios = Axios.create({
    baseURL: Config.API_URL,
    headers: {
        'X-Requested-With': 'XMLHttpRequest',
    },
    withCredentials: true,
})
 
export default axios

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