Connecting google drive script to web component

Mohamed · February 7, 2023, 5:35pm

hello I want to know how to connect this web app script to upload files from url to web component

function uploadFiles(url) {
    var response =  UrlFetchApp.fetch(url)
    var fileName  = getFilenameFromURL(url)
    var folder = DriveApp.getFolderById('1E_3885uoAUKNeW2ESsw--Lp3lYFQJvhV');
    var blob = response.getBlob();
    var file = folder.createFile(blob)
    file.setName(fileName)
    file.setDescription("Download from the " + url)
    return file.getUrl();
  }
  
  
  function getFilenameFromURL(url) {
    //(host-ish)/(path-ish/)(filename)
    var re = /^https?:\/\/([^\/]+)\/([^?]*\/)?([^\/?]+)/;
    var match = re.exec(url);
    if (match) {
      return unescape(match[3]);
    }
    return null;
  }
  
  function doGet(e){
  var html  =  HtmlService.createHtmlOutputFromFile('index.html')
  return html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
  }

thanks

TIMAI2 · February 7, 2023, 6:09pm

You do not show your html file
You will (currently) need to use an extension (CustomWebView) to facilitate handling of an input = file tag in your html. (however, because you are calling files from urls, it may work in a webviewer)
You run it by calling the scriptUrl in a webviewer

Mohamed · February 7, 2023, 6:12pm

I know this, but I want to use web component

TIMAI2 · February 7, 2023, 10:39pm

Still need to see the index.html file to understand what is required to be able to use the web component

Mohamed · February 7, 2023, 11:13pm

@TIMAI2
this is index.html

<!DOCTYPE html>
  <html>
    <head>
      <base target="_top">
      <title>Upload Files</title>
    </head>
    <body>
      <div>
        <label style="font-size: 18px;">By:</label>
        <img src="https://www.kindpng.com/picc/m/575-5752721_png-images-png-download-embankment-tube-station-transparent.png" alt="kodular img"
        style="height:20px;margin-bottom: -5px;">
        <a style="color:rgb(4, 134, 85) ;" href="https://community.kodular.io/u/_ahmed" target="_blank"><label style="font-size: 18px;" >Mr_Koder<label></a>
        </div>
        <br>
        <div style="margin-left: 30px;">
          <img src="https://pbs.twimg.com/media/DLxhDrsWsAAUFe9.png" alt="instrgam img"
          style="height:20px;margin-bottom: -5px;">
          <a style="color:rgb(4, 134, 85)" href="https://www.instagram.com/mr_koder/" target="_blank"><label style="font-size: 18px;">Mr_Koder<label></a>
          </div>
          <br>
          <div style="margin-left: 25px;">
            <img src="https://dksartwork.com/wp-content/uploads/2019/11/FaceBookIcon.png" alt="facebook img"
            style="height:20px;margin-bottom: -5px;">
            <a style="color:rgb(4, 134, 85)" href="https://www.facebook.com/ahmed.azam.52" target="_blank"><label style="font-size: 18px;" >Mr_Koder<label></a>
            </div>
            <br>
          <div style="margin-left: 20px;">
            <img src="https://mpng.subpng.com/20180404/qje/kisspng-telegram-logo-computer-icons-social-5ac4d3b07d03e4.6297093415228486885121.jpg" alt="telegram img"
            style="height:20px;margin-bottom: -5px;">
            <a style="color:rgb(4, 134, 85)" href="https://t.me/Ahmed87650" target="_blank"><label style="font-size: 18px;" >Mr_Koder<label></a>
            </div>
      <div style="width:100%;text-align: center; ">
      
        <img style="height:100px;width: 100px;align-items: center;" src="https://cutewallpaper.org/24/google-new-logo-png/google-drive-logo-png-and-vector-logo-download.png">
      </div>
      <br><br>
      <h1 style="margin-bottom: 10px;text-align: center;"><U style="color: rgb(4, 134, 85);">Upload files to Google drive from URL</U></h1>
      <br><br><form>
        <div style="text-align: center;"><label>Enter the URL</label>
        <input type="text" name="myFile" id="url" style="height:20px; 
        width:70%;border-radius: 5px;
        border-width: 1px;
        border-color: rgb(4, 134, 85);"></div>
        <br>
        <br>
        <input  style="border-radius: 10px ;border-color: transparent;
        background-color:rgb(170, 231, 211) ;
        font-size: 15px;
        height: 40px;
        
      margin-left: 45%;" type="button" id="submitBtn" value="Upload Files">
        <br>
        <br>
        <label style="font-size: 20px;" id="resp"><label>
      </form>
      <br><br>
      <div class="circle-wrap">
        <div class="circle">
      
        </div>
      </div>
      <script>
        document.getElementById('submitBtn').addEventListener('click',
        function(e){
          
          if (document.getElementsByTagName("input")[0].value.length==0) {
            document.getElementById('resp').innerHTML = "please Enter direct Url first! ";;
} else {
  var url= document.getElementById("url").value;
          google.script.run.withSuccessHandler(onSuccess).uploadFiles(url)
  document.getElementById('resp').innerHTML = "uploading ";;
}
          
        })
        
        function onSuccess(url){
          document.getElementById('resp').innerHTML = "File uploaded to path ((" + url + "))";
        }
        
      </script>
      
    </body>
    
  </html>

[mod edit - for others]

TIMAI2 · February 7, 2023, 11:46pm

Tested and working

SCRIPT

function doGet(e) {
  
return myFunction(e.parameter.newUrl,e.parameter.mimetype);

}

function myFunction(newUrl,mimetype) {
  var url  = newUrl;
  var response = UrlFetchApp.fetch(url);
  var blob=response.getAs(mimetype);
  var folder = "1DguuZolc10bsW1XP0y7QYVY1rPWSHKxm";
  var fileName=decodeURIComponent(url.split("/").pop());
  var file=DriveApp.getFolderById(folder).createFile(blob);
  file.setName(fileName); 
  return ContentService.createTextOutput("File from Url uploaded")
}

BLOCKS

(note: jpg images may require image/jpeg mimetype)

Mohamed · February 8, 2023, 1:01am

@TIMAI2
ohh thank you very much you have just made my day and I added function to the script that get google drive URL after uploading the URL the script will be like this :

function doGet(e) {
  return myFunction(e.parameter.newUrl,e.parameter.mimetype);
}

function myFunction(newUrl,mimetype) {
  var url  = newUrl;
  var response = UrlFetchApp.fetch(url);
  var blob=response.getAs(mimetype);
  var folder = "1DguuZolc10bsW1XP0y7QYVY1rPWSHKxm";
  var fileName=decodeURIComponent(url.split("/").pop());
  var file=DriveApp.getFolderById(folder).createFile(blob);
  file.setName(fileName); 
  return ContentService.createTextOutput("URL:" + file.getUrl());
}

Mohamed · February 8, 2023, 10:06am

@TIMAI2
is there are a way to upload files to google drive via file path I would be very grateful if there is an easy way

TIMAI2 · February 8, 2023, 1:47pm

system · February 15, 2023, 1:48pm

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.