Prześlij obraz z adresu URL na Dysk Google za pomocą JavaScript API Dysku Google

Question

Jestem nowy w Javascript i przepraszam, jeśli moje pytanie wydaje ci się kiepskie. Chcę przesłać obraz z mojej witryny na mój Dysk Google. Pomyślnie zaimplementowałem część dotyczącą uwierzytelniania i tworzenia folderów, ale nie mam pewności co do procesu przesyłania.
Powiedz, że to jest mój kod do tworzenia folderu na Dysku 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;
    }
  });
}

Teraz chcę przesłać mój obraz z tego adresu URL: https://xxxxxx.comdo nowo utworzonego folderu z górnej odpowiedzi ( file.id)

To jest to, co otrzymałem w dokumentacji Google API, ale gdzie mam w niej umieścić / dołączyć mój adres 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);
    }
  });
}   

Z góry dziękuję.

Answer 1

Wierzę, że twój cel jest następujący.

• Chcesz pobrać plik z adresu URL i przesłać pobrany plik na Dysk Google przy użyciu JavaScript.
• W Twoim przypadku gapi.clientmożesz użyć swojego do przesłania pliku na Dysk Google.

Punkty modyfikacji:

• Na obecnym etapie niestety wydaje się, że gapi.client.drive.files.createnadal nie można wysłać zapytania wraz z treścią. Ref. Więc w tym przypadku chciałbym zaproponować użycie fetchjako obejścia. Gdy fetchjest używany, można zażądać zawartości pliku i metadanych za pomocą multipart/form-data.
• W tym obejściu token dostępu jest używany z gapi.client. Więc ten skrypt zakłada, że ​​twój gapi.clientmoże być użyty do załadowania pliku. Proszę, uważaj na to.

Zmodyfikowany skrypt:

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));
});

• Po uruchomieniu tego skryptu w konsoli można zobaczyć następujący wynik. (Gdy adres URL jest bezpośrednim linkiem do pliku obrazu JPEG).

    {
      "kind": "drive#file",
      "id": "###",
      "name": "sample filename",
      "mimeType": "image/jpeg"
    }
  

Uwaga:

• W tym przypadku uploadType=multipartjest używany. Zatem maksymalny rozmiar pliku to 5 MB. Proszę, uważaj na to. Jeśli chcesz użyć więcej niż 5 MB, zaznacz opcję Przesyłanie z możliwością wznowienia. Nr ref

Bibliografia:

• Korzystanie z funkcji Fetch
• Prześlij dane pliku

Dodany:

Aby uniknąć błędu związanego z CORS, jako inną metodą, chciałbym zaproponować użycie Web Apps jako opakowania. W tym przypadku strona klienta to Javascript. Ten JavaScript może być używany poza Google.

Stosowanie:

Wykonaj następujący przepływ.

1. Utwórz nowy projekt Google Apps Script.

Przykładowy skrypt aplikacji internetowych to Google Apps Script. Dlatego utwórz projekt Google Apps Script.

Jeśli chcesz go utworzyć bezpośrednio, uzyskaj dostęp do https://script.new/. W takim przypadku, jeśli nie jesteś zalogowany w Google, otwiera się ekran logowania. Dlatego zaloguj się do Google. W ten sposób zostaje otwarty edytor skryptów Google Apps Script.

2. Przygotuj skrypt.

Skopiuj i wklej następujący skrypt (Google Apps Script) do edytora skryptów. Ten skrypt jest przeznaczony dla aplikacji internetowych.

Strona serwera: Google Apps Script

Ten skrypt jest używany w przypadku aplikacji internetowych. W tym przypadku aplikacje internetowe są używane jako opakowanie.

