gapiと再開可能なアップロードを使用してGoogleドライブにファイルをアップロードするにはどうすればよいですか？

Question

GoogleドライブでGoogle Apiを通じて再開可能なアップロードを行う場合は、thisガイドに従っています。

これは私のコードで、あなたはそれが2つのリクエストガイドはに尋ねると、最初の部分は、メタデータを作成し、我々は最初の要求によって作成されたセッションにファイルをアップロード開始するための場所を使用します見ることができます。

 const file = new File(['Hello, world!'], 'hello world.txt', { type: 'text/plain;charset=utf-8' }); 
     const contentType = file.type || 'application/octet-stream'; 

     const reqMetadata = gapi.client.request({ 
      'path': 'upload/drive/v3/files', 
      'method': 'POST', 
      'params': { 'uploadType': 'resumable' }, 
      'headers': { 
       'X-Upload-Content-Type': file.type, 
       'X-Upload-Content-Length': file.size, 
       'Content-Type': 'application/json; charset=UTF-8' 
      }, 
      'body': { 
       'name': file.name, 
       'mimeType': contentType, 
       'Content-Type': contentType, 
       'Content-Length': file.size 
      } 
     }); 

     reqMetadata.execute((respMetadata, rawRespMetadata: any) => { 
      const locationUrl = JSON.parse(rawRespMetadata).gapiRequest.data.headers.location; 

      const reader = new FileReader(); 

      reader.onload = (e) => { 
       const reqFile = gapi.client.request({ 
        'path': locationUrl, 
        'method': 'PUT', 
        'headers': { 
         'Content-Type': file.type, 
         'Content-Length': file.size 
        }, 
        'body': reader.result 
       }); 

       reqFile.execute(respFile => { 
        console.log(respFile); 
       }); 
      }; 

      reader.readAsArrayBuffer(file); 
     }); 

どうしたのですか？

まあは、GoogleのAPIライブラリが自分のgapi.client.request上の機関としてのファイル/バイト配列を好きではないようだと、彼らはすぐにそれを切り捨てている

ファイルを渡すための正しい方法は何ですか？私は本文と本文を試しました：reader.resultしかし同じ結果

PS：gapiはすでに完全に認証されています&はauth2で初期化されました。ファイル/ディレクトリを作成できます。

EDIT 1：

GAPIライブラリだけで、FileArrayをjsoingされるため、JSON関数は空のオブジェクト、それを動作させるための方法はありませんし、それを修正...何か欠けている必要があります。

EDIT 2：

私はそれがGAPIなしで働かせたが、それは正しくファイルをアップロードしますが、誰かがいくつかのヒントを持っている場合、私はCORS

  reader.onload = (e) => {      

       const authHeader = `Bearer ${this.auth.currentUser.get().getAuthResponse().access_token}`; 
       const headers = new Headers({ 
        'Authorization': authHeader, 
        'Content-Type': file.type 
       }); 
       const options = new RequestOptions({ headers }); 
       const url = locationUrl; 

       this.http.put(url, reader.result, options).subscribe(res => { 
        observer.next(res); 
       }, (err) => { 
        observer.next({}); 
       }); 
      }; 

      reader.readAsArrayBuffer(file); 

といくつかの問題を抱えている。..

Answer 1

