あるSEのつぶやき・改スマートフォン用の表示で見るあるSEのつぶやき・改IT・システム開発に関することをつぶやいています。Reactはじめに前の記事で、React+Amplify+Cognito認証のアプリで自動デプロイするところまでご紹介しました。ファイルをアップロードする方法をご紹介します。前の記事のプロジェクトに機能を追加していくので、必要に応じて参照してください。いってもコマンドの質問に答えていくだけですが。コンポーネントのPhotoPickerを使用します。PhotoPickerは画像をドラッグ&ドロップで取得できるだけでなく、アップロード後にプレビュー表示してくれる優れものです。App.tsxのソースコードは以下のようになります。アップロードしていることです。その際、他のユーザーからファイルを参照できないよう、レベルをprivateにしています。認証の配下となり、サインインしないと最初の画面も表示されません。実際にアプリケーションを起動してみます。start認証画面が予定通り表示されました。サインインを行うと、以下のように画像ファイルのアップロード画面が表示されます。ファイルアップロード後に画像ファイルがプレビュー表示されます。管理画面で確認すると、ユーザーのプライベート領域(「private」配下)に画像ファイルが正しくアップロードされていることが分かります。リンクしてもアクセス拒否されてしまいますが、管理者権限でファイルをダウンロードして表示すると、以下のように問題なく表示できることが確認できます。念のため、前の記事で設定したようにリモートリポジトリにpushしたら自動デプロイされて動作するかも確認します。masterデプロイ先のアドレスにアクセスすると、認証画面がちゃんと表示されますね。サインインして画像ファイルをアップロードすると、画像プレビューも正しくされました。ファイルのタイムスタンプを確認すると、ファイルが上書きされていることが分かります。画像ファイルをアップロードするのが簡単だということが分かったと思います。活用範囲が広がっていきますね。fnyaなんちゃってSE。SEをなりわいににして生きているらしい。最近はプログラマとしての役割が多く四苦八苦している模様。月別アーカイブスポンサーリンクスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。