Allow plusieurs fichiers Télécharger sur Google Apps Script

QuestionAllow plusieurs fichiers Télécharger sur Google Apps Script

Comment puis-je modifier ce script pour permettre plusieurs fichiers à être téléchargés ou même fichiers de plus de 5 Mo?

scénario actuel:

<!-- Written by Amit Agarwal [email protected] --> 

<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">Submit My Article</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>) 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">Article Headline</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"><a href="https://www.google.com.tw/search?newwindow=1&rlz=1C1NHXL_zh-TWTW740TW740&q=byline+%E4%B8%AD%E6%96%87&oq=byline+%E4%B8%AD%E6%96%87&gs_l=psy-ab.3..0j0i8i10i30k1.13478.26153.0.27447.10.9.1.0.0.0.139.542.8j1.9.0....0...1.1j4.64.psy-ab..0.6.346...0i67k1j0i22i30k1j33i160k1.7bxnoHhXH84">Byline</a> (English, Chinese and/or <a href="https://www.google.com.tw/search?newwindow=1&rlz=1C1NHXL_zh-TWTW740TW740&q=pseudonym+%E4%B8%AD%E6%96%87&oq=pseudonym+%E4%B8%AD%E6%96%87&gs_l=psy-ab.3..0.2596.6799.0.7633.14.10.4.0.0.0.95.562.10.10.0....0...1.1j4.64.psy-ab..0.10.388...0i22i30k1j33i160k1.YTjT9Ex_16I">Pseudonym</a>)</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 to Upload"> 
     </div> 
     </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 to Upload"> 
     </div> 
     </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 to Upload"> 
     </div> 
     </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 to Upload"> 
     </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>

Notes Contexte et présentation d'excuses

Salut, tous,

Je me rends compte que cette question peut être déjà répondu, mais S'il vous plait, supportez-moi car je ne suis pas programmeur et que je n'ai pas écrit ce script moi-même, donc je ne suis pas sûr de savoir quelle réponse précédente peut s'appliquer à ma question. Cela étant dit, je suis plus qu'heureux de supprimer ma question ou de l'avoir fermé en double si quelqu'un pouvait simplement me pointer dans la bonne direction. Enfin, je ne suis pas marié à ce script, donc si quelqu'un a un meilleur script pour suggérer qu'il a toutes les fonctionnalités (téléchargement de fichiers multiples, aucune limite de taille de fichier), je suis ouvert aux suggestions.

Je suis également prêt à utiliser tout ce qui me permettrait de télécharger sur mon Google Drive aussi longtemps que c'est gratuit car nous sommes une organisation bénévole sans fonds et c'est juste pour une fonctionnalité permettant à nos membres de soumettre leur articles pour le bulletin de notre organisation.

Merci et désolé encore pour la question (possible) en double!

Source

2017-08-06 Teacher KSHuang

Vous pouvez utiliser Google Drive Picker, qui n'a aucune limite de téléchargement pour les tailles de fichier. Avant d'utiliser ce code, vous devez effectuer une configuration.

Dans l'éditeur de script, sélectionnez Ressources> Developers Console Project.Enable Drive Api. Après cela, cliquez sur la console de l'API Google. Il redirigera vers votre page API Manager.
Ensuite, cliquez sur Activer l'API.
Dans la zone de filtre, tapez "sélecteur", puis sélectionnez "API Google Picker"
Sur l'écran suivant, cliquez sur Activer l'API.
Dans la navigation de gauche de la console, cliquez sur Informations d'identification.
Puis cliquez sur "Créer les informations d'identification" puis sur la clé API.
Une fois la clé API créée, modifiez-la en cliquant sur l'icône en forme de crayon.
changer ensuite l'option « restriction clé » à la rubrique « Accepter les demandes de ces référants HTTP (sites web) », d'ajouter ces URL comme référants et puis cliquez sur Créer:
* .google.com
* .googleusercontent. com
Copiez la clé API et collez-la dans le code ci-dessous.var DEVELOPER_KEY="key" Créer également un dossier dans google drive où tous les pièces jointes seront téléchargés.

Une fois que le dossier du lecteur est créé, ajoutez l'identifiant respectif du dossier à var uploadview = new google.picker.DocsUploadView().setParent('<<Drive API>>');

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <style> 
    #attachmentTable{ 
    background: white; 
    } 
    tr th,tr td{ 
    text-align:center; 
    } 