クロスオリジンHTTPリクエストを作成するには、XMLHttpRequestを使用する必要があります。 gapiクライアントはXMLHttpRequestをサポートしていません。 (but there is this pull request that's been open for a while)最初のリクエストでファイルバイナリデータを送信していない場合でも、返された場所のためにファイルがアップロードされる初期およびリクエストの両方にXMLHttpRequestを使用する必要があります。url適切なレスポンスヘッダー（Access-Control- Allow-Origin：YOUR_URL）、CORS要件を満たしていることを確認します。

あなたのリクエストを変換するのに便利なtutorial about CORS and XMLHttpRequestはここにあります。

リンク先のページで説明しているリクエスト情報を使用できます。 This example shows the request infoですが、認証トークンの取得に関する情報は提供していません。 But this example does!

は、私は成功し、次のコード使用してファイルをアップロードすることができました：

const file = new File(['Hello, world!'], 'hello world.txt', { type: 'text/plain;charset=utf-8' }); 
const contentType = file.type || 'application/octet-stream'; 
const user = gapi.auth2.getAuthInstance().currentUser.get(); 
const oauthToken = user.getAuthResponse().access_token; 
const initResumable = new XMLHttpRequest(); 
initResumable.open('POST', 'https://www.googleapis.com/upload/drive/v3/files?uploadType=resumable', true); 
initResumable.setRequestHeader('Authorization', 'Bearer ' + oauthToken); 
initResumable.setRequestHeader('Content-Type', 'application/json'); 
initResumable.setRequestHeader('X-Upload-Content-Length', file.size); 
initResumable.setRequestHeader('X-Upload-Content-Type', contentType); 
initResumable.onreadystatechange = function() { 
    if(initResumable.readyState === XMLHttpRequest.DONE && initResumable.status === 200) { 
    const locationUrl = initResumable.getResponseHeader('Location'); 
    const reader = new FileReader(); 
    reader.onload = (e) => { 
     const uploadResumable = new XMLHttpRequest(); 
     uploadResumable.open('PUT', locationUrl, true); 
     uploadResumable.setRequestHeader('Content-Type', contentType); 
     uploadResumable.setRequestHeader('X-Upload-Content-Type', contentType); 
     uploadResumable.onreadystatechange = function() { 
     if(uploadResumable.readyState === XMLHttpRequest.DONE && uploadResumable.status === 200) { 
      console.log(uploadResumable.response); 
     } 
     }; 
     uploadResumable.send(reader.result); 
    }; 
    reader.readAsArrayBuffer(file); 
    } 
}; 

// You need to stringify the request body containing any file metadata 

initResumable.send(JSON.stringify({ 
    'name': file.name, 
    'mimeType': contentType, 
    'Content-Type': contentType, 
    'Content-Length': file.size 
})); 

をしかし、ここでこのすべてに対処するための、より堅牢なレポがあります：https://github.com/googledrive/cors-upload-sample

Answer 2

これは翻訳BMcVソリューションです。角度のHTTPサービスに。

const contentType = file.type || 'application/octet-stream'; 
const baseRoot = gapi['config'].get('googleapis.config').root; 

const reader = new FileReader(); 

reader.onload = (e) => { 

    const authHeader = `Bearer ${this.auth.currentUser.get().getAuthResponse().access_token}`; 

    const metadataHeaders = { 
     'Authorization': authHeader, 
     'Content-Type': 'application/json', 
     'X-Upload-Content-Length': file.size, 
     'X-Upload-Content-Type': contentType 
    }; 
    const metadataOptions = new RequestOptions({ headers: new Headers(metadataHeaders) }); 

    const url = `${baseRoot}/upload/drive/v3/files?uploadType=resumable`; 

    const metadata = { 
     'name': file.name, 
     'mimeType': contentType, 
     'Content-Type': contentType, 
     'Content-Length': file.size 
    }; 

    this.http.post(url, metadata, metadataOptions).subscribe(metadataRes => { 

     const locationUrl = metadataRes.headers.get('Location'); 

     const uploadHeaders = { 
      'Content-Type': contentType, 
      'X-Upload-Content-Type': contentType 
     }; 
     const uploadOptions = new RequestOptions({ headers: new Headers(uploadHeaders) }); 

     this.http.put(locationUrl, reader.result, uploadOptions).subscribe(uploadRes => { 
      console.log(uploadRes.json()); 
     }); 
    }, (err) => { 
     console.error(err); 
    }); 
}; 
reader.readAsArrayBuffer(file);