Google scripts, downloading files with user inputs

I have written the following Google Apps script, which logs the file names and generates direct download links for the files. So far it is working perfectly.

function SearchFiles() {
  var searchFor ='title contains "Letter"';
  var names =[];
  var fileIds=[];
  var files = DriveApp.searchFiles(searchFor);
  while (files.hasNext()) {
    var file = files.next();
    var fileId = file.getId();// To get FileId of the file
    fileIds.push(fileId);
    var name = file.getName();
    names.push(name);
    
  }

  for (var i=0;i<names.length;i++){
    Logger.log(names[i]);
    Logger.log("https://drive.google.com/uc?export=download&id=" + fileIds[i]);
    
  }

}

The Log is like this:

[16-02-04 16:29:27:794 IST] Letter to SRL for Laboratory
[16-02-04 16:29:27:795 IST] https://drive.google.com/uc?export=download& id=1wTDiv7jensErQl2CODxkTb-tYAvv3vDYPGDECEPrXm
[16-02-04 16:29:27:796 IST] Letters_Nirvedanandaji_I.docx
[16-02-04 16:29:27:797 IST] https://drive.google.com/uc?export=download&id=0B_NmiOlCM-VTa3VrNjF0NE9iNWRQODNOME90VGF3WUV2OW5

Now the questions are:

I want the search term (var searchFor) to be given by user.
Say the search term is '1234.doc' then the user should be presented with the generated download link. I shall make sure that the search term returns unique value.
Anyone should be able to use the script (without any authentication)

First you need a doGet() function in a script file, which usually goes in:

Code

function doGet() {
  var template = HtmlService.createTemplateFromFile('Index');

  // Build and return HTML in IFRAME sandbox mode.
  return template.evaluate()
      .setTitle('RKMS Kankhal Lab Portal')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
};

function SearchFiles(inputValueFromUser) {
  Logger.log('inputValueFromUser: ' + inputValueFromUser);

  if (inputValueFromUser==="") {return 'No Search String';};
  //inputValueFromUser = "";
  //inputValueFromUser = inputValueFromUser !== ""?inputValueFromUser:"Jan8Test";
  var searchFor ='title contains "' + inputValueFromUser + '"';
  Logger.log('searchFor: ' + searchFor);

  var file,
      fileId,
      name,
      downloadURL = "",
      arryOfUrls = [];

  var files = DriveApp.searchFiles(searchFor);

  Logger.log('files: ' + files);
  Logger.log(files.hasNext());

  while (files.hasNext()) {
    file = files.next();
    fileId = file.getId();// To get FileId of the file
    name = file.getName();

    Logger.log("https://drive.google.com/uc?export=download&id=" + fileId);

    downloadURL = "https://drive.google.com/uc?export=download&id=" + fileId;
    arryOfUrls.push(downloadURL);
  };

  Logger.log('arryOfUrls: ' + arryOfUrls);
  return arryOfUrls;//.toString(); //Send array of download urls back to client side JavaScript 
};

Then you need the main HTML form, often named:

Index

<!DOCTYPE html>
<html>

  <body>
    <h1>
    The Title of The Page Here
    </h1>
    <h2 id="main-heading">Online Lab reports</h2>
    <div class="block result-display" id="results">
      Enter your Lab_ID: <input id="idFileName" type="text" placeholder="Enter the file name">
      <div class="hidden" id="error-message">

      </div>
    </div>

    <div id='idMyMessage'>

    </div>

    <button onmouseup="getTheData()">Get Download Link</button>

    <!-- Use a templated HTML printing scriptlet to import JavaScript. -->
    <?!= HtmlService.createHtmlOutputFromFile('JS_MainPageCode').getContent(); ?>
  </body>
</html>

JS_MainPageCode:

<script>
  function updateDisplay(arrayOfUrls) {
    console.log('arrayOfUrls: ' + arrayOfUrls);

    if (arrayOfUrls === 'No Search String') {return;};

    var headingText = "Displaying arrayOfUrls for " + arrayOfUrls + " folder:";

    document.getElementById('main-heading').textContent = headingText;

    var dataLngth = arrayOfUrls.length;
    console.log('dataLngth: ' + dataLngth);

    for (var i = 0; i < dataLngth; i++) {
      var name = arrayOfUrls[i];
      document.getElementById('results').insertAdjacentHTML('beforeend', '<div>' + name + '</div>');
    }
  }

  window.getTheData = function() {
    var userInput = document.getElementById("idFileName").value;
    console.log('userInput: ' + userInput);

    document.getElementById('results')innerHTML = "";//Reset to blank in case there was an error message

    if (userInput === '') {
      document.getElementById('results').insertAdjacentHTML('beforeend', '<div>' + 'Please Enter a File Name' + '</div>');
      return;
    };

    google.script.run
      .withSuccessHandler(updateDisplay)
      .SearchFiles(userInput);
  };
</script>

If you want to have CSS styling in a separate file, then create an HTML file with <style></style> tags, and then use templated HTML to include the seperate file into the Index file.

In the example above, the Index file is templated HTML, with lines:

<?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
<?!= HtmlService.createHtmlOutputFromFile('JS_MainPageCode').getContent(); ?>