Donc, fondamentalement, la tâche est très simple mais je n'ai trouvé aucune solution réalisable à mon problème. J'ai un énorme script de téléchargement sur mon site Web (actuellement localhost), mais réduisons toute la complexité à ce qui est nécessaire.
Maintenant, le problème est que j'ai déjà le formulaire sur mon site Web et je ne veux pas que le formulaire dans script.google .com soit un code HTML supplémentaire, je souhaite transférer ma saisie utilisateur vers Google App Script, puis le télécharger. sur Google Drive et en renvoyant l'URL de mon site Web, je peux l'enregistrer dans un var.
Mon problème en ce moment est que je n'arrive pas à tout mettre en place.
Voici le formulaire sur mon site internet (simplifié) :
<form name="myForm" method="post">
<!-- <form name="first-form"> -->
<input type="text" placeholder="Name" id="myName">
<input type="file" name="myFile" id="myFile">
<button onclick="UploadFile()" type="submit">submit</button>
</form>
Alors, comment puis-je télécharger mes informations dans Google Drive et obtenir les résultats ? Comment puis-je transférer des données depuis Google App Script sans utiliser d'iFrames ou quoi que ce soit d'autre ?
Merci !
**** Exemple fonctionnel si le HTML est dans script.google .com ****
GS
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('forms.html').setTitle("Google File Upload by CTRLQ.org");
}
function uploadFileToGoogleDrive(data, file, name, email) {
try {
var dropbox = "Received Files";
var folder, folders = DriveApp.getFoldersByName(dropbox);
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropbox);
}
/* Credit: www.labnol.org/awesome */
var contentType = data.substring(5,data.indexOf(';')),
bytes = Utilities.base64Decode(data.substr(data.indexOf('base64,')+7)),
blob = Utilities.newBlob(bytes, contentType, file),
file = folder.createFolder([name, email].join(" ")).createFile(blob);
return "OK";
} catch (f) {
return f.toString();
}
}
html dans apps.googlescript
<!DOCTYPE html>
<html>
<head>
<base target="_blank">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Google File Upload by CTRLQ.org</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<style>
.disclaimer{width: 480px; color:#646464;margin:20px auto;padding:0 16px;text-align:center;font:400 12px Roboto,Helvetica,Arial,sans-serif}.disclaimer a{color:#009688}#credit{display:none}
</style>
</head>
<body>
<!-- Written by Amit Agarwal amit@labnol.org -->
<form class="main" id="form" novalidate="novalidate" style="max-width: 480px;margin: 40px auto;">
<div id="forminner">
<div class="row">
<div class="col s12">
<h5 class="center-align teal-text">Upload Files to my Google Drive</h5>
<p class="disclaimer">This <a href="http://www.labnol.org/internet/file-upload-google-forms/29170/">File Upload Form</a> (<a href="https://youtu.be/C_YBBupebvE">tutorial</a>) is powered by <a href="https://ctrlq.org/code/19747-google-forms-upload-files" target="_blank">Google Scripts</a></p>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="name" type="text" name="Name" class="validate" required="" aria-required="true">
<label for="name">Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" name="Email" class="validate" required="" aria-required="true">
<label for="email">Email Address</label>
</div>
</div>
<div class="row">
<div class="file-field input-field col s12">
<div class="btn">
<span>File</span>
<input id="files" type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Select a file on your computer">
</div>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<button class="waves-effect waves-light btn submit-btn" type="submit" onclick="submitForm(); return false;">Submit</button>
</div>
</div>
<div class="row">
<div class="input-field col s12" id = "progress">
</div>
</div>
</div>
<div id="success" style="display:none">
<h5 class="left-align teal-text">File Uploaded</h5>
<p>Your file has been successfully uploaded.</p>
<p>The <a href="http://www.labnol.org/internet/file-upload-google-forms/29170/">pro version</a> (see <a href="">demo form</a>) includes a visual drag-n-drop form builder, CAPTCHAs, the form responses are saved in a Google Spreadsheet and respondents can upload multiple files of any size.</p>
<p class="center-align"><a class="btn btn-large" href="https://gum.co/GA14?wanted=true" target="_blank">Upgrade to Pro</a></p>
</div>
</form>
<div class="fixed-action-btn horizontal" style="bottom: 45px; right: 24px;">
<a class="btn-floating btn-large red">
<i class="large material-icons">menu</i>
</a>
<ul>
<li><a class="btn-floating red" href="https://gum.co/GA14" target="_blank" title="Buy License - File Upload Form"><i class="material-icons">monetization_on</i></a></li>
<li><a class="btn-floating blue" href="https://youtu.be/C_YBBupebvE" target="_blank" title="Video Tutorial"><i class="material-icons">video_library</i></a></li>
<li><a class="btn-floating green" href="http://www.labnol.org/internet/file-upload-google-forms/29170/" target="_blank" title="How to Create File Upload Forms"><i class="material-icons">help</i></a></li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<script src="https://gumroad.com/js/gumroad.js"></script>
<script>
var file,
reader = new FileReader();
reader.onloadend = function(e) {
if (e.target.error != null) {
showError("File " + file.name + " could not be read.");
return;
} else {
google.script.run
.withSuccessHandler(showSuccess)
.uploadFileToGoogleDrive(e.target.result, file.name, $('input#name').val(), $('input#email').val());
}
};
function showSuccess(e) {
if (e === "OK") {
$('#forminner').hide();
$('#success').show();
} else {
showError(e);
}
}
function submitForm() {
var files = $('#files')[0].files;
if (files.length === 0) {
showError("Please select a file to upload");
return;
}
file = files[0];
if (file.size > 1024 * 1024 * 5) {
showError("The file size should be < 5 MB. Please <a href='http://www.labnol.org/internet/file-upload-google-forms/29170/' target='_blank'>upgrade to premium</a> for receiving larger files in Google Drive");
return;
}
showMessage("Uploading file..");
reader.readAsDataURL(file);
}
function showError(e) {
$('#progress').addClass('red-text').html(e);
}
function showMessage(e) {
$('#progress').removeClass('red-text').html(e);
}
</script>
</body>
</html>
Comme suggéré, je décrirai le processus ici.
Nous sommes donc sur le site : www.example.com, et avons un formulaire avec un champ de saisie de texte et un champ fichier. Disons que nous mettons une image et appelons-la un exemple. Maintenant, si nous appuyons sur Soumettre, je souhaite télécharger l'image sur Google Drive sans oAuth (c'est pourquoi nous devons utiliser Google App Script ici) et lui donner le nom que nous avons tapé dans le champ de texte. Une fois le téléchargement terminé, je souhaite que l'URL de l'image Google Drive soit renvoyée vers le site Web afin que le formulaire puisse continuer à utiliser ces informations. Je souhaite enregistrer l'URL renvoyée dans une variable, puis la sauvegarder dans la base de données. C'est pourquoi je dois renvoyer les résultats sur mon site Web.
La solution ressemble donc à ceci :
Entrez les informations dans le formulaire sur le site Web -> Redirection vers le script de l'application Google : obtenez les informations du champ du formulaire du site Web et téléchargez le fichier sur Google Drive et nommez-le entrée de texte -> Utiliser l'URL de Google Drive comme résultat final -> le résultat final de l'URL sur le site Web-> Enregistrez le résultat de l'URL dans var et continuez à effectuer les opérations à partir de la fonction sur le site Web-> Enfin, enregistrez les informations dans var dans la base de données->
------------------------------------------------- ---------- - Editeur : -------------------
Grâce à @Tanaike, je suis plus proche de mon objectif de défi, donc juste pour voir où je suis coincé, je copie ma question maintenant :
J'ai obtenu le formulaire en utilisant le script de votre exemple :
<form id="form">
<input name="file" id="uploadfile" type="file">
<input name="filename" id="filename" type="text">
<input id="submit" type="submit">
</form>
<script>
const form = document.getElementById('form');
form.addEventLis tener('submit', e => {
e.preventDefault();
const file = form.file.files[0];
const fr = new FileReader();
fr.readAsArrayBuffer(file);
fr.onload = f => {
const url = "https://script.google .com/macros/s/###/exec"; // <--- Please set the URL of Web Apps.
const qs = new URLSearchParams({filename: form.filename.value || file.name, mimeType: file.type});
fetch(`${url}?${qs}`, {method: "POST", body: JSON.stringify([...new Int8Array(f.target.result)])})
.then(res => res.json())
.then(e => console.log(e)) // <--- You can retrieve the returned value here.
.catch(err => console.log(err));
}
});
</script>
Pour Google Script :
function doPost(e) {
// const folderId = "###"; // Folder ID which is used for putting the file, if you need.
const blob = Utilities.newBlob(JSON.parse(e.postData.contents), e.parameter.mimeType, e.parameter.filename);
const file = DriveApp.getFolderById(folderId || "root").createFile(blob);
const responseObj = {filename: file.getName(), fileId: file.getId(), fileUrl: file.getUrl()};
return ContentService.createTextOutput(JSON.stringify(responseObj)).setMimeType(ContentService.MimeType.JSON);
}
Maintenant, lorsque j'essaie de télécharger quelque chose, j'obtiens l'erreur suivante : La politique CORS ne peut pas être obtenue. J'ai donc changé cette partie par la suivante et ajouté le mode sans cors : const qs = new URLSearchParams({filename: form.filename.value || file.name, mimeType: file.type});
fetch(`${url}?${qs}`, {method: "POST", mode: "no-cors", body: JSON.stringify([...new Int8Array(f.target.result)])})
Cela fonctionne. La deuxième tentative de téléchargement du fichier entraîne l'erreur suivante :
Il dit : syntax错误：输入意外结束
J'ai donc changé cette ligne et supprimé les crochets de res.json
JSON.stringify([...new Int8Array(f.target.result)])})
.then(res => res.json)
La troisième fois que j'ai essayé de télécharger un fichier valide, les résultats de la console sont les suivants :
ƒ json() { [native code] }
Mais il n'y a aucun fichier téléchargé dans Google Drive. Il me manque quelque chose quelque part. Peut-être devrions-nous créer un dossier et y placer les fichiers.
Oh, encore une info : lorsque j'exécute la fonction doPost dans le script de l'application Google, cela dit :
TypeError: Cannot read property 'postData' of undefined (line 13
Modifier 2 ----------------------------------------------- --- ------
J'ai ajouté https://drive.google .com/uc?export=download&id=###fileId### à votre code et tout fonctionne bien. Le fichier est en cours de téléchargement.
Supposons que nous téléchargeons le fichier test.mp3 et que nous le nommions testdata.
Voici ce que nous avons reçu :
{
"filename": "testdata",
"fileId": "###some id##",
"fileUrl": "https://drive.google .com/uc?export=download&id=###fileId###"
}
Maintenant, lorsque j'ouvre l'URL du fichier, le navigateur télécharge le fichier mais son nom est : testdata au lieu de testdata.mp3. La fin du type de fichier est manquante.
Deuxième tâche : Si vous cliquez sur le lien, je souhaite ouvrir le fichier dans le navigateur, par exemple, lorsqu'il s'agit d'un fichier mp3, je souhaite que vous jouiez le son dans la vue Web, comme ici : https:// fichiers .freemusicarchive .org/storage-freemusicarchive-org/music/Creative_Commons/Dead_Combo/CC_Affiliates_Mixtape_1/Dead_Combo_-_01_-_Povo_Que_Cas_Decalo.mp3
J'espère que vous pourrez me guider !
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
https://stackoverflow.com/a/63391363/1585523 Beaucoup de conseils utiles dans les réponses ! merci pour votre partage. En plus des fichiers POST, nous pouvons également utiliser
Sur le client : index.html
google.script.run.withSuccessHandler(fileName => {}).withFailureHandler(error => {}).saveInDrive(fileAsByteArray);Sur le serveur : Code.gs
function saveInDrive(f) { const blob = Utilities.newBlob(f, "image/jpeg", "some-name"); const file = DriveApp.getFolderById("root").createFile(blob); return file.getName() }Vous pouvez même utiliser cette méthode pour échanger des types complexes tels que des objets JS avec des informations binaires comme valeurs.
Je crois que vos objectifs sont les suivants.
Dans ce cas, je pense qu'une application Web créée à l'aide de Google Apps Script peut atteindre votre objectif.
Utilisation :
Veuillez suivre le processus suivant.
1. Créez un nouveau projet pour Google Apps Script.
L'exemple de script pour Web Apps est Google Apps Script. Alors, créez un projet Google Apps Script.
Si vous souhaitez créer directement, veuillez visiter https://script.new/. Dans ce cas, si vous n'êtes pas déjà connecté à Google, l'écran de connexion s'ouvrira. Veuillez donc vous connecter à Google. Cela ouvrira l'éditeur de script Google Apps Script.
2. Préparez le script.
Veuillez copier et coller le script suivant (Google Apps Script) dans l'éditeur de script. Ce script convient aux applications Web.
Côté serveur : Google Apps Script
Veuillez définir l'ID du dossier dans lequel vous souhaitez placer le fichier.
function doPost(e) { const folderId = "root"; // Or Folder ID which is used for putting the file instead of "root", if you need. const blob = Utilities.newBlob(JSON.parse(e.postData.contents), e.parameter.mimeType, e.parameter.filename); const file = DriveApp.getFolderById(folderId).createFile(blob); const responseObj = {filename: file.getName(), fileId: file.getId(), fileUrl: file.getUrl()}; return ContentService.createTextOutput(JSON.stringify(responseObj)).setMimeType(ContentService.MimeType.JSON); }3. Déployer des applications Web.
https://script.google.com/macros/s/###/exec.4. Téléchargez des fichiers du client vers le serveur.
Client : HTML et Javascript
Veuillez définir l'URL de votre application Web sur le script suivant.
ssscccRésultat :
Lors de l'exécution du script ci-dessus, les valeurs suivantes seront renvoyées. A partir de là, vous pouvez récupérer l'URL du fichier.
{ "filename": "### inputted filename ###", "fileId": "###", "fileUrl": "https://drive.google.com/file/d/###/view?usp=drivesdk" }Remarque :
Référence :