ファイル保存 (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ファイルサービスにファイルをアップロードするには、このメソッドを使用できます。
パラメータ
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を使用して、画像、ビデオ、オーディオなどのファイルにアクセスできます。
パラメータ
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ファイルサービスからアップロードされたファイルを削除するには、このメソッドを使用できます。
パラメータ
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>
);
};
Last updated