Google Forms 파일 업로드 전체 예

StackOverflow https://stackoverflow.com//questions/21013693

문제

시청자가 Google 양식을 사용하여 일부 파일을 내 양식에 업로드하고 내 Google 드라이브에 저장하도록 허용하려면 어떻게 해야 하나요?

완전한 예를 찾고 있습니다.Google 양식 HTML 소스 예시에 추가할 코드를 알려주어야 합니다.Google Apps Script를 사용하여 뷰어의 파일을 내 Google 드라이브 계정에 업로드하는 방법은 무엇입니까?

도움이 되었습니까?

해결책

업데이트:이제 Google Forms에서 파일을 업로드할 수 있습니다.이 답변은 Google Forms에 파일 업로드 기능이 제공되기 전에 게시되었습니다.

이 솔루션은 Google 설문지를 사용하지 않습니다.이는 Google 양식과 매우 다른 Apps Script 웹 앱을 사용하는 예입니다.웹앱은 기본적으로 웹사이트이지만 도메인 이름을 얻을 수는 없습니다.이는 파일 업로드를 위해 수행할 수 없는 Google 양식의 수정이 아닙니다.

메모:나한테는 예가 있었어 둘 다 UI 서비스 및 HTML 서비스가 있지만 UI 서비스가 더 이상 사용되지 않기 때문에 UI 서비스 예제를 제거했습니다.

메모:현재 사용 가능한 유일한 샌드박스 설정은 다음과 같습니다. IFRAME.나는 당신이 onsubmit 시작 양식 태그의 속성: <form onsubmit="myFunctionName()">, 양식 제출 후 화면에서 양식이 사라질 수 있습니다.

NATIVE 모드를 사용하는 경우 파일 업로드 웹 앱이 더 이상 작동하지 않을 수 있습니다.NATIVE 모드에서는 양식 제출 시 페이지가 화면에서 사라지는 기본 동작이 호출되지 않습니다.NATIVE 모드를 사용 중이고 파일 업로드 양식이 더 이상 작동하지 않는 경우 "제출" 유형 버튼을 사용하고 있을 수 있습니다.나는 당신이 "google.script.run" 클라이언트측 API를 사용하여 서버에 데이터를 보낼 수도 있다고 추측합니다.양식 제출 후 페이지가 화면에서 사라지도록 하려면 다른 방법을 사용할 수 있습니다.하지만 신경 쓰지 않을 수도 있고 페이지가 화면에 그대로 유지되는 것을 선호할 수도 있습니다.원하는 내용에 따라 설정을 구성하고 특정 방식으로 코딩해야 합니다.

"제출" 유형의 버튼을 사용하고 있고 이를 계속 사용하고 싶다면 다음을 추가해 보세요. event.preventDefault(); 제출 이벤트 핸들러 함수의 코드에 추가합니다.아니면 다음을 사용해야 합니다. google.script.run 클라이언트 측 API.

Apps Script HTML 서비스를 사용하면 사용자 컴퓨터 드라이브에서 Google 드라이브로 파일을 업로드하기 위한 맞춤 양식을 만들 수 있습니다.이 예에서는 프로그램 작성이 필요하지만 여기에는 모든 기본 코드를 제공했습니다.

이 예는 Google Apps Script HTML 서비스를 사용한 업로드 양식을 보여줍니다.

당신에게 필요한 것

  • 구글 계정
  • 구글 드라이브
  • Google Apps Script - Google Script라고도 함

구글 앱 스크립트

Google Apps Script 코드 편집기를 사용하는 방법은 다양합니다.

  • 웹 주소에서 직접 Apps Script를 로드합니다. https://script.google.com
  • 먼저 Google 시트를 연 다음 Apps Script를 엽니다.
  • Google Drive로 이동한 다음 Apps Script를 엽니다. https://drive.google.com/drive/#my-drive
  • Google 드라이브로 이동한 다음 Apps Script 프로젝트 파일을 클릭하세요.
  • Google Docs에서 Apps Script 열기
  • 등

