フリーランスWEBエンジニア多分フロントエンドエンジニア寄りのフリーランスWeb制作者のサイトです。他バンドでギター弾いたり、max/mspいじったり等もしております。お気軽にお問い合わせください。25/02/2020TwitterFacebookGoogle+LinkedInPocket個人開発のLaravelサイトをReact化してみたのだけども、よくあるプレビュー機能付きの画像アップローダーみたいなのが以外と面倒だったのでちょいと書いてみます。creteとeditで使いまわしたいサンプル宣伝がてらですが、参考ページは下記です。https://wordstacks.nocebo.jp/posts/createの“ここにファイルをドロップ”の部分です。全部入ってるとわかりにくい気がしたので色々省略してますがこんな感じになりました。雰囲気Reactと雰囲気Typescriptなので細かい事はご愛嬌。した参考になれば幸いです。Images;ハイライト表示効いてない?かも。})();};ドラッグとファイルを選択。使ってるハンドラです。reader.onloadend()って書きたくなるけどそのままだと出来ないっぽいので上記な感じにしてみた。readAsDataURLreadAsDataURLはBlobかFileオブジェクトを読めるっぽい。今回ので言うとhandleChangeFileの時はFileでeditの時useEffectでstorageの画像ひっぱってくる時はBlobです。お?こういう時にジェネリクス使えばいいのかな?って思ってちょっと型付け試してみたけど、async使ってどう書けばよいのか、サクッとわからないので諦めた。creteとeditで使いまわしたいのでeditの場合に下記のような感じにしました。[isRecord]);ここが個人的に結構めんどくさいポイントですが普通にリモートにある画像imgのまま読むだけだとLaravel側に送った時にupdateが出来ないっぽいのとハンドラから反映するimagesの型と合わせないと下のpreviewsで使いまわせないのでBlob読んでFileにしました。Blobはバイナリ、らしい。adminよろしければシェアお願いしますTwitterFacebookGoogle+LinkedInPocketwordpressのローカル作業をwebpack(proxyとかHMR?)でやるNextLaravelをReact化+SSRした際のつまった所Prev関連記事Laravel使ってみたのでRailsとざっくり比較(個人開発)Laravelで個人開発してみました。...Laravelで作ってたサイトをReact/ReduxでSPA化してみた。感想がてらの宣伝です。コメントをキャンセルメールアドレスが公開されることはありません。人気記事HTML5の<video>タグをフルス...html5のvideo要素をjsでの全画面制御です。css3のtanslare3dとjsの組み合わせで3Dカルーセルメニューのようなものです。