파일 저장(filestore)

`filestore`는 Elice 파일 서비스를 사용하여 파일을 업로드하거나 업로드한 파일 데이터를 가져오는데 사용할 수 있는 기능을 제공합니다.

⚠️ 주의사항

파일 URL은 영구적으로 유효한 주소가 아니므로 절대 업로드된 파일 URL을 kvstore 또는 로컬 저장소에 저장하여 재사용하지 마세요.

❌ 잘못된 예시

// 업로드한 파일 URL을 로컬 스토리지에 저장하여 재사용하는 예시
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이 만료된 주소일 경우 이미지가 표시되지 않습니다.
        // 따라서 업로드된 파일 URL을 로컬 저장소에 저장하여 재사용하지 마세요.
        const storeProfileUrl = localStorage.getItem('profileUrl');
        setProfileUrl(storeProfileUrl);
    }, []);

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

✅ 올바른 예시

// filestore를 통해 업로드된 파일 URL을 가져와 사용하는 예시
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>
    );
};