CODEWITHSUNDEEP
javascriptimagegoogle-apps-scriptgoogle-sheetsgoogle-drive-api
GPni
GPni

Reputation: 143

Get Image URL from Google Drive to Google Sheet based on file name

Good day!

I am trying to access the Google Drive, and get an specific image file based on profile number from web app. For example, if I input a profile number and details on the web app, after submit, it will append the details on the google sheet, and I am trying to search the image in the Google Drive and put its URL on the last column.

Here is my html code:

  <body>
    <!-- CONTAINER -->
    <div class="container-md">

    <!-- HEADING -->
    <h3 style="color:green;">User Data</h3>

    <!-- CONTENT -->
    <div class="form-row">
    <div class="form-group col-md-2">
    <input id="rnum" class="form-control" type="text" placeholder="Profile Number" pattern="^\d{5}$" required>
    </div>
    </div>
    <!-- FULL NAME -->
    <div class="form-row">
    <div class="form-group col-md-3">
    <input id="fname" class="form-control" type="text" placeholder="First Name" required>
    </div>
    <div class="form-group col-md-3">
    <input id="mname" class="form-control" type="text" placeholder="Middle Name" required>
    </div>
    <div class="form-group col-md-3">
    <input id="lname" class="form-control" type="text" placeholder="Last Name" required>
    </div>
    </div> <!-- CLOSE ROW: FULL NAME-->
      <div class="form-row">
      <button id = "btn" type="submit" class="btn btn-primary">Submit</button>
      </div>
    </div>  <!-- CLOSE CONTAINER -->     
  </body>
</html>

Here is my javascript code:

<script>
document.getElementById("btn").addEventListener("click",submitBtn);
    
    function submitBtn(){
       var myInfo={};
       
       myInfo.profile = document.getElementById("rnum").value;
       myInfo.firstName = document.getElementById("fname").value;
       myInfo.midName = document.getElementById("mname").value;
       myInfo.lastName = document.getElementById("lname").value;
       
       google.script.run.addInfo(myInfo);
       
       document.getElementById("rnum").value = "";
       document.getElementById("fname").value = "";
       document.getElementById("mname").value = "";
       document.getElementById("lname").value = "";
       
    }
</script>

Here is my google script code:

function addInfo(myInfo){
   const ss = SpreadsheetApp.openByUrl(url);
   const ws = ss.getSheetByName("User_Info");
  
   const imgFolder = DriveApp.getFoldersByName("User Image").next();
   const imgIterator = imgFolder.getFiles();
   
   var imgArr = [];

   while(imgIterator.hasNext()){
    var imgFile = imgIterator.next();
    var imgUrl = imgFile.getName();
     imgArr.push(imgUrl);
   }

   ws.appendRow([
     myInfo.profile, 
     myInfo.firstName, 
     myInfo.midName, 
     myInfo.lastName
     //Image URL
   ]);
}

So far, I can just get the filenames of the all the images in my Google Drive folder. I am still searching for ways on how to get the image URL based on profile number. Thank you very much in advance for your help and inputs.

Upvotes: 1

Views: 1203

Answers (1)

Tanaike
Tanaike

Reputation: 201643

If profile number is the filename of images in the folder of DriveApp.getFoldersByName("User Image").next() and each filename is the unique filename, how about the following modification?

From:

var imgArr = [];

while(imgIterator.hasNext()){
 var imgFile = imgIterator.next();
 var imgUrl = imgFile.getName();
  imgArr.push(imgUrl);
}

ws.appendRow([
  myInfo.profile, 
  myInfo.firstName, 
  myInfo.midName, 
  myInfo.lastName
  //Image URL
]);

To:

var imgObj = {};
while(imgIterator.hasNext()){
  var imgFile = imgIterator.next();
  imgObj[imgFile.getName()] = imgFile.getUrl();
}
ws.appendRow([
  myInfo.profile,
  myInfo.firstName,
  myInfo.midName,
  myInfo.lastName,
  imgObj[myInfo.profile]
]);
  • In this modification, an object for searching the URL is created and the URL is put using the object.

Note:

  • In this case, I understood as follows.
    • profile number is the filename of images.
    • Each filename is the unique filename.

If above my understanding is not correct, can you provide the detail information of your situation? By this, I would like to modify the script.

Upvotes: 1

Related Questions