제가 이것을 언급하는 이유는 여러분이 모든 가능성을 인식하지 못한다면 약간 혼란스러울 수 있기 때문입니다.Google Apps Script는 Google 사이트, 시트, 문서 또는 양식에 삽입하거나 독립형 앱으로 사용할 수 있습니다.

앱 스크립트 개요

이 예는 HTML 서비스가 포함된 "독립형" 앱입니다.

HTML 서비스 - HTML, CSS 및 Javascript를 사용하여 웹 앱 만들기

Google Apps Script에는 두 가지 유형의 파일만 있습니다. Project:

  • 스크립트
  • HTML

스크립트 파일에는 .gs 확대.그만큼 .gs code는 JavaScript로 작성된 서버 측 코드이며 Google 자체 API의 조합입니다.

  • 다음 코드를 복사하여 붙여넣으세요.
  • 저장해
  • 첫 번째 명명된 버전 만들기
  • 게시

  • 권한 설정

    그리고 당신은 그것을 사용할 수 있습니다.

시작 날짜:

  • Apps Script에서 새 빈 프로젝트 만들기
  • 이 코드를 복사하여 붙여넣으세요.

HTML 서비스를 사용하여 파일 업로드:

Code.gs 파일(기본적으로 생성됨)

//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;
}

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>

이것은 전체 작업 예입니다.버튼은 2개와 1개만 있어요 <div> 요소이므로 화면에 많이 표시되지 않습니다.만약 .gs 스크립트가 성공하면 true가 반환되고 onSuccess 기능이 실행됩니다.onSuccess 함수(updateOutput)는 내부 HTML을 div "파일이 업로드되었습니다!"라는 메시지가 있는 요소

  • 파일을 저장하고 프로젝트 이름을 지정하십시오.
  • 메뉴 사용: File, Manage Version 그런 다음 첫 번째 버전을 저장하십시오.
  • Publish, Deploy As Web App 그런 다음 업데이트

스크립트를 처음 실행하면 드라이브에 파일을 저장하기 때문에 권한을 요청합니다.처음으로 권한을 부여하면 Apps Script가 중지되고 실행이 완료되지 않습니다.따라서 다시 실행해야 합니다.스크립트는 처음 이후에는 다시 권한을 요청하지 않습니다.

Apps Script 파일이 Google 드라이브에 표시됩니다.Google 드라이브에서는 스크립트에 액세스하고 사용할 수 있는 권한을 설정할 수 있습니다.스크립트는 단순히 사용자에게 링크를 제공함으로써 실행됩니다.웹페이지를 로드하는 것처럼 링크를 사용하세요.

HTML 서비스를 사용하는 또 다른 예는 여기 StackOverflow의 링크에서 볼 수 있습니다.

HTML 서비스를 사용한 파일 업로드

더 이상 사용되지 않는 UI 서비스에 대한 참고 사항:

UI 서비스와 Ui에는 차이가 있습니다. getUi() 스프레드시트 클래스(또는 다른 클래스)의 메서드 Apps Script UI 서비스는 12월 1일에 더 이상 사용되지 않습니다.2014년 11월 11일일정 기간 동안 계속 작동하지만 HTML 서비스를 사용하는 것이 좋습니다.

Google 문서 - UI 서비스

UI 서비스에도 불구하고 ~이다 더 이상 사용되지 않습니다. getUi() 추가할 스프레드시트 클래스의 메소드 맞춤 메뉴, 이는 아니다 더 이상 사용되지 않음:

스프레드시트 클래스 - UI 메서드 가져오기

둘 다 용어를 사용하기 때문에 혼란스러울 수 있기 때문에 이것을 언급합니다. UI.

UI 메서드는 Ui 반환 유형.

UI 서비스에 HTML을 추가할 수 있지만 <button>, <input> 또는 <script> UI 서비스를 사용하여 HTML에 태그를 추가합니다.

다음은 입력 양식이 포함된 공유 Apps Script 웹 앱 파일에 대한 링크입니다.

공유 파일 - 문의 양식

다른 팁

2016 년 10 월 현재, Google은 기본 Google 양식에 파일 업로드 질문 유형을 추가했으며 Google Apps 스크립트가 필요하지 않았습니다. 설명서 참조 .

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top