ファイル保存(filestore)

⚠️ 注意事項

ファイル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} />

    );
};

✅ 正しい例

// 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} />

    );
};

メソッド

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} />}

    );
};

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>

    );
};