質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
Google Cloud Platform

Google Cloud Platformは、Google社がクラウド上で提供しているサービス郡の総称です。エンドユーザー向けサービスと同様のインフラストラクチャーで運営されており、Webサイト開発から複雑なアプリ開発まで対応可能です。

Google Cloud Storage

Google Cloud Storageは、グーグル社が提供しているクラウドベースのデベロッパー・企業向けストレージサービス。可用性に優れ、APIで操作可能なため、データのアーカイブ保存やアプリケーションのコンテンツ提供など様々な用途に活用できます。

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

692閲覧

Next.jsにてreact-dropzoneを使用してGoogle Cloud Storageにアップロードできない

nashiokun

総合スコア2

Google Cloud Platform

Google Cloud Platformは、Google社がクラウド上で提供しているサービス郡の総称です。エンドユーザー向けサービスと同様のインフラストラクチャーで運営されており、Webサイト開発から複雑なアプリ開発まで対応可能です。

Google Cloud Storage

Google Cloud Storageは、グーグル社が提供しているクラウドベースのデベロッパー・企業向けストレージサービス。可用性に優れ、APIで操作可能なため、データのアーカイブ保存やアプリケーションのコンテンツ提供など様々な用途に活用できます。

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2022/10/20 06:52

前提

Typescriptを使用し、ユーザーが適切なファイル・フォルダをreact-dropzone経由でGoogle Cloud Storageにアップロードできる機能を作成しております。

TypeScript

1// Upload.tsx 2import { FC, useCallback, useState } from 'react'; 3import { useDropzone, FileWithPath } from 'react-dropzone'; 4import { getClient } from '@/Infrastructure'; 5const style = { 6 width: 200, 7 height: 150, 8 border: '1px dotted #888', 9}; 10 11const upload2CloudStorage = async (files: FileWithPath[]) => { 12 if (files) { 13 console.log(files); 14 // getClientは独自のfetch関数で、しっかり動きます 15 const res = await getClient().post('/api/upload', { 16 files, 17 }); 18 } 19}; 20type UploadStatus = 'uploading' | 'completed' | null; 21 22export const Upload: FC = () => { 23 const onDrop = useCallback((files: FileWithPath[]) => { 24 setUploadStatus('uploading'); 25 upload2CloudStorage(files); 26 setUploadStatus('completed'); 27 }, []); 28 const { getRootProps, getInputProps, isDragActive } = useDropzone({ 29 onDrop, 30 }); 31 const [uploadStatus, setUploadStatus] = useState<UploadStatus>(null); 32 const message = (uploadStatus: UploadStatus) => { 33 if (uploadStatus == 'uploading') { 34 return 'アップロード中'; 35 } else if (uploadStatus == 'completed') { 36 return 'アップロードが完了しました'; 37 } else if (isDragActive) { 38 return 'ここにファイルをドロップしてください'; 39 } else { 40 return "Drag 'n' drop some files here, or click to select files"; 41 } 42 }; 43 return ( 44 <div {...getRootProps()} style={style}> 45 <input {...getInputProps()} /> 46 <p>{message(uploadStatus)}</p> 47 </div> 48 ); 49}; 50

TypeScript

1// apiです 2import type { NextApiRequest, NextApiResponse } from 'next'; 3import { Storage } from '@google-cloud/storage'; 4import { FileWithPath } from 'react-dropzone'; 5export default async function handler( 6 req: NextApiRequest, 7 res: NextApiResponse, 8) { 9 if (req.method == 'POST') { 10 // Creates a client 11 const { files }: { files: FileWithPath[] } = req.body; 12 console.log(files); 13 const storage = new Storage({ 14 projectId: process.env.GCP_PROJECT_ID, 15 keyFilename: process.env.GOOGLE_APPLICATION_CREDENTIALS, 16 }); 17 files.forEach(async file => { 18 await storage 19 .bucket(process.env.GCLOUD_STORAGE_BUCKET!) 20 .upload(URL.createObjectURL(file)); 21 }); 22 res.end(); 23 } 24}

発生している問題・エラーメッセージ

  1. ユーザーがreact-dropzone経由でファイルをドラッグドロップで落とし、FileWithPathオブジェクトを取得する→できている
  2. Google Cloud Storageにアップロードする方法は、ファイルのパスを指定する方法、メモリからアップロードする方法の2つ。ファイルのパスを指定する方法を試す。参考リンク
  3. FileWithPathオブジェクトから.pathにてパスを取り出し、実行したものの、なぜかFile not found エラーになる。(取り出したパスは、ローカルホストのルートディレクトリからたどったフルパスではなく、ただのファイル名だった)
  4. FileWithPathオブジェクトをそのままjson.stringfyでメモリからアップロードしたが、中身がとれない

このような状況です。適切にアップロードできる方法を教えていただきたいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問