CODEWITHSUNDEEP
javascriptfile-uploadgoogle-apps-script
mnaputi
mnaputi

Reputation: 51

Anonymous Google Drive upload create new folder

I'm using a Google Apps script found here to have anonymous users upload files to my Google Drive.

What I want is for the script to create a folder using the name input on the form and then deposit the file in that folder.

So far, I got that to work somehow (I guess I should mention I have no idea what I'm doing).

What I would also like is for the script to check to see if the folder already exists and then deposit the new file in the folder.

Example: Bobby uploads file1 to the folder 'Bobby'. He then comes back and uploads file2. File2 should also be saved in the folder 'Bobby'.

Right now, the script is checking for the folder name and when it sees that it has already been created, it deposits the file in the root folder 'Uploads' instead of in the folder 'Bobby'.

How can I get the script to deposit additional files from the same user in the user's existing folder without creating a new folder and without saving to the root folder?

Here's what I'm working with now: (did I mention I have no idea what I'm doing?)

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('form.html');

}

function uploadFiles(form) {

  try {

    var upload = "Uploads";
    var folder, folders = DriveApp.getFoldersByName(upload);

    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(upload);
    }

    var blob = form.file;
    var name = form.name;

    var filefolder, filefolders = DriveApp.getFoldersByName(name);

    if (filefolders.hasNext()) {
      filefolder = filefolders.next();
      var file = folder.createFile(blob);
      file.setDescription("Uploaded by " + name);
    } else {
      var file = folder.createFolder(name).createFile(blob);
      file.setDescription("Uploaded by " + name);
    }

    return "File uploaded successfully " + file.getUrl();

  } catch (error) {

    return error.toString();
  }

}
<!doctype html>
<style type="text/css">
  * {
    font-family: "Verdana";
  }
  
  body {
    background-color: #EEEEEE;
  }
  
  .container {
    margin: 0 auto;
    display: block;
    width: 50%;
  }
  
  #myForm {
    width: 50%;
    margin: 0 auto;
    background: #f4d03f;
    border-radius: 10px;
    box-shadow: 5px 5px 10px #aaa;
    padding: 20px;
    color: #fff;
  }
  
  .inputname {
    display: inline-block;
    height: 30px;
    width: 300px;
    padding: 5px;
    border: none;
    text-align: center;
    background-color: #eee;
  }
  
  .inputname:hover {
    background: #fff;
    box-shadow: 0 0 15px #777;
    transition: 0.2s;
  }
  
  .inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
  }
  
  .inputfile+label,
  .inputsubmit {
    color: #fff;
    font-size: 1.25em;
    font-weight: 700;
    display: inline-block;
    background-color: #2abb9b;
    padding: 20px;
    cursor: pointer;
    border: none;
    border-radius: 3px;
  }
  
  .inputfile:focus+label,
  .inputfile+label:hover,
  .inputsubmit:hover {
    background-color: #87D37C;
    box-shadow: 0 0 15px #777;
    transition: 0.2s;
  }
</style>

<div class="container" align="center">
  <form id="myForm" align="center">
    <h1>Teacher Mike's Google Drive</h1>
    <h2>Upload Files Below</h2>
    <hr>
    <input type="text" class="inputname" name="name" placeholder="Your nickname..">
    <!--<input type="file" class="file" name="myFile">
            <label for="myFile">Choose a File</label>-->
    <input type="file" name="file" id="file" class="inputfile" />
    <label for="file">Choose a file</label>
    <input type="submit" class="inputsubmit" value="Upload File" onclick="this.value='Uploading..';
                    google.script.run.withSuccessHandler(fileUploaded)
                    .uploadFiles(this.parentNode);
                    return false;">
    <hr>
  </form>
  <div id="output"></div>
  <script>
    function fileUploaded(status) {
      document.getElementById('myForm').style.display = 'none';
      document.getElementById('output').innerHTML = status;
    }
  </script>
  <style>
    input {
      display: block;
      margin: 20px;
    }
  </style>
</div>

Thanks in advance!

p.s. Would there be a way to open the folder once the file has been successfully uploaded?

Upvotes: 0

Views: 666

Answers (1)

Tanaike
Tanaike

Reputation: 201428

I think that the folder for saving files may be wrong when the same user uploads a file. Please modify

From :

if (filefolders.hasNext()) {
  filefolder = filefolders.next();
  var file = folder.createFile(blob);
  file.setDescription("Uploaded by " + name);
} else {
  var file = folder.createFolder(name).createFile(blob);
  file.setDescription("Uploaded by " + name);
}

To :

if (filefolders.hasNext()) {
  filefolder = filefolders.next();
  var file = filefolder.createFile(blob); // <--- Here
  file.setDescription("Uploaded by " + name);
} else {
  var file = folder.createFolder(name).createFile(blob);
  file.setDescription("Uploaded by " + name);
}

If this was not solved, I'm sorry.

Upvotes: 1

Related Questions