reactjsでファイルをサーバーにアップロードしたい

Question

実現したいこと

reactjsを使用しファイルをファイルサーバーに送信/保存したい。

前提

以下の”該当のソースコード”はreactjsのクラスコンポーネントで書かれたファイルをクライアント側からファイルサーバーに送信するファイルアップロード用の記述です。サーバー側にある受取用の記述を経由してファイルサーバーに送信されます。実際に想定通りに動作しております。

質問させて頂きたいことは以下のクラスコンポーネントで書かれた記述を関数コンポーネント用の記述に書き換えたのですが、以下のエラーがコンソールで表示されます。送信したファイルが空だということだと思うのですが、サーバー側にある受取用の記述はクラスコンポーネントも関数コンポーネント同じですので、関数コンポーネント用の記述に問題があると思われます。関数コンポーネント用の記述をどの様に変更すれば宜しいかご教授頂けませんでしょうか？

発生している問題・エラーメッセージ

end() expects parameter 1 to be array, null given in 

Undefined variable: file_tmp

該当のソースコード

クラスコンポーネント用の記述

import React from 'react'
import axios from 'axios';
 
class FileUpload extends React.Component{
 
    constructor(){
        super();
        this.state = {
            selectedFile:'',
        } 
        this.handleInputChange = this.handleInputChange.bind(this);
    }
 
    handleInputChange(event) {
        this.setState({selectedFile: event.target.files[0],})
    }
 
    submit(){
        const data = new FormData() 
        data.append('file', this.state.selectedFile)
        console.warn(this.state.selectedFile);
        let url = "https://xxxxx/x/xxxxx/";
 
        axios.post(url, data, { 
        })
        .then(res => {
            console.warn(res);
        })
 
    }
 
    render(){
        return(
            <div>                                  
<input type="file" name="upload_file" onChange={this.handleInputChange} />
<button type="submit" onClick={()=>this.submit()}>Save</button>                  
            </div>
        )  
    }
}
 
export default FileUpload;

試したこと

関数コンポーネント用に書き換えた記述

import React, { useState } from 'react'
import axios from 'axios';

function FileUpload () {
	
const [selectedFile, setSelectedFile] = useState('');

const handleInputChange = event => {
    setSelectedFile(selectedFile);
  }

const submit = () => {

const data = new FormData()

data.append("file", selectedFile);
console.warn(selectedFile);
let url = "https://xxxxxx/x/xxxxx/";
 
        axios.post(url, data, { 
           headers: {
          'content-type': 'multipart/form-data',
           }
        })
        .then(res => {
            console.warn(res);
        })
}

    return(
            <div>                                  
<input type="file" name="upload_file" onChange={handleInputChange} />
<button type="submit" onClick={()=>submit()}>Save</button>                  
            </div>
        );  
                
    }  
    
export default FileUpload;  

補足情報（FW/ツールのバージョンなど）

axios@1.3.1
react-dom@18.2.0
react-scripts@5.0.1
react@18.2.0

Answer 1

const handleInputChange = event => {
    setSelectedFile(selectedFile);
  }

eventの値を使っていません。

Comments

[jud]

maisumakun様、ご教授感謝いたします。申し訳ございません。具体的にどの様な記述をすればよろしいでしょうか？

[maisumakun]

クラスコンポーネントのhandleInputChangeを移植してください。

[jud]

maisumakun様、
お忙しい中お時間頂きまして感謝致します。
const handleInputChange = event => {
setSelectedFile(event.target.files[0]);
}