Allow users to upload files in your Google Drive

Google Drive is a very popular tool to store and synchronize files. In fact, you can utilize this service even without a Google account. I recently discovered an additional feature that allows other users to upload files in my google drive. This is very useful because it simplifies file sharing between the visitors of a blog.

The user will see a simple web form where they can choose the file to be uploaded to a shared online storage drive. There is no need to have a google account, invitations or any form of authorization. This avoids the limitations set by the classic invitational base system; however, a serious disadvantage is that all co-workers can see and remove any files in the shared folder.

image

Here the code:

  <h3>Upload a file</h3>
  <form class="main" id="myForm" action="action">
   <div class="row">
     <div class="input-field col s12">
       <input id="myName" type="text" name="myName" class="validate" required="required" aria-required="true"><label for="myName">Name</label>
     </div>
     <div class="input-field col s12">
        <input id="email" type="text" name="email" class="validate" required="required" aria-required="true"><label for="email">e-mail address</label>
     </div>
     <div class="file-field input-field col s12">
       <div class="btn">
         <span>pick a file</span>
         <input id="files" type="file" name="myFile"></div>
       <div class="file-path-wrapper">
         <input class="file-path validate" type="text" placeholder="Seleziona file"></div>
     </div>
   </div>
<div class="row">
      <div class="col s4">
        <button class="waves-effect waves-light btn submit-btn" type="submit">choose file</button>
      </div>
      <div class="col s2">
        <div class="preloader-wrapper small active">
          <div class="spinner-layer spinner-green-only spinner">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="gap-patch">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="col s6">
        <small id="progress"> </small>
      </div>
    </div>
  </form>

Creating this web form logic is very easy. Just go to http://script.google.com“>script.google.com, a JavaScript cloud scripting language that allows you to build web applications (and to automate task across Google products and third party services). The google script will be used to upload the file inside a Drive folder.

function doGet() {
  try {
  return HtmlService.createHtmlOutputFromFile('form')
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  .setTitle("File Upload")
  .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  } 
  catch (f) {
    return HtmlService.createHtmlOutput(f.toString());
  }
}

function uploadFileToGoogleDrive(data, fileName, name, email)
{
  try {
    var folder = DriveApp.getFolderById(“0B54vVA4lYrvbaXhfMWxmT1BnbFk”);
    var contentType = data.substring(5,data.indexOf(’;’)),
      bytes = Utilities.base64Decode(data.substr(data.indexOf(‘base64,’)+7)),
      blob = Utilities.newBlob(bytes, contentType, fileName),
      file = folder.createFolder([name, email].join(“ ”)).createFile(blob);
    return “File caricato con successo.”;
    return “ ”+file.getUrl();
    return file.getUrl();
    } 
    catch (f) {
      return f.toString();
    }
}

The function doGet gives the script permission to upload files. The function uploadFileToGoogleDrive establishes the maximum file size to be loaded. After that, the script will insert the files into a new google drive folder, named with your name and e-mail inserted previously through the form. The function will return the url of the file. The last step will be the deployment as a web app of our application and you can do it from the publish menu.

I tested this feature and it is really useful, because it requires little work and anyone can use it, even those who do not have a google account.

Leave a Reply

wpDiscuz