Передать буфер массива JavaScript в серверное приложение
Я пытаюсь открыть средство выбора диска Google, упомянутое здесь, и после получения идентификатора файла я пытаюсь загрузить файл с типом резонанса "arraybuffer"
Я хотел бы, чтобы мои пользователи выбрали файл с диска Google с помощью средства выбора диска, и после выбора файла он должен загрузить его в папку загрузок моего сервера. Но что сейчас происходит, я могу выбрать файл и получить содержимое файла, например "webContentLink". Теперь с помощью этого webContentLink я получаю буфер массива, который мне нужно передать на мой сервер, чтобы загрузить фактический файл.
мой код
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Google Picker Example</title>
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var fileId;
// The Browser API key obtained from the Google API Console.
// Replace with your own Browser API key, or your own key.
var developerKey = 'xxxxxxxYYYYYYYY-12345678';
// The Client ID obtained from the Google API Console. Replace with your own Client ID.
var clientId = "1234567890-abcdefghijklmnopqrstuvwxyz.apps.googleusercontent.com"
// Replace with your own project number from console.developers.google.com.
// See "Project number" under "IAM & Admin" > "Settings"
var appId = "1234567890";
// Scope to use to access user's Drive items.
var scope = ['https://www.googleapis.com/auth/drive.file'];
var pickerApiLoaded = false;
var oauthToken;
// Use the Google API Loader script to load the google.picker script.
function loadPicker() {
gapi.load('client:auth2', onAuthApiLoad);
gapi.load('picker', { 'callback': onPickerApiLoad });
}
function onAuthApiLoad() {
window.gapi.auth.authorize(
{
'client_id': clientId,
'scope': scope,
'immediate': false
},
handleAuthResult);
}
function onPickerApiLoad() {
pickerApiLoaded = true;
createPicker();
}
function handleAuthResult(authResult) {
if (authResult && !authResult.error) {
oauthToken = authResult.access_token;
createPicker();
}
}
function createPicker() {
if (pickerApiLoaded && oauthToken) {
var view = new google.picker.View(google.picker.ViewId.DOCS);
view.setMimeTypes("image/png,image/jpeg,image/jpg");
var picker = new google.picker.PickerBuilder()
.enableFeature(google.picker.Feature.NAV_HIDDEN)
.enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
.setAppId(appId)
.setOAuthToken(oauthToken)
.addView(view)
.addView(new google.picker.DocsUploadView())
.setDeveloperKey(developerKey)
.setCallback(pickerCallback)
.build();
picker.setVisible(true);
}
}
function readFile(fileId, callback) {
var request = gapi.client.drive.files.get({
fileId: fileId,
alt: 'media'
})
request.then(function (response) {
console.log(response);
console.log(base64Encode(response));
if (typeof callback === "function") callback(response.body);
}, function (error) {
console.error(error)
})
return request;
}
function printFile(fileId) {
gapi.client.init({
apiKey: developerKey,
clientId: clientId,
discoveryDocs: ["https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"],
scope: 'https://www.googleapis.com/auth/drive.file'
}).then(function () {
var request = gapi.client.drive.files.get({
'fileId': fileId,
'fields' : '*'
});
request.execute(function (resp) {
console.log(resp);
downloadFile(resp);
});
});
}
function downloadFile(file, callback) {
if (file.webContentLink) {
var accessToken = oauthToken;
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://cors-anywhere.herokuapp.com/' + file.webContentLink);
xhr.setRequestHeader('Authorization', 'Bearer ' + accessToken);
xhr.responseType = 'arraybuffer';
xhr.onload = function (e) {
//console.log(base64ArrayBuffer(e.currentTarget.response));
var base64String = base64ArrayBuffer(e.currentTarget.response);
$.ajax({
type: "POST",
url: "test.aspx/AuthenticateUser",
data: JSON.stringify({
Base64: base64String
}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
if (msg.d == "True") {
console.log(msg.d);
} else {
console.log(msg.d);
}
},
error: function (msg) {
alert(msg.d);
}
});
};
xhr.onerror = function () {
alert('Download failure.');
};
xhr.send();
} else {
alert('Unable to download file.');
}
}
// A simple callback implementation.
function pickerCallback(data) {
if (data.action == google.picker.Action.PICKED) {
var fileId = data.docs[0].id;
printFile(fileId);
}
}
function base64ArrayBuffer(arrayBuffer) {
var base64 = ''
var encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
var bytes = new Uint8Array(arrayBuffer)
var byteLength = bytes.byteLength
var byteRemainder = byteLength % 3
var mainLength = byteLength - byteRemainder
var a, b, c, d
var chunk
// Main loop deals with bytes in chunks of 3
for (var i = 0; i < mainLength; i = i + 3) {
// Combine the three bytes into a single integer
chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2]
// Use bitmasks to extract 6-bit segments from the triplet
a = (chunk & 16515072) >> 18 // 16515072 = (2^6 - 1) << 18
b = (chunk & 258048) >> 12 // 258048 = (2^6 - 1) << 12
c = (chunk & 4032) >> 6 // 4032 = (2^6 - 1) << 6
d = chunk & 63 // 63 = 2^6 - 1
// Convert the raw binary segments to the appropriate ASCII encoding
base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d]
}
// Deal with the remaining bytes and padding
if (byteRemainder == 1) {
chunk = bytes[mainLength]
a = (chunk & 252) >> 2 // 252 = (2^6 - 1) << 2
// Set the 4 least significant bits to zero
b = (chunk & 3) << 4 // 3 = 2^2 - 1
base64 += encodings[a] + encodings[b] + '=='
} else if (byteRemainder == 2) {
chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1]
a = (chunk & 64512) >> 10 // 64512 = (2^6 - 1) << 10
b = (chunk & 1008) >> 4 // 1008 = (2^6 - 1) << 4
// Set the 2 least significant bits to zero
c = (chunk & 15) << 2 // 15 = 2^4 - 1
base64 += encodings[a] + encodings[b] + encodings[c] + '='
}
return base64
}
</script>
</head>
<body runat="server">
<div id="result"></div>
<script type="text/javascript" src="https://apis.google.com/js/api.js?onload=loadPicker"></script>
</body>
</html>
Я поражен этой прошедшей 1 неделей, любая помощь будет принята с благодарностью.