File Storage (filestore)

⚠️ Caution

File URLs are not permanently valid addresses, so never save uploaded file URLs for reuse in kvstore or local storage.

❌ Incorrect Example

// Example of saving the uploaded file URL to 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 display.
        // 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} />

    );
};

✅ Correct Example

// Example of retrieving and using the uploaded file URL 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 () => {
            // ✅ Retrieve a valid file URL through filestore for use.
            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} />

    );
};

Methods

post (File Upload)

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

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

Parameters

Variable	Type	Description
key	string	Unique key information for the file.
file	File	The data of the file to be uploaded.

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 (Retrieve Uploaded File)

You can use this method to retrieve uploaded files from the Elice file service. The response includes file metadata such as name, mime, size, and url. The url can be used to access files such as images, videos, and audio.

Parameters

Variable	Type	Description
key	string	Unique key information for 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} />}

    );
};

Delete (Remove File)

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

Parameters

Name	Type	Description
key	string	Unique key information for 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>

    );
};