FastAPIでCSVファイルを読み込んでWordPressで表示する

前回は、FastAPIを使って、ファイルをアップロードする方法を紹介しました。

前回まではFast APIの基本的な使い方やWordPressからアクセスについてみていきました。今回は、CSVファイルのアップロードに対応したFastAPIを作ってみたいと思います。環境の準備 FastAPIとuvicornは既にイン...

今回は、このAPIのreturnをWordpressで表示したいと思います。
また、表示までには、ロード画面が表示されるようにしてみたいと思います。

固定ページテンプレート

固定ページテンプレートを作成して、以下のようなコードを記述します。

<?php
/*
Template Name: API File Upload Template
*/
get_header();
?>

<h2>Upload Files</h2>
<input type="file" id="File" accept=".csv"><br><br>
<button onclick="uploadFiles()">Upload</button>

<h3> Results:</h3>
<pre id="Results"></pre>

<!-- Loading message display area -->
<div id="loadingMessage" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.7); color: white; padding: 20px; border-radius: 10px; z-index: 1000;">Loading... Please wait while the server starts up and processes your request.</div>

<script>
async function uploadFiles() {
    const File = document.getElementById('File').files[0];

    if (!File) {
        alert("Please upload file");
        return;
    }

    // Show loading message
    document.getElementById('loadingMessage').style.display = 'block';
    document.getElementById('Results').textContent = '';  // Clear previous results

    const formData = new FormData();
    formData.append('file', File);


    try {
        const response = await fetch('http://localhost:8000/upload_csv', {
            method: 'POST',
            body: formData
        });

        const data = await response.json();

        // Hide loading message
        document.getElementById('loadingMessage').style.display = 'none';
        document.getElementById('Results').textContent = JSON.stringify(data.data_preview, null, 2);
    } catch (error) {
        console.error('Error:', error);
        document.getElementById('loadingMessage').style.display = 'none';
        document.getElementById('Results').textContent = 'Error: ' + error.message;
    }
}

</script>

<?php
get_footer();
?>

'http://localhost:8000/upload_csv'の部分はAPIのURLに変更してください。

これを実行するとResult部分にCSVファイルの内容が表示されます。