ファイル保存 (File Saver)

⚠️ 注意事項

ファイルの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>
    );
};