Как загрузить файлы на Google диск с помощью gapi и возобновляемых загрузок?

Я пытаюсь выполнить это руководство по возобновлению загрузок на Google Диске через Google Api.

Это мой код, вы можете видеть, что он запрашивает 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 не нравится массив File/byte как тело на свой gapi.client.request, и они усекают его

Каков правильный способ передачи файла? Я пробовал как тело: файл и тело: reader.result, но тот же результат

PS: gapi уже полностью аутентифицирован и инициализирован с помощью auth2, я могу создать файлы/каталог.

ИЗМЕНИТЬ 1:

Библиотека

gapi - это просто jsoing FileArray, поэтому функция JSON изменяет ее на пустой объект, не имея возможности заставить ее работать. что-то должно отсутствовать.

ИЗМЕНИТЬ 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);

Если у кого-то есть подсказки.

Ответ 1

Вы должны использовать XMLHttpRequest для создания HTTP-запроса с перекрестным происхождением. Клиент gapi не поддерживает XMLHttpRequest. (но есть этот запрос на растяжение, который был открыт некоторое время) Даже если вы не отправляете двоичные данные файла в исходный запрос, вы должны использовать XMLHttpRequest как для начальной, так и для запроса, где файл загружен, чтобы возвращаемый URL-адрес местоположения предоставил соответствующий заголовок ответа (Access-Control-Allow-Origin: YOUR_URL) и удовлетворял требованиям CORS.

Вот отличный учебник о CORS и XMLHttpRequest, который может быть полезен при преобразовании ваших запросов.

Вы можете использовать информацию о запросе, описанную на странице, с которой вы связаны. Этот пример показывает информацию о запросе, но не предоставляет никакой информации о получении токена аутентификации. Но этот пример делает!

Мне удалось успешно загрузить файл, используя следующий код:

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

Ответ 2

Это решение BMcV, переведенное в службу angular 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);