การเก็บไฟล์ (File Storage)

⚠️ คำแนะนำ

URL ของไฟล์ไม่ใช่ที่อยู่ที่ถูกต้องและถาวร ดังนั้นโปรดอย่าเก็บ URL ของไฟล์ที่อัปโหลดไว้ใน kvstore หรือ local storage เพื่อนำมาใช้ซ้ำในอนาคต

❌ ตัวอย่างที่ไม่ถูกต้อง

// ตัวอย่างการเก็บ URL ของไฟล์ที่อัปโหลดไว้ใน local storage เพื่อนำมาใช้ซ้ำ
const App = () => {
    const [profileUrl, setProfileUrl] = useState(null);

    const handleUpload = async (e) => {
        const file = e.target.files[0];
        await eliceContents.filestore.post('profile', file);
        const { url } = await eliceContents.filestore.get('profile');
        localStorage.setItem('profileUrl', url);
        setProfileUrl(url);
    };

    useEffect(() => {
        // ⚠️ หาก URL ที่เก็บไว้ใน local storage หมดอายุ รูปภาพจะไม่แสดง
        // ดังนั้นโปรดอย่าเก็บ URL ของไฟล์ที่อัปโหลดไว้ใน local storage เพื่อนำมาใช้ซ้ำ
        const storeProfileUrl = localStorage.getItem('profileUrl');
        setProfileUrl(storeProfileUrl);
    }, []);

    return (
        <div>
            {profileUrl && <img src={profileUrl} alt="profile" />}
            <input type="file" onChange={handleUpload} />
        </div>
    );
};

✅ ตัวอย่างที่ถูกต้อง

// ตัวอย่างการใช้ URL ของไฟล์ที่อัปโหลดแบบถูกต้องจาก filestore
const App = () => {
    const [profileUrl, setProfileUrl] = useState(null);

    const handleUpload = async (e) => {
        const file = e.target.files[0];
        await eliceContents.filestore.post('profile', file);
        const { url } = await eliceContents.filestore.get('profile');
        setProfileUrl(url);
    };

    useEffect(() => {
        const getProfileUrl = async () => {
            // ✅ ใช้ filestore เพื่อให้ได้ URL ของไฟล์ที่ถูกต้อง
            const profile = await eliceContents.filestore.get('profile');

            if (profile) {
                setProfileUrl(profile.url);
            }
        };

        getProfileUrl();
    }, []);

    return (
        <div>
            {profileUrl && <img src={profileUrl} alt="profile" />}
            <input type="file" onChange={handleUpload} />
        </div>
    );
};

เมธอด

post (อัปโหลดไฟล์)

⚠️ ขีดจำกัดขนาดไฟล์คือ 50MB ดังนั้นไฟล์ที่มีขนาดเกิน 50MB จะไม่สามารถอัปโหลดได้

เมื่อคุณต้องการอัปโหลดไฟล์ไปยังบริการไฟล์ของ Elice คุณสามารถใช้เมธอดนี้ได้

พารามิเตอร์

ตัวแปร	ชนิดข้อมูล	คำอธิบาย
key	string	ข้อมูลคีย์ที่ไม่ซ้ำกันสำหรับไฟล์
file	File	ข้อมูลไฟล์ที่จะอัปโหลด

ตัวอย่าง JavaScript

import { eliceContents } from 'src/constants';

const uploadFile = async () => {
    const file = new File(['Hello, world!'], 'example', { type: 'text/plain' });
    await eliceContents.filestore.post('example', file);
};

ตัวอย่าง React

import { eliceContents } from 'src/constants';

const App = () => {
    const handleUpload = async (e) => {
        const file = e.target.files[0];
        await eliceContents.filestore.post('example', file);
    };

    return (
        <input type="file" onChange={handleUpload} />
    );
};

get (ดึงไฟล์ที่อัปโหลดไว้)

เมื่อคุณต้องการดึงไฟล์ที่อัปโหลดจากบริการไฟล์ของ Elice คุณสามารถใช้เมธอดนี้ได้ การตอบกลับจะประกอบด้วยเมตาดาต้าของไฟล์ เช่น name, mime, size, url โดยคุณสามารถใช้ url เพื่อเข้าถึงไฟล์ประเภทรูปภาพ วิดีโอ หรือเสียงได้

พารามิเตอร์

ตัวแปร	ชนิดข้อมูล	คำอธิบาย
key	string	ข้อมูลคีย์ที่ไม่ซ้ำกันสำหรับไฟล์

ตัวอย่าง JavaScript

import { eliceContents } from 'src/constants';

const downloadFile = async () => {
    const file = await eliceContents.filestore.get('example');
    console.log(file); // { name: 'example', mime: 'text/plain', size: 13, url: 'https://filestore.elice.io/...' }

    const imageViewer = document.createElement('img');
    imageViewer.src = file.url;
    document.body.appendChild(imageViewer);
};

downloadFile();

ตัวอย่าง React

import { eliceContents } from 'src/constants';

const App = () => {
    const [file, setFile] = useState(null);

    useEffect(() => {
        const getFile = async () => {
            const value = await eliceContents.filestore.get('example');
            setFile(value);
        };

        getFile();
    }, []);

    return (
        <div>
            {file && <img src={file.url} alt={file.name} />}
        </div>
    );
};

Delete (ลบไฟล์)

เมื่อคุณต้องการลบไฟล์ที่อัปโหลดจากบริการไฟล์ของ Elice คุณสามารถใช้เมธอดนี้ได้

พารามิเตอร์

ชื่อ	ชนิดข้อมูล	คำอธิบาย
key	string	ข้อมูลคีย์ที่ไม่ซ้ำกันสำหรับไฟล์

ตัวอย่าง JavaScript

import { eliceContents } from 'src/constants';

eliceContents.filestore
.post('example', new File(['Hello, world!'], 'example', { type: 'text/plain' }))
.then(async () => {
    await eliceContents.filestore.delete('example');
    await eliceContents.filestore.get('example'); // null
});

ตัวอย่าง React

import { eliceContents } from 'src/constants';

const App = () => {
    const [file, setFile] = useState(null);

    const handleDelete = async () => {
        await eliceContents.filestore.delete('example');
        const value = await eliceContents.filestore.get('example');
        setFile(value);
    };

    useEffect(() => {
        const getFile = async () => {
            const value = await eliceContents.filestore.get('example');
            setFile(value);
        };

        getFile();
    }, []);

    return (
        <div>
            {file && <img src={file.url} alt={file.name} />}
            <button onClick={handleDelete}>Delete</button>
        </div>
    );
};