</style> 
</head> 
<body style='font-family: cursive;'> 
    <div> 
    <center><button onclick='getOAuthToken()' style="margin-top:50px;outline:0;" class="btn btn-success">Upload File(s)</button></center> 
    <div class='table-responsive' style="display:none;" id="attachmentTableDiv"> 
    <table id="attachmentTable" class="table table-bordered" style="width:900px;margin:20px auto;float:none;"> 
     <thead> 
     <tr style="background:#f1f1f1;"> 
      <th>Title</th> 
      <th>ID</th> 
      <th>URL</th> 
      <th>Date Created</th> 
      <th>Download</th> 
     </tr> 
     </thead> 
     <tbody> 

     </tbody> 
    </table> 
    </div> 
    </div> 
    <script> 
    var DEVELOPER_KEY = '<<YOUR API KEY>>'; 
    var pickerApiLoaded = false; 

    /** 
    * Loads the Google Picker API. 
    */ 
    function onApiLoad() { 
     gapi.load('picker', {'callback': function() { 
     pickerApiLoaded = true; 
     }}); 
    } 


    function getOAuthToken() { 
     google.script.run.withSuccessHandler(createPicker).getOAuthToken(); 
    } 


    function createPicker(token) { 
     if (pickerApiLoaded && token) { 
     // var all   = new google.picker.DocsView(google.picker.ViewId.DOCS); //To upload from Google Drive 
     var uploadview = new google.picker.DocsUploadView().setParent('<<Drive API>>'); //To upload from local machine..Add you google drive folder 
     var picker = new google.picker.PickerBuilder() 
      .addView(uploadview) 
      //.addView(all) 
      .hideTitleBar() 
      //.setLocale('nl') //--Regional language settings 
      //.enableFeature(google.picker.Feature.NAV_HIDDEN) 
      .setOAuthToken(token) 
      .setSize(536, 350) 
      .setDeveloperKey(DEVELOPER_KEY) 
      .setCallback(pickerCallback) 
      .setOrigin(google.script.host.origin) 
      .enableFeature(google.picker.Feature.MULTISELECT_ENABLED) 
      .build(); 
     picker.setVisible(true); 
     } else { 
     showError('Unable to load the file picker.'); 
     } 
    } 

    /** 
    * A callback function that extracts the chosen document's metadata from the response object. 
    */ 
    function pickerCallback(data) { 
     var action = data[google.picker.Response.ACTION]; 
     if (action == google.picker.Action.PICKED) { 
     for(var i in data[google.picker.Response.DOCUMENTS]){ 
     var doc = data[google.picker.Response.DOCUMENTS][i]; 
     var id = doc[google.picker.Document.ID]; 
     var url = doc[google.picker.Document.URL]; 
     var title = doc[google.picker.Document.NAME]; 
     var dateCreated = doc[google.picker.Document.LAST_EDITED_UTC]; 
     var date = new Date(dateCreated); 
     date=date.toLocaleString(); 
     $('#attachmentTable tbody').append("<tr><td>"+title+"</td><td>"+id+"</td><td><a href='"+url+"' target='_blank'>Link</a></td><td>"+date+"</td><td><a href='https://drive.google.com/drive/uc?export=download&id="+id+"'><i class='glyphicon glyphicon-download-alt'></i></a></td></tr>"); 
     $('#attachmentTableDiv').show(); 
     } 
    } 
} 
    </script> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script>google.load("picker", "1", {callback:function(){pickerApiLoaded =!0}});</script> 
</body> 
</html>

code.gs

/* 
Fetch the oAuthToken 
*/ 
function getOAuthToken() { 
    DriveApp.getRootFolder(); 
    Logger.log(ScriptApp.getOAuthToken()) 
    return ScriptApp.getOAuthToken(); 

} 


function doGet(){ 
return HtmlService.createTemplateFromFile('drivePicker') 
      .evaluate() 
      .setTitle('Google Drive Picker') 
      .setSandboxMode(HtmlService.SandboxMode.IFRAME); 
}

Source

2017-08-06 10:31:54 Ritz

Salut Ritz, j'ai répliqués le code de fixation dans mon formulaire HTML en quelque sorte, il ne fonctionne pas, pouvez-vous s'il vous plaît examiner https://stackoverflow.com/questions/46256481/allow-multiple-files-upload-on-google-apps-script-no t-travail – KiKu

Allow plusieurs fichiers Télécharger sur Google Apps Script

Répondre

Questions connexes