function doGet(e) {
  const imageUrl = e.parameter.imageUrl;
  const res = UrlFetchApp.fetch(imageUrl);
  if (res.getResponseCode() != 200) throw new Error("Image couldn't be retrieved.");
  const blob = res.getBlob();
  const file = DriveApp.getFolderById(e.parameter.folderId).createFile(blob.setName(e.parameter.filename));
  const obj = {id: file.getId(), name: file.getName(), mimeType: file.getMimeType()};
  return ContentService.createTextOutput(JSON.stringify(obj)).setMimeType(ContentService.MimeType.JSON);
}

3. Wdróż aplikacje internetowe.

1. W edytorze skryptów otwórz okno dialogowe, wybierając „Opublikuj” -> „Wdróż jako aplikację internetową”.
2. Wybierz „Ja” dla „Uruchom aplikację jako:” .
   • W ten sposób skrypt jest uruchamiany jako właściciel.
3. Wybierz „Każdy, nawet anonimowy” dla „Kto ma dostęp do aplikacji:” .
4. Kliknij przycisk „Wdróż” jako nową „Wersja projektu”.
5. Automatycznie otwórz okno dialogowe „Wymagana autoryzacja”.
   1. Kliknij „Przejrzyj uprawnienia”.
   2. Wybierz własne konto.
   3. Kliknij „Zaawansowane” w „Ta aplikacja nie została zweryfikowana”.
   4. Kliknij „Przejdź do ### nazwa projektu ### (niebezpieczna)”
   5. Kliknij przycisk „Zezwól”.
6. Kliknij OK".
7. Skopiuj adres URL aplikacji internetowych. To jest jak https://script.google.com/macros/s/###/exec.
   • Po zmodyfikowaniu Skryptu Aplikacji Google wprowadź ponownie jako nową wersję. W ten sposób zmodyfikowany skrypt jest odzwierciedlany w aplikacjach internetowych. Proszę, uważaj na to.

4. Prześlij plik ze strony klienta na serwer.

Strona klienta: HTML i JavaScript

Ustaw adres URL swoich aplikacji internetowych na następujący skrypt. Ustaw nazwę pliku i identyfikator folderu.

const imageUrl = "###"; // Please set the URL of image.

const url = "https://script.google.com/macros/s/###/exec"; // Please set the URL of Web Apps.
const qs = new URLSearchParams({
  imageUrl: imageUrl,
  filename: "sample filename",
  folderId: "###", // Please set folder ID.
});
fetch(`${url}?${qs}`).then((res) => res.json()).then(console.log).catch(console.log);

Wynik:

Po uruchomieniu powyższego skryptu zwracana jest następująca wartość. Możesz zobaczyć zwróconą wartość w konsoli.

{
  "id": "###",
  "name": "###",
  "mimeType": "###"
}

Uwaga:

• Po zmodyfikowaniu skryptu aplikacji internetowych należy ponownie wdrożyć aplikacje internetowe jako nową wersję. W ten sposób najnowszy skrypt jest odzwierciedlany w aplikacjach internetowych. Proszę, uważaj na to.

Bibliografia:

• internetowe aplikacje
• Korzystanie z aplikacji internetowych z Google Apps Script

Answer 2

Spróbuj przesłać plik zdjęcia, używając tego fragmentu:

// download file from website 
const http  = require('https')
const fs    = require('fs')

let file    = fs.createWriteStream('Photo001.jpg')
let request = http.get(
    'https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_2x.png', 
    (response) => {
        response.pipe(file)
    })

// upload file to Google Drive
let fileMetadata = {
  'name'    : 'Photo001',
  'mimeType': 'image/jpeg'
}

let media = {
  mimeType  : 'image/jpeg',
  body      : fs.createReadStream('Photo001.jpeg')
}

function uploadFile(auth){

  const drive = google.drive({version: 'v3', auth})

  drive.files.create({
    resource: fileMetadata,
    media   : media,
    fields  : 'id'
  }, (err, res) => {
    if (err) return console.log('The API returned an error: ' + err)
  })

}

Dokumentacja

• Pliki: utwórz