Google Drive API и загрузка файлов из браузера - PullRequest
Новая
       10

Google Drive API и загрузка файлов из браузера

0 голосов
/ 18 декабря 2018

Я пытаюсь загрузить файл с помощью API Google Диска, и у меня правильные метаданные, и я хочу убедиться, что фактическое содержимое файла там.У меня есть простая настройка страницы, которая выглядит следующим образом: 

<div id="upload">
  <h6>File Upload Operations</h6>
  <input type="file" placeholder='file' name='fileToUpload'>
  <button id='uploadFile'>Upload File</button>
</div>

, и у меня есть настройка javascript, в которой пользователю предлагается сначала войти в систему, а затем они могут загрузить файл.Вот код: (в настоящее время загружаются только метаданные файла ....) 

let uploadButton = document.getElementById('uploadFile');
uploadButton.onclick = uploadFile;
const uploadFile = () => {
    let ftu = document.getElementsByName('fileToUpload')[0].files[0];
    console.dir(ftu);
    gapi.client.drive.files.create({
        'content-type': 'application/json;charset=utf-8',
        uploadType: 'multipart',
        name: ftu.name,
        mimeType: ftu.type,
        fields: 'id, name, kind'
    }).then(response => {
        console.dir(response);
        console.log(`File: ${ftu.name} with MimeType of: ${ftu.type}`);
        //Need code to upload the file contents......
    });
};

Во-первых, я более знаком с серверной частью, поэтому получение файла в битах из тега <input type='file'>немного туманно для меня.С другой стороны, метаданные есть.Как я могу получить содержимое файла до API?

Ответы [ 2 ]

0 голосов
/ 19 декабря 2018

Итак, согласно некоторым ресурсам, которые я нашел в трехдневном поиске, файл просто не может быть загружен через клиент gapi.Он должен быть загружен через истинный HTTP-вызов REST.Итак, давайте используем fetch! 

const uploadFile = () => {
    //initialize file data from the dom
    let ftu = document.getElementsByName('fileToUpload')[0].files[0];
    let file = new Blob([ftu]); 
    //this is to ensure the file is in a format that can be understood by the API

    gapi.client.drive.files.create({
        'content-type': 'application/json',
        uploadType: 'multipart',
        name: ftu.name,
        mimeType: ftu.type,
        fields: 'id, name, kind, size'
    }).then(apiResponse => {
        fetch(`https://www.googleapis.com/upload/drive/v3/files/${response.result.id}`, {
         method: 'PATCH',
         headers: new Headers({
             'Authorization': `Bearer ${gapi.client.getToken().access_token}`,
              'Content-Type': ftu.type
         }),
         body: file
       }).then(res => console.log(res));

}

Заголовок авторизации назначается при вызове функции gapi.client.getToken().access_token, и в основном это берет пустой объект из ответа на вызов gapi и вызывает API fetchчтобы загрузить актуальные биты файла!

0 голосов
/ 19 декабря 2018

В вашей ситуации, когда вы загружаете файл с помощью gapi.client.drive.files.create(), создается пустой файл с загруженными метаданными.Если мое понимание верно, как насчет этого обходного пути?Я испытал ту же ситуацию с вами.В то время я использовал этот обходной путь.

Точки изменения:

  • Получение токена доступа с помощью gapi.
  • Файл загружается с использованием XMLHttpRequest.

Модифицированный скрипт:

Пожалуйста, измените скрипт в uploadFile(). 

let ftu = document.getElementsByName('fileToUpload')[0].files[0];
var metadata = {
    'name': ftu.name,
    'mimeType': ftu.type,
};
var accessToken = gapi.auth.getToken().access_token; // Here gapi is used for retrieving the access token.
var form = new FormData();
form.append('metadata', new Blob([JSON.stringify(metadata)], {type: 'application/json'}));
form.append('file', ftu);

var xhr = new XMLHttpRequest();
xhr.open('post', 'https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart&fields=id,name,kind');
xhr.setRequestHeader('Authorization', 'Bearer ' + accessToken);
xhr.responseType = 'json';
xhr.onload = () => {
    console.log(xhr.response);
};
xhr.send(form);

Примечание:

  • В этом модифицированном скрипте предполагается, чтоDrive API включен на консоли API, и токен доступа может использоваться для загрузки файла.
  • О полях, которые вы используете id,name,kind.Так что этот образец также использует их.

Ссылка:

Если я неправильно понимаю ваш вопрос или этоизвините. Обходной путь для вашей ситуации не помог, извините.

Редактировать:

Когда вы хотите использовать fetch, как насчет этого примера сценария? 

let ftu = document.getElementsByName('fileToUpload')[0].files[0];
var metadata = {
    'name': ftu.name,
    'mimeType': ftu.type,
};
var accessToken = gapi.auth.getToken().access_token; // Here gapi is used for retrieving the access token.
var form = new FormData();
form.append('metadata', new Blob([JSON.stringify(metadata)], {type: 'application/json'}));
form.append('file', ftu);

fetch('https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart&fields=id,name,kind', {
  method: 'POST',
  headers: new Headers({'Authorization': 'Bearer ' + accessToken}),
  body: form
}).then((res) => {
  return res.json();
}).then(function(val) {
  console.log(val);
});
...