Filestore

⚠️ Caution

The file URL is not a permanent address, so do not save the uploaded file URL in kvstore or local storage for reuse.

❌ Incorrect example

// Example of saving the uploaded file URL in local storage for reuse
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(() => {
        // ⚠️ If the URL stored in local storage has expired, the image will not be displayed.
        // Therefore, do not save the uploaded file URL in local storage for reuse.
        const storeProfileUrl = localStorage.getItem('profileUrl');
        setProfileUrl(storeProfileUrl);
    }, []);

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

✅ Correct example

// Example of using the file URL uploaded through 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 () => {
            // ✅ Use a valid file URL retrieved through filestore.
            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>
    );
};

Methods

post (Upload file)

⚠️ The file size limit is 50MB. Therefore, files larger than 50MB cannot be uploaded.

You can use this method to upload files to the Elice file service.

Parameters

Variable	Type	Description
key	string	The unique key information of the file.
file	File	The file data to upload.

JavaScript example

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 example

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 (Get uploaded file)

You can use this method to retrieve files uploaded to the Elice file service. The response includes file metadata such as name, mime, size, and url. You can use the url to access image, video, audio, and other types of files.

Parameters

Variable	Type	Description
key	string	The unique key information of the file.

JavaScript example

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 example

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 (Delete file)

You can use this method to delete files uploaded to the Elice file service.

Parameters

Variable	Type	Description
key	string	The unique key information of the file.

JavaScript example

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 example

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>
    );
};