Google Drive APIJavascriptを介してURLからGoogleドライブに画像をアップロードします

Aug 18 2020

私はJavascriptを初めて使用しますが、私の質問があなたに足りないと思われる場合は申し訳ありません。ウェブサイトからGoogleドライブに画像をアップロードしたい。認証とフォルダの作成部分を正常に実装しましたが、アップロードプロセスについて混乱しています。
これがGoogleドライブ内にフォルダを作成するための私のコードだとしましょう：

function createFolder(folderName) {
  var parentId = 'xxxxxxx';//some parentId of a folder under which to create the new folder
  var fileMetadata = {
    'name' : folderName,
    'mimeType' : 'application/vnd.google-apps.folder',
    'parents': [parentId]
  };
  gapi.client.drive.files.create({
    resource: fileMetadata,
  }).then(function(response) {
    switch(response.status){
      case 200:
      var file = response.result;
      console.log('Created Folder Id: ', file.id);
      uploadImage(file.id);
      break;
      default:
      console.log('Error creating the folder, '+response);
      break;
    }
  });
}

ここで、このURLから画像をアップロードしたいと思いhttps://xxxxxx.comます：上部の応答から新しく作成されたフォルダーに（file.id）

これはGoogleAPIドキュメントで取得したものですが、URLをどこに配置/添付する必要がありますか？

function uploadImage(folderId) {
  var fileMetadata = {
    'name': 'photo.jpg',
    parents: [folderId]
  };
  var media = {
    mimeType: 'image/jpeg',
    body: fs.createReadStream('files/photo.jpg')
  };
  drive.files.create({
    resource: fileMetadata,
    media: media,
    fields: 'id'
  }, function (err, file) {
    if (err) {
      // Handle error
      console.error(err);
    } else {
      console.log('File Id: ', file.id);
    }
  });
}

よろしくお願いします。

回答

1 Tanaike Aug 19 2020 at 08:26

私はあなたの目標を次のように信じています。

URLからファイルをダウンロードし、ダウンロードしたファイルをJavascriptを使用してGoogleドライブにアップロードします。
あなたの場合、あなたgapi.clientはファイルをGoogleドライブにアップロードするために使用することができます。

変更点：

残念ながら現段階でgapi.client.drive.files.createは、内容も含めてリクエストを送信できないようです。Refしたがって、この場合、fetch回避策として使用することを提案したいと思います。ときにfetch使用され、ファイルの内容とメタデータがで要求することができますmultipart/form-data。
この回避策では、アクセストークンはから使用されgapi.clientます。したがって、このスクリプトはgapi.client、ファイルのアップロードにを使用できることを前提としています。これに注意してください。

変更されたスクリプト：

const url = "###";  // Please set the URL.
const fileName = "sample filename";
const folderId = "###";  // Please set the folder ID.

fetch(url).then(res => res.blob()).then(blob => {
  const form = new FormData();
  form.append('metadata', new Blob([JSON.stringify({name: fileName, parents: [folderId]})], {type: 'application/json'}));
  form.append('file', blob);
  fetch('https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart', {
    method: 'POST',
    headers: new Headers({'Authorization': 'Bearer ' + gapi.auth.getToken().access_token}),
    body: form
  }).then(res => res.json()).then(val => console.log(val));
});

このスクリプトを実行すると、コンソールに次の結果が表示されます。（URLがJpeg画像ファイルの直接リンクの場合。）
```
  {
    "kind": "drive#file",
    "id": "###",
    "name": "sample filename",
    "mimeType": "image/jpeg"
  }
```

注意：

この場合、uploadType=multipartが使用されます。したがって、最大ファイルサイズは5MBです。これに注意してください。5 MBを超える容量を使用する場合は、再開可能なアップロードを確認してください。参照

参照：

フェッチの使用
ファイルデータをアップロードする

追加：

CORSに関連するエラーを回避するために、別の方法として、Webアプリをラッパーとして使用することを提案したいと思います。この場合、クライアント側はJavascriptです。このJavascriptはGoogleの外部で使用できます。

使用法：

次のフローを実行してください。

1. Google AppsScriptの新しいプロジェクトを作成します。

WebAppsのサンプルスクリプトはGoogleAppsScriptです。そこで、Google AppsScriptのプロジェクトを作成してください。

直接作成したい場合は、にアクセスしてください。 https://script.new/。この場合、Googleにログインしていないと、ログイン画面が開きます。だからGoogleにログインしてください。これにより、Google AppsScriptのスクリプトエディタが開きます。

2.スクリプトを準備します。

次のスクリプト（Google Apps Script）をコピーしてスクリプトエディタに貼り付けてください。このスクリプトはWebアプリ用です。

Google Drive APIJavascriptを介してURLからGoogleドライブに画像をアップロードします

回答

変更点：

変更されたスクリプト：

注意：

参照：

追加：

使用法：

1. Google AppsScriptの新しいプロジェクトを作成します。

2.スクリプトを準備します。

3.Webアプリをデプロイします。

4.クライアント側からサーバー側にファイルをアップロードします。

注意：

参照：

ドキュメンテーション