投稿機能
"use client";
import { useState } from "react";
import { supabase } from "@/lib/supabaseClient";
const Post = () => {
const [title, setTitle] = useState("");
const [content, setContent] = useState("");
const [image, setImage] = useState(null);
const handleSubmit = async (e) => {
e.preventDefault();
try {
// 画像をSupabase Storageにアップロード
const { data, error } = await supabase.storage
.from("test")
.upload(`images/${image.name}`, image);
// 記事をSupabaseに追加
const { data: postData, error: postError } = await supabase
.from("posts")
.insert([{ title, content }]);
if (postError) {
throw postError;
}
// 成功したらフォームをリセット
setTitle("");
setContent("");
setImage(null);
} catch (error) {
console.error("Error adding post:", error.message);
}
};
return (
<div>
<h1>New Post</h1>
<form onSubmit={handleSubmit}>
<label>
Title:
<input
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
</label>
<label>
Content:
<textarea
value={content}
onChange={(e) => setContent(e.target.value)}
/>
</label>
<label>
Image:
<input type="file" onChange={(e) => setImage(e.target.files[0])} />
</label>
<button type="submit">Submit</button>
</form>
</div>
);
};
export default Post;
- supabase では文字情報をdatabase , 画像を storageで保存する
- handleSubmit関数で一度に、画像は upload / title , contentはinsert でdatabaseに保存
← Go home