В этой статье показано, как загружать файлы в Google Cloud Storage с помощью Javascript только в браузере (без Node.js).
- Реализация
- Auth (OAuth2.0)
- Получение необходимой информации
- Получение токена доступа (исходный код и результат)
- Исходный код
- Результат
- Загрузка файлов в облачное хранилище (исходный код и результат)
- Исходный код
- Результат
- Типы MIME (типы носителей IANA) — HTTP | MDN
- Выгрузка объектов | Облачное хранилище | Google Cloud
- Использование Fetch API — Web API | MDN
- Использование файлов из веб-приложений — Web APIs | MDN
- <input type=»file»> — HTML: Язык разметки гипертекста | MDN
- フロントエンドJavascriptのみでCloud Storageにファイルをアップロードする
Реализация
Данный исходный код был создан на основе официальной справки GCP (Google Cloud Platform). В этой статье используется JSON API, предоставляемый GCP, и OAuth2.0.
Auth (OAuth2.0)
Цель этого раздела — получить токен доступа для доступа к облачному хранилищу. Мы получим его через Google OAuth2.0. «OAuth 2.0 for Client-side Web Applications» показывает нам необходимый исходный код для авторизации. Это ссылка для создания следующего исходного кода.
Получение необходимой информации
Чтобы использовать Cloud Storage через JSON API, необходимо получить необходимую информацию. Это следующие три элемента.
- Идентификатор клиента
- URL перенаправления
- Область применения .
Обратитесь к разделу «Как получить Google Client ID и Client Secret?», если вы не знаете, как их получить. Кроме того, сделайте «Экран согласия OAuth». Пожалуйста, выберите подходящую область действия в соответствии с «
Аутентификация облачного хранилища».
Получение токена доступа (исходный код и результат)
В этом разделе представлен исходный код, который позволяет получить только маркер доступа. Он предоставляет функцию для получения маркера доступа через экран согласия OAuth, когда пользователь нажимает кнопку «Получить маркер доступа».
Исходный код
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="/index.js" defer></script>
</head>
<body>
<button onclick="oauthSignIn()">Get Access Token</button>
<form id="formElem">
<input type="file" id="file-upload" name="file-upload" />
<input type="submit" id="submit-button" disabled />
</form>
</body>
</html>
index.js
/**
* Extract the access token from the URL
*/
for (value of location.hash.split("&")) {
if (value.indexOf("access_token=") === 0) {
const access_token = value.split("=")[1];
const ele = document.createElement("p");
ele.textContent = "Your access token is '" + access_token + "'.";
document.body.appendChild(ele);
}
}
/**
* The following source code is from the page.
* https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow#oauth-2.0-endpoints
*/
/*
* Create a form to request an access token from Google's OAuth 2.0 server.
*/
function oauthSignIn() {
// Google's OAuth 2.0 endpoint for requesting an access token
var oauth2Endpoint = "https://accounts.google.com/o/oauth2/v2/auth";
// Create <form> element to submit parameters to OAuth 2.0 endpoint.
var form = document.createElement("form");
form.setAttribute("method", "GET"); // Send as a GET request.
form.setAttribute("action", oauth2Endpoint);
// Parameters to pass to OAuth 2.0 endpoint.
var params = {
client_id: [Client ID you set up before section],
redirect_uri: [Refirect URL you set up before section, for example, "http://localhost:3000"],
response_type: "token",
scope: [Scope you set up before section, for example, "https://www.googleapis.com/auth/devstorage.read_write"],
include_granted_scopes: "true",
state: "pass-through value",
};
// Add form parameters as hidden input values.
for (var p in params) {
var input = document.createElement("input");
input.setAttribute("type", "hidden");
input.setAttribute("name", p);
input.setAttribute("value", params[p]);
form.appendChild(input);
}
// Add form to page and submit it to open the OAuth 2.0 endpoint.
document.body.appendChild(form);
form.submit();
}
Результат
Загрузка файлов в облачное хранилище (исходный код и результат)
В этом разделе показано, как загружать файлы в Cloud Storage, используя токен доступа, полученный в предыдущем разделе. Вам необходимо создать новое хранилище в Cloud Console. Если вы не знаете, как его создать, обратитесь к разделу «Создание ведер хранения».
Исходный код
HTML-файл такой же, как и раньше. Исправьте исходный код Javascript следующим образом.
index.js
const bucketName = [Bucket name you made];
const clientID = [Client ID you set up];
const redirectURL = [Redirect URL];
const scope = [Scope];
let accessToken = null;
/**
* Extract the access token from the redirect URL
*/
for (value of location.hash.split("&")) {
if (value.indexOf("access_token=") === 0) {
const access_token = value.split("=")[1];
const ele = document.createElement("p");
ele.textContent = "Your access token is '" + access_token + "'.";
accessToken = access_token;
document.body.appendChild(ele);
document.getElementById("submit-button").disabled = false;
}
}
/**
* Upload file
*/
formElem.onsubmit = async (e) => {
e.preventDefault();
const file = document.getElementById("file-upload");
const filename = file.value.split("\").slice(-1)[0];
console.log("File Name: " + JSON.stringify(filename));
const extension = filename.split(".").slice(-1)[0].toLocaleLowerCase();
let contentType = null;
// Detect Content Type
if (extension === "png") {
contentType = "image/png";
} else if (extension === "jpg" || extension === "jpeg") {
contentType = "image/jpeg";
} else if (extension === "svg") {
contentType = "image/svg+xml";
} else if (extension === "mpeg") {
contentType = "video/mpeg";
} else if (extension === "webm") {
contentType = "video/webm";
} else {
alert("This file is invalid.");
}
// Load file and upload it
if (contentType) {
const reader = new FileReader();
reader.addEventListener("load", async (event) => {
const bytes = event.target.result;
let response = await fetch(
`https://storage.googleapis.com/upload/storage/v1/b/${bucketName}/o?uploadType=media&name=${filename}`,
{
method: "POST",
headers: {
"Content-Type": contentType,
Authorization: `Bearer ${accessToken}`,
},
body: bytes,
}
);
let result = await response.json();
if (result.mediaLink) {
alert(
`Success to upload ${filename}. You can access it to ${result.mediaLink}`
);
} else {
alert(`Failed to upload ${filename}`);
}
});
reader.readAsArrayBuffer(file.files[0]);
}
};
/**
* The following Source code originated from https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow#oauth-2.0-endpoints
*/
/*
* Create a form to request an access token from Google's OAuth 2.0 server.
*/
function oauthSignIn() {
// Google's OAuth 2.0 endpoint for requesting an access token
var oauth2Endpoint = "https://accounts.google.com/o/oauth2/v2/auth";
// Create <form> element to submit parameters to OAuth 2.0 endpoint.
var form = document.createElement("form");
form.setAttribute("method", "GET"); // Send as a GET request.
form.setAttribute("action", oauth2Endpoint);
// Parameters to pass to OAuth 2.0 endpoint.
var params = {
client_id: clientID,
redirect_uri: redirectURL,
response_type: "token",
scope: scope,
include_granted_scopes: "true",
state: "pass-through value",
};
// Add form parameters as hidden input values.
for (var p in params) {
var input = document.createElement("input");
input.setAttribute("type", "hidden");
input.setAttribute("name", p);
input.setAttribute("value", params[p]);
form.appendChild(input);
}
// Add form to page and submit it to open the OAuth 2.0 endpoint.
document.body.appendChild(form);
form.submit();
}
Результат
Я привожу список ссылок ниже.
- Типы MIME
Типы MIME (типы носителей IANA) — HTTP | MDN
Медиа-тип (также известный как многоцелевое расширение интернет-почты или MIME-тип) указывает на характер и формат документа, файла или набора байтов. Типы MIME определены и стандартизированы в RFC 6838 IETF.
developer.mozilla.org - Загрузка файла в облачное хранилище с помощью
curl
Выгрузка объектов | Облачное хранилище | Google Cloud
Описывает опции для загрузки объектов в ведро Cloud Storage. Объект состоит из данных, которые вы хотите сохранить, вместе с любыми связанными метаданными. Вы можете загружать объекты, используя прилагаемый код и примеры API.
cloud.google.com Использование Fetch API — Web API | MDN
Fetch API предоставляет интерфейс JavaScript для доступа и манипулирования частями HTTP-конвейера, такими как запросы и ответы. Он также предоставляет глобальный метод fetch(), который обеспечивает простой и логичный способ асинхронного получения ресурсов по сети.
developer.mozilla.org -
Использование файлов из веб-приложений — Web APIs | MDN
Используя File API, который был добавлен в DOM в HTML5, теперь веб-контент может попросить пользователя выбрать локальные файлы, а затем прочитать их содержимое. Этот выбор может быть сделан либо с помощью элемента HTML <input type=»file»>, либо путем перетаскивания.
developer.mozilla.org <input type=»file»> — HTML: Язык разметки гипертекста | MDN
<input> элементы с type=»file» позволяют пользователю выбрать один или несколько файлов из хранилища устройства. После выбора файлы могут быть загружены на сервер с помощью отправки формы или обработаны с помощью кода JavaScript и File API.
developer.mozilla.org
Оригинал статьи приведен ниже. Эта статья была переведена с японского на английский.
フロントエンドJavascriptのみでCloud Storageにファイルをアップロードする
zenn.dev