Firebase Storageにてmetadataがうまく適応されない場合の対応
12276 ワード
NG
const storage = getStorage();
const storageRef = ref(storage, 'images/mountains.jpg');
const metadata = {
contentType: 'image/jpeg',
'location': 'Yosemite, CA, USA',
'activity': 'Hiking'
};
uploadBytes(storageRef, image as Blob, metadata);
OK
const storage = getStorage();
const storageRef = ref(storage, 'images/mountains.jpg');
const metadata = {
contentType: 'image/jpeg',
customMetadata: {
'location': 'Yosemite, CA, USA',
'activity': 'Hiking'
}
};
uploadBytes(storageRef, image as Blob, metadata);
公式ドキュメント:
https://firebase.google.com/docs/storage/web/file-metadata?hl=ja#custom_metadata
検証のために利用したベースコードメモ:
https://codesandbox.io/s/thyb0?file=/pages/index.js
上記コードをNext.js用に書き換えた検証コード:
import { useState } from 'react'
import type { ChangeEvent, MouseEvent } from 'react'
import type { NextPage } from 'next'
import { getStorage, ref, uploadBytes } from "firebase/storage"
const Privacy: NextPage = () => {
const [image, setImage] = useState<File>();
const [createObjectURL, setCreateObjectURL] = useState<string>();
const uploadToClient = (event: ChangeEvent<HTMLInputElement>) => {
if (event.target.files && event.target.files[0]) {
const I = event.target.files[0];
setImage(i);
setCreateObjectURL(URL.createObjectURL(i));
}
};
const uploadToServer = async (event: MouseEvent<HTMLButtonElement>) => {
const body = new FormData();
const storage = getStorage();
const storageRef = ref(storage, 'images/mountains.jpg');
const metadata = {
contentType: 'image/jpeg',
customMetadata: {
'location': 'Yosemite, CA, USA',
'activity': 'Hiking'
}
};
uploadBytes(storageRef, image as Blob, metadata);
};
return (
<div>
<div>
<img src={createObjectURL!} />
<h4>Select Image</h4>
<input type="file" name="myImage" onChange={uploadToClient} />
<button
className="btn btn-primary"
type="submit"
onClick={uploadToServer}
>
Send to server
</button>
</div>
</div>
);
}
export default Privacy
\プログラミング相談Slackコミュニティやってます/
月額9,800円のサブスクで質問し放題です
プログラミング学習や個人開発などに利用ください
Author And Source
この問題について(Firebase Storageにてmetadataがうまく適応されない場合の対応), 我々は、より多くの情報をここで見つけました https://qiita.com/yoneapp/items/12524d4a403e59b840e1著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .