ESLint - "file" is not defined. となるエラー。

Question

下記のコードをnpm startをすると。

ERROR in [eslint]
src\imageuploader.js
Line 10:33: 'file' is not defined no-undef

となります。

import React from "react";
import { ref, uploadBytes } from "firebase/storage";
import storage from "./firebaseConfig";

const ImageUploader = () => {
    const formHandler = (e) => {
        e.preventDefault();
        const storageRef = ref(storage, "cristal.jpg");

        uploadBytes(storageRef, file).then((snapshot) => {
            console.log('Upload a blog or file!');
        })
    }
    return (
        <div className="flex justify-center">
            <form className="border-2 border-rose-500" onSubmit={formHandler}>
                ファイルを選択
                <input type="file" />
                <button className="m-20" type="submit">Upload</button>
            </form>
        </div>
    );
};

export default ImageUploader;

よろしくお願いします。

Answer 1

エラーメッセージのとおりです。どこでも定義されていないfileという変数を使っています。