Exemplo completo de upload de arquivo do Formulários Google

Question

Como posso permitir que meus visualizadores usem o Formulários Google para fazer upload de alguns arquivos em meu formulário e salvá-los em meu Google Drive?

Estou procurando um exemplo completo:Ele deve informar qual código adicionar à fonte HTML do Formulário Google de exemplo.Como usar o Google Apps Script para fazer upload do arquivo do visualizador para minha conta do Google Drive?

Answer 1

Atualizar:O Formulários Google agora pode fazer upload de arquivos.Esta resposta foi postada antes que o Formulários Google pudesse fazer upload de arquivos.

Esta solução não usa o Formulários Google.Este é um exemplo de uso de um aplicativo da Web do Apps Script, que é muito diferente de um Formulário Google.Um Web App é basicamente um site, mas você não pode obter um nome de domínio para ele.Esta não é uma modificação de um Formulário Google, o que não pode ser feito para fazer upload de um arquivo.

OBSERVAÇÃO:Eu tive um exemplo de ambos o UI Service e o HTML Service, mas removemos o exemplo do UI Service, porque o UI Service está obsoleto.

OBSERVAÇÃO:A única configuração de sandbox disponível agora é IFRAME.Eu você quer usar um onsubmit atributo na tag do formulário inicial: <form onsubmit="myFunctionName()">, isso pode fazer com que o formulário desapareça da tela após o envio do formulário.

Se você estava usando o modo NATIVO, seu aplicativo Web de upload de arquivo pode não estar mais funcionando.Com o modo NATIVE, o envio de um formulário não invocaria o comportamento padrão da página desaparecendo da tela.Se você estava usando o modo NATIVO e seu formulário de upload de arquivo não está mais funcionando, você pode estar usando um botão do tipo "enviar".Suponho que você também possa estar usando a API do lado do cliente "google.script.run" para enviar dados ao servidor.Se quiser que a página desapareça da tela após o envio do formulário, você pode fazer isso de outra maneira.Mas você pode não se importar, ou até mesmo preferir que a página fique na tela.Dependendo do que você deseja, você precisará definir as configurações e o código de uma determinada maneira.

Se você estiver usando um botão do tipo "enviar" e quiser continuar a usá-lo, tente adicionar event.preventDefault(); ao seu código na função de manipulador de eventos de envio.Ou você precisará usar o google.script.run API do lado do cliente.

---

Um formulário personalizado para fazer upload de arquivos da unidade do computador de um usuário para o Google Drive pode ser criado com o serviço HTML do Apps Script.Este exemplo requer a escrita de um programa, mas forneci todo o código básico aqui.

Este exemplo mostra um formulário de upload com o serviço HTML do Google Apps Script.

O que você precisa

• Conta do Google
• Google Drive
• Script do Google Apps - também chamado de Google Script

Script do Google Apps

Existem várias maneiras de chegar ao editor de código do Google Apps Script.

• Carregue o Apps Script diretamente do endereço da web: https://script.google.com
• Abra uma planilha do Google primeiro e depois abra o Apps Script
• Vá para o seu Google Drive e abra o Apps Script: https://drive.google.com/drive/#my-drive
• Acesse seu Google Drive e clique em um arquivo de projeto do Apps Script
• Abra o Apps Script do Google Docs
• etc.

Menciono isso porque se você não estiver ciente de todas as possibilidades, pode ficar um pouco confuso.O Google Apps Script pode ser incorporado em um site, planilhas, documentos ou formulários do Google ou usado como um aplicativo independente.

Visão geral do Apps Script

Este exemplo é um aplicativo "Stand Alone" com serviço HTML.

Serviço HTML - Crie um aplicativo web usando HTML, CSS e Javascript

O Google Apps Script possui apenas dois tipos de arquivos dentro de um Project:

• Roteiro
• HTML

Os arquivos de script têm um .gs extensão.O .gs code é um código do lado do servidor escrito em JavaScript e uma combinação da própria API do Google.

• Copie e cole o seguinte código
• Salve isso
• Crie a primeira versão nomeada
• Publique

• Defina as permissões

  e você pode começar a usá-lo.

Começar por:

• Crie um novo projeto em branco no Apps Script
• Copie e cole neste código:

Faça upload de um arquivo com o serviço HTML:

Código.gs arquivo (criado por padrão)

//For this to work, you need a folder in your Google drive named:
// 'For Web Hosting'
// or change the hard coded folder name to the name of the folder
// you want the file written to

function doGet(e) {
  return HtmlService.createTemplateFromFile('Form')
    .evaluate() // evaluate MUST come before setting the Sandbox mode
    .setTitle('Name To Appear in Browser Tab')
    .setSandboxMode();//Defaults to IFRAME which is now the only mode available
}

function processForm(theForm) {
  var fileBlob = theForm.picToLoad;

  Logger.log("fileBlob Name: " + fileBlob.getName())
  Logger.log("fileBlob type: " + fileBlob.getContentType())
  Logger.log('fileBlob: ' + fileBlob);

  var fldrSssn = DriveApp.getFolderById(Your Folder ID);
    fldrSssn.createFile(fileBlob);

  return true;
}

Crie um arquivo HTML:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1 id="main-heading">Main Heading</h1>
    <br/>
    <div id="formDiv">

      <form id="myForm">

        <input name="picToLoad" type="file" /><br/>
        <input type="button" value="Submit" onclick="picUploadJs(this.parentNode)" />

      </form>
    </div>


  <div id="status" style="display: none">
  <!-- div will be filled with innerHTML after form submission. -->
  Uploading. Please wait...
</div>

</body>
<script>

function picUploadJs(frmData) {

  document.getElementById('status').style.display = 'inline';

  google.script.run
    .withSuccessHandler(updateOutput)
    .processForm(frmData)
};
  // Javascript function called by "submit" button handler,
  // to show results.

  function updateOutput() {

    var outputDiv = document.getElementById('status');
    outputDiv.innerHTML = "The File was UPLOADED!";
  }

</script>
</html>

Este é um exemplo completo de trabalho.Possui apenas dois botões e um <div> elemento, então você não verá muito na tela.Se o .gs script é bem-sucedido, true é retornado e um onSuccess a função é executada.A função onSuccess (updateOutput) injeta HTML interno no div elemento com a mensagem "O arquivo foi carregado!"

• Salve o arquivo, dê um nome ao projeto
• Usando o cardápio: File, Manage Version então salve a primeira versão
• Publish, Deploy As Web App então atualizar

Ao executar o script pela primeira vez, ele solicitará permissões porque está salvando arquivos em sua unidade.Depois de conceder permissões pela primeira vez, o Apps Script para e não conclui a execução.Então, você precisa executá-lo novamente.O script não solicitará permissões novamente após a primeira vez.

O arquivo do Apps Script aparecerá em seu Google Drive.No Google Drive você pode definir permissões para quem pode acessar e usar o script.O script é executado simplesmente fornecendo o link ao usuário.Use o link da mesma forma que carregaria uma página da web.

Outro exemplo de uso do HTML Service pode ser visto neste link aqui no StackOverflow:

Upload de arquivo com serviço HTML

NOTAS sobre o serviço UI obsoleto:

Há uma diferença entre o UI Service e a UI getUi() método da classe Spreadsheet (ou outra classe) O serviço de IU do Apps Script foi descontinuado em dezembro de 2018.11, 2014.Ele continuará funcionando por algum tempo, mas recomendamos que você use o serviço HTML.

Documentação do Google - Serviço de IU

Mesmo que o serviço UI é obsoleto, há um getUi() método da classe de planilha para adicionar menus personalizados, qual é NÃO descontinuada:

Classe de planilha - método Get UI

Menciono isso porque pode ser confuso porque ambos usam a terminologia IU.

O método UI retorna um Ui tipo de retorno.

Você pode adicionar HTML a um serviço de UI, mas não pode usar um <button>, <input> ou <script> tag no HTML com o UI Service.

Aqui está um link para um arquivo compartilhado do Apps Script Web App com um formulário de entrada:

Arquivo Compartilhado - Formulário de Contato

Answer 2

A partir de outubro de 2016, o Google adicionou um tipo de pergunta de upload de arquivo em formulários nativos do Google, nenhum script do Google Apps necessário. ver documentação .