Cara mengunggah file ke Google Drive dengan JavaScript

Programming

oleh Vinci terakhir diubah pada 15 Agustus 2022.

Artikel ini memberikan contoh skrip untuk mempelajari cara mengunggah file ke Google Drive melalui JavaScript.

Membuat solusi JavaScript untuk proses unggah file Drive sangat sederhana. menggunakan cerewet library untuk mengimplementasikan fitur ini di sisi klien.

Dalam tutorial yang baru-baru ini diposting, kami membuat kode sampel untuk mencapai unggahan Google Drive di PHP.

prasyarat

Memerlukan dua pustaka yang dimuat untuk mengakses JavaScript melalui unggahan Google Drive.

  1. Pustaka masuk Google untuk autentikasi.
  2. Pustaka klien Google API untuk mengakses API berbasis JavaScript.

Selain itu, buat aplikasi API dan dapatkan kredensial.

  1. Aktifkan API Google Drive.
  2. Dapatkan kunci API dan ID klien web dari Google Developer Console.

Buka Konsol Pengembang Google dan klik Buat Kredensial untuk menyiapkannya Kunci API Dan ID klien web. Kami telah melihat cara mendapatkan kunci Google API dari konsol pengembang di artikel sebelumnya.

Langkah-langkah mengunggah file ke Google Drive dengan JavaScript

Berikut adalah langkah-langkah untuk mengimplementasikan upload file dari aplikasi ke Google Drive menggunakan JavaScript.

  1. Dengan membuktikan identitas Anda melalui tantangan Google API Login Library (GSI).
  2. Dapatkan kode akses.
  3. Siapkan permintaan upload dengan menentukan direktori target Google Drive (opsional).
  4. Tekan titik akhir Google Drive V3 untuk mengirim konten file dan metadata melalui JavaScript FormData.

Izin dan unggah ke Google Drive

Contoh kode untuk mengunggah file ke Drive

Kode di bawah ini menunjukkan antarmuka laman landas dalam HTML dan aset JavaScript yang dibuat untuk mengunggah file ke Google Drive.

Kode HTML untuk menampilkan kontrol untuk meminta izin dan mengunggah

Saat mendarat di halaman beranda, itu menunjukkan Lisensi Tombol di antarmuka pengguna Mengklik tombol ini akan menampilkan kotak dialog hamparan masuk Google untuk melanjutkan permintaan izin.

Pada titik ini, pengguna harus membuktikan identitasnya untuk mengakses direktori Drive.

index.php

<!DOCTYPE html>
<html>
<head>
<title>Google Drive upload using JavaScript</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="https://phppot.com/javascript/google-drive-upload-javascript/css/style.css" />
<link rel="stylesheet" type="text/css" href="css/form.css" />
<style>
#content {
    display: none;
}
</style>
</head>
<body>
    <!--Add HTML buttons to sign in and sign out-->
    <div class="phppot-container">

        <h1>Google Drive upload using JavaScript</h1>
        <div>
            <div class="row">
                <input type="button" id="authorize_button"
                    onclick="handleAuthClick()" value="Authorize"> <input
                    type="button" id="signout_button"
                    onclick="handleSignoutClick()" value="Sign Out">

            </div>
        </div>
        <div id="content" class="success message"><?php if(isset($message)) { echo $message; } ?></div>
    </div>
    <script type="text/javascript" src="./js/gapi-upload.js"></script>
    <script async defer src="https://apis.google.com/js/api.js"
        onload="gapiLoaded()"></script>
    <script async defer src="https://accounts.google.com/gsi/client"
        onload="gisLoaded()"></script>
</body>
</html>

JavaScript untuk mengelola otorisasi pengguna dan urutan pengunggahan file

Kode ini menginisialisasi JavaScript cerewet Dan gsi Dalam satu panggilan setelah memuat pustaka javascript google ini.

Ini juga berisi penangan untuk meluncurkan permintaan API untuk tindakan berikut.

  1. Lisensi Google dengan bukti identitas.
  2. Unggah file dengan kata sandi.
  3. menyegarkan cerewet Unggah tindakan setelah otorisasi.
  4. Keluar.

Kode JavaScript ini memerlukan konfigurasi kredensial otorisasi. Sebelum menjalankan contoh ini, setel CLIENT_ID dan API_KEY dalam skrip ini.

Dalam contoh ini, ini menetapkan ID folder Google Drive untuk unggahan file melalui JavaScript. Konfigurasi ini opsional. Jika tidak ada target yang diperlukan, hapus parameter dari larik metafile.

js/gapi-upload.js

// TODO: Set the below credentials
const CLIENT_ID = 'SET-YOUR-CLIENT-ID';
const API_KEY = 'SET-YOUR-API-KEY';

// Discovery URL for APIs used by the quickstart
const DISCOVERY_DOC = 'https://www.googleapis.com/discovery/v1/apis/drive/v3/rest';

// Set API access scope before proceeding authorization request
const SCOPES = 'https://www.googleapis.com/auth/drive.file';
let tokenClient;
let gapiInited = false;
let gisInited = false;

document.getElementById('authorize_button').style.visibility = 'hidden';
document.getElementById('signout_button').style.visibility = 'hidden';

/**
 * Callback after api.js is loaded.
 */
function gapiLoaded() {
	gapi.load('client', initializeGapiClient);
}

/**
 * Callback after the API client is loaded. Loads the
 * discovery doc to initialize the API.
 */
async function initializeGapiClient() {
	await gapi.client.init({
		apiKey: API_KEY,
		discoveryDocs: [DISCOVERY_DOC],
	});
	gapiInited = true;
	maybeEnableButtons();
}

/**
 * Callback after Google Identity Services are loaded.
 */
function gisLoaded() {
	tokenClient = google.accounts.oauth2.initTokenClient({
		client_id: CLIENT_ID,
		scope: SCOPES,
		callback: '', // defined later
	});
	gisInited = true;
	maybeEnableButtons();
}

/**
 * Enables user interaction after all libraries are loaded.
 */
function maybeEnableButtons() {
	if (gapiInited && gisInited) {
		document.getElementById('authorize_button').style.visibility = 'visible';
	}
}

/**
 *  Sign in the user upon button click.
 */
function handleAuthClick() {
	tokenClient.callback = async (resp) => {
		if (resp.error !== undefined) {
			throw (resp);
		}
		document.getElementById('signout_button').style.visibility = 'visible';
		document.getElementById('authorize_button').value="Refresh";
		await uploadFile();

	};

	if (gapi.client.getToken() === null) {
		// Prompt the user to select a Google Account and ask for consent to share their data
		// when establishing a new session.
		tokenClient.requestAccessToken({ prompt: 'consent' });
	} else {
		// Skip display of account chooser and consent dialog for an existing session.
		tokenClient.requestAccessToken({ prompt: '' });
	}
}

/**
 *  Sign out the user upon button click.
 */
function handleSignoutClick() {
	const token = gapi.client.getToken();
	if (token !== null) {
		google.accounts.oauth2.revoke(token.access_token);
		gapi.client.setToken('');
		document.getElementById('content').style.display = 'none';
		document.getElementById('content').innerHTML = '';
		document.getElementById('authorize_button').value="Authorize";
		document.getElementById('signout_button').style.visibility = 'hidden';
	}
}

/**
 * Upload file to Google Drive.
 */
async function uploadFile() {
	var fileContent="Hello World"; // As a sample, upload a text file.
	var file = new Blob([fileContent], { type: 'text/plain' });
	var metadata = {
		'name': 'sample-file-via-js', // Filename at Google Drive
		'mimeType': 'text/plain', // mimeType at Google Drive
		// TODO [Optional]: Set the below credentials
		// Note: remove this parameter, if no target is needed
		'parents': ['SET-GOOGLE-DRIVE-FOLDER-ID'], // Folder ID at Google Drive which is optional
	};

	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', file);

	var xhr = new XMLHttpRequest();
	xhr.open('post', 'https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart&fields=id');
	xhr.setRequestHeader('Authorization', 'Bearer ' + accessToken);
	xhr.responseType="json";
	xhr.onload = () => {
		document.getElementById('content').innerHTML = "File uploaded successfully. The Google Drive file id is <b>" + xhr.response.id + "</b>";
		document.getElementById('content').style.display = 'block';
	};
	xhr.send(form);
}

Jawaban unggah JavaScript Google Drive

Setelah otorisasi, itu memanggil JavaScript unggah file() Ketuk Google Drive V3 API untuk mengirim file biner.

Gambar di bawah ini menunjukkan ID file Google Drive yang diunggah dalam pesan sukses.

Setelah masuk, UI halaman arahan akan menampilkan opsi Keluar. Ini juga menunjukkan A menyegarkan Tekan untuk memulai kembali proses upload jika ada masalah dalam upload.

Konfirmasi unggahan file dengan ID file Google Drive
Unduh

Kembali ke atas


Source link

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.