開発
タグ Firebase Cloud Storage
今FirebaseとReactでアプリを開発中で、画像をアップロードする部分を作ったのでメモ。
アップロード部分
// uploadPhotoという名前でexport
export const uploadPhoto = async (file) => {
const storageRef = firebase.storage.ref();
const uuid = generateUUID(); // UUIDを作っていますがなんでもOK
const metadata = {
contentType: 'image/png'
};
const fileRef = storageRef.child(`${uuid}.png`);
await fileRef.put(file, metadata);
return uuid; // UUIDを返していますが返さなくてもOK
}
使う部分
class SampleUploader extends Component {
constructor(props) {
super(props);
this.fileInput = React.createRef();
this.state = {
photoData: null,
isPosting: false,
};
}
render() {
// Preview
const photo = this.state.photoData === null ? null :
(
<img src={this.state.photoData} />
);
return (
<form onSubmit={async (e) => {
e.preventDefault();
this.setState({
isPosting: true
});
const photoId = await storage.uploadPhoto(this.fileInput.current.files[0]);
// use photoId
this.setState({
isPosting: false,
photoData: null
})
}}>
<input type="file" accept="image/*" ref={this.fileInput} onChange={(e) => {
const files = e.target.files
if (files.length > 0) {
var file = files[0]
var reader = new FileReader();
reader.onload = (e) => {
this.setState({ photoData: e.target.result });
};
reader.readAsDataURL(file);
} else {
this.setState({ photoData: null });
}
}} />
{photo}
<button type="submit" disabled={this.state.isPosting}>投稿する</button>
</form>
);
}
}
無事FirebaseのCloud Storageに画像をアップロードすることができました。
オススメ記事
-
2020/12/1開発
Apple Silicon搭載 MacBook Pro M1で Homebrewとrbenvをインストールする
先日購入したApple Silicon搭載 MacBook Pro M1にこのブログをビルドするためにHomebrewとrbenvをインストールしたのでメモ。
-
2020/11/27開発
Apple Silicon搭載のMacBook Pro M1が危うく文鎮化するところだったので記録
Apple Silicon搭載のMacBook Pro 13インチを仕事用に購入したのですが、クリーンインストールしたところ文鎮化しかけたので記録しておきます。
-
2020/6/23開発
Platform State of the Unionまとめ
Platform State of the Unioまとめ
-
2020/6/23開発
WWDC2020キーノートまとめ
WWDC2020 キーノートまとめ
-
2020/5/31開発
GitHub Pagesで無料ブログを作成する - Part4 自分のオリジナルのテーマを作る
Jekyllでは既存のテーマを使うこともできるのですが、さらに一歩踏み込んで、自分で既存のテーマをカスタマイズしたり、テーマを作ることもできます。
-
2020/5/28開発
GitHub Pagesで無料ブログを作成する - Part3 Jekyllの設定をカスタマイズする
前回の記事では、Jekyllのテーマを利用する方法と記事を追加する方法を紹介しました。今回はさらにJekyllをカスタマイズしていきますが、確認を簡単にするためにまずJekyllをローカル環境で実行する方法を紹介します。
-
2020/5/26開発
GitHub Pagesで無料ブログを作成する - Part2 Jekyllを使ってみる
JekyllはGitHub Pagesで使用することができる静的サイトのジェネレータです。Jekyllを使うことで、Markdownで書いたブログの記事やhtmlで作ったページをビルドして、公開用のhtmlとして生成することができます。
-
2020/5/24開発
GitHub Pagesで無料ブログを作成する - Part1 GitHubにリポジトリを作ってサイトを公開する
以前、GitHub Pagesでブログを運用し始めてから4年くらいたったというブログを書いたのですが、概要を書いただけで具体的な構築方法はあまり記述していなかったので、何回かに分けてブログを作っていく方法を書いていきたいと思います。
-
2020/1/1開発
2020年にネイティブアプリを開発する方法
去年2019年にネイティブアプリを開発する方法という記事を書きました。その中では1. ネイティブ言語、ネイティブプラットフォーム, 2. React Native, 3. Flutterの3つの方法を紹介していました。2020年はどういう感じになりそうか、という実感を書いておきたいと思います。
-
2019/12/14開発
GitHub Pagesでブログを運用し始めてから4年くらいたった
このサイトはGitHub Pagesで運用しています。運用を開始してから4年くらいたったので、GitHub Pages運用のTipsでも書いておこうかと思います。
MasamichiUeta
ソフトウェアエンジニアです。ソフトウェアエンジニアリング、アプリ開発、趣味などについて書いてます