نحوه آپلود تصاویر در یک سطل ذخیره سازی Supabase از یک برنامه Next.js

تصاویر خود را با استفاده از این سرویس شخص ثالث و حداقل کد مشتری ذخیره کنید.

معمولاً ذخیره تصاویر در پایگاه داده توصیه نمی شود. انجام این کار به دلیل مقدار ذخیره سازی و قدرت پردازش مورد نیاز می تواند به سرعت گران شود. استفاده از یک سرویس ذخیره سازی مقرون به صرفه و مقیاس پذیر مانند ذخیره سازی Supabase بهتر است.

در زیر نحوه آپلود تصاویر در یک سطل ذخیره سازی با استفاده از کتابخانه مشتری جاوا اسکریپت Supabase و نحوه ارائه تصاویر در برنامه Next.js را خواهید آموخت.

ایجاد پروژه Supabase

اگر قبلاً برنامه Next.js آماده ندارید، راهنمای رسمی شروع Next.js را برای ایجاد برنامه خود دنبال کنید.

پس از انجام این کار، این مراحل را برای ایجاد یک پایگاه داده Supabase دنبال کنید:

1. به وب سایت Supabase بروید و یک حساب کاربری جدید ایجاد کنید. اگر قبلاً یک حساب کاربری دارید، وارد شوید.
2. از داشبورد Supabase، روی دکمه Create a new project کلیک کنید.
3. به پروژه خود یک نام بدهید و روی دکمه ایجاد پروژه کلیک کنید. هنگامی که Supabase پروژه را ایجاد کرد، شما را به داشبورد پروژه هدایت می کند

پس از ایجاد پروژه، یک سطل ذخیره سازی ایجاد کنید.

ایجاد یک سطل ذخیره سازی Supabase

یک سطل ذخیره سازی به شما امکان می دهد فایل های رسانه ای مانند تصاویر و فیلم ها را ذخیره کنید. در Supabase، می توانید یک سطل ذخیره سازی روی داشبورد ایجاد کنید یا از کتابخانه مشتری استفاده کنید.

برای استفاده از داشبورد، مراحل زیر را دنبال کنید:

1. به صفحه ذخیره سازی Supabase در داشبورد بروید.
2. روی New Bucket کلیک کنید و یک نام برای سطل وارد کنید. از آنجایی که تصاویر را در آن ذخیره خواهید کرد، می توانید نام آن را تصاویر بگذارید.
3. روی Create Bucket کلیک کنید.

در مرحله بعد، یک مشتری Supabase را برای تعامل با سطل در برنامه خود راه اندازی خواهید کرد.

راه اندازی مشتری Supabase

با نصب کتابخانه مشتری supabase-js از طریق ترمینال شروع کنید:

npm install @supabase/supabase-js

سپس یک پوشه جدید به نام lib در ریشه برنامه خود یا در صورت استفاده از آن در پوشه src ایجاد کنید. در این پوشه، یک فایل جدید به نام supabase.js اضافه کنید و از کد زیر برای مقداردهی اولیه مشتری Supabase استفاده کنید.

import { createClient } from '@supabase/supabase-js'

export const supabase = createClient('<project_url>', '<your-anon-key>')

URL پروژه و کلید anon را با جزئیات خود جایگزین کنید که می توانید در تنظیمات پروژه Supabase پیدا کنید. می توانید جزئیات را در فایل .env کپی کنید و از آنجا به آنها ارجاع دهید.

SUPABASE_PROJECT_URL="your_project_url"
SUPABASE_PROJECT_ANON_KEY="your_project_anon_key"

اکنون در supabase.js باید داشته باشید:

export const supabase = createClient(
  process.env.SUPABASE_PROJECT_URL,
  process.env.SUPABASE_ANON_KEY
);

پس از انجام این کار، فرمی ایجاد کنید که تصاویر را بپذیرد.

ایجاد فرمی که تصاویر را می پذیرد

در داخل پوشه برنامه Next.js برنامه خود، یک زیرپوشه به نام upload ایجاد کنید و یک فایل جدید به نام page.js اضافه کنید. این یک صفحه جدید در مسیر آپلود / ایجاد می کند. اگر از Next.js 12 استفاده می کنید، upload.js را در پوشه pages ایجاد کنید.

در صفحه آپلود، کد زیر را برای ایجاد فرم اضافه کنید.

"use client";
import { useState } from "react";

export default function Page() {
  const [file, setfile] = useState([]);

  const handleSubmit = async (e) => {
    e.preventDefault();
    // upload image
  };

  const handleFileSelected = (e) => {
    setfile(e.target.files[0]);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="file" name="image" onChange={handleFileSelected} />
      <button type="submit">Upload image</button>
    </form>
  );
}

هنگامی که یک فایل را انتخاب می کنید و روی دکمه ارسال کلیک می کنید، فرم باید تابع handleSubmit را فراخوانی کند. در این تابع است که شما تصویر را آپلود خواهید کرد.

برای فرم‌های بزرگ با چندین فیلد، استفاده از یک کتابخانه فرمی مانند فرمیک برای رسیدگی به اعتبارسنجی و ارسال آسان‌تر است.

آپلود یک فایل تصویری در یک سطل ذخیره سازی Supabase

در تابع handleSubmit، از مشتری Supabase برای آپلود تصویر با افزودن کد زیر استفاده کنید.

const handleSubmit = async (e) => {
    e.preventDefault();
    const filename = `${uuidv4()}-${file.name}`;

    const { data, error } = await supabase.storage
      .from("images")
      .upload(filename, file, {
        cacheControl: "3600",
        upsert: false,
      });

    const filepath = data.path;
    // save filepath in database
  };

در این تابع، شما در حال ایجاد یک نام فایل منحصر به فرد با به هم پیوستن نام فایل و یک UUID تولید شده توسط بسته uuid npm هستید. این کار برای جلوگیری از بازنویسی فایل هایی که هم نام دارند توصیه می شود.

شما باید بسته uuid را از طریق npm نصب کنید، بنابراین دستور زیر را در ترمینال کپی و اجرا کنید.

npm install uuid

سپس در بالای صفحه آپلود، نسخه 4 uuid را وارد کنید.

import { v4 as uuidv4 } from "uuid";

اگر نمی‌خواهید از بسته uuid استفاده کنید، روش‌های دیگری وجود دارد که می‌توانید برای ایجاد شناسه‌های منحصربه‌فرد استفاده کنید.

سپس، از مشتری supabase برای آپلود فایل در سطل ذخیره سازی به نام “تصاویر” استفاده کنید. به یاد داشته باشید که مشتری supabase را در بالای فایل خود وارد کنید.

import { supabase } from "@/lib/supabase";

توجه داشته باشید که شما در حال عبور از مسیر تصویر و خود تصویر هستید. این مسیر مانند سیستم فایل عمل می کند. به عنوان مثال، اگر تصویر را در پوشه ای در سطلی به نام public ذخیره می کردید، مسیر را به عنوان “/public/filename” مشخص می کنید.

Supabase یک شی حاوی داده و شی خطا را برمی گرداند. شی داده حاوی URL تصویری است که به تازگی آپلود کرده اید.

برای اینکه این تابع آپلود کار کند، باید یک خط مشی دسترسی ایجاد کنید که به برنامه شما اجازه می دهد تا با دنبال کردن این مراحل، داده ها را در یک سطل ذخیره سازی Supabase وارد کرده و بخواند:

1. در داشبورد پروژه خود، روی تب Storage در نوار کناری سمت چپ کلیک کنید.
2. سطل ذخیره سازی خود را انتخاب کنید و روی زبانه Access کلیک کنید.
3. در بخش سیاست های سطل، روی دکمه سیاست جدید کلیک کنید.
4. برای ایجاد یک خط مشی از ابتدا گزینه For full customization را انتخاب کنید.
5. در گفتگوی افزودن خط مشی، نامی برای خط مشی خود وارد کنید (مثلاً «اجازه درج و خواندن»).
6. مجوزهای INSERT و SELECT را از منوی کشویی Allowed Operations انتخاب کنید.
7. برای بررسی خط‌مشی‌ها روی دکمه بازبینی کلیک کنید.
8. برای افزودن سیاست روی دکمه ذخیره کلیک کنید.

اکنون باید بتوانید تصاویر را بدون ایجاد خطای دسترسی آپلود کنید.

ارائه تصاویر آپلود شده در برنامه شما

برای ارائه تصویر در سایت خود، به یک URL عمومی نیاز دارید که می توانید آن را به دو روش مختلف بازیابی کنید.

شما می توانید از مشتری Supabase به صورت زیر استفاده کنید:

const filepath = "path_to_file_in_buckey"

const { data } = supabase
  .storage
  .from('images')
  .getPublicUrl(`${filepath}`)

یا می‌توانید URL سطل را به صورت دستی با مسیر فایل مرتبط کنید:

const filepath = `${bucket_url}/${filepath}`

از هر روشی که ترجیح می دهید استفاده کنید. هنگامی که مسیر فایل را پیدا کردید، می توانید از آن در کامپوننت تصویر Next.js مانند زیر استفاده کنید:

<Image src={filepath} alt="" width={200} height={200}/>

این کد تصویر را در سایت شما نمایش می دهد.

ایجاد برنامه های کاربردی قوی با Supabase

با استفاده از این کد، می توانید یک فایل را از طریق یک فرم از یک کاربر بپذیرید و آن را در ذخیره سازی Supabase آپلود کنید. سپس می توانید آن تصویر را بازیابی کرده و در سایت خود قرار دهید.

علاوه بر ذخیره تصاویر، Supabase قابلیت های دیگری نیز دارد. می توانید یک پایگاه داده PostgreSQL ایجاد کنید، توابع لبه را بنویسید و احراز هویت را برای کاربران خود تنظیم کنید.

منبع مقاله