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 cdk.filestore.post('profile', file);
        const { url } = await cdk.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 cdk.filestore.post('profile', file);
        const { url } = await cdk.filestore.get('profile');
        setProfileUrl(url);
    };

    useEffect(() => {
        const getProfileUrl = async () => {
            // ✅ Retrieve a valid file URL through filestore for use.
            const profile = await cdk.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 { cdk } from './path/to/cdk';

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

React Example

import { cdk } from './path/to/cdk';

const App = () => {
  const handleUpload = async e => {
    const file = e.target.files[0];
    await cdk.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 { cdk } from './path/to/cdk';

const downloadFile = async () => {
  const file = await cdk.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 { cdk } from './path/to/cdk';

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

    useEffect(() => {
        const getFile = async () => {
            const value = await cdk.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 { cdk } from './path/to/cdk';

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

React Example

import { cdk } from './path/to/cdk';

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

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

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

        getFile();
    }, []);

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

    );
};