How can I grab the file URL of a file uploaded to my Gdrive using an HTML form with javascript?

Viewed 30

I have this form that will update details and also take in a file uploaded. What I am doing is I followed this as a reference (https://www.youtube.com/watch?v=OU2FAzC04fM) but the thing is I have difficulty passing in the value of the onSuccess' data to my update function.

After clicking on the Update button I also encounter this error Image here. The text fields/dropdown values all record correctly but I am really lost on how to get the file URL to record to my Google sheet as well as it only records "C:\fakepath\name_of_file.pdf", which I believe is because the file is not being uploaded to my Gdrive folder.

HTML Code for the update button:

     <button type="button" class="text-white bg-blue-700 hover:bg-blue-800" onclick="UpdateRecord()" name="update_button" id="update_button">Update</button>

Code for the UpdateRecord() within the HTML:

var rnum = "";

  
    function UpdateRecord(row_number) {
        Swal.fire({
                  title: 'Are you sure?',
                  text: "You will be updating this row.",
                  icon: 'warning',
                  showCancelButton: true,
                  confirmButtonColor: '#3085d6',
                  cancelButtonColor: '#d33',
                  confirmButtonText: 'Yes, update it!'
                }).then((result) => {
                  if (result.isConfirmed) {
                    Swal.fire(
                      'Updated!',
                      'Your file has been successfully updated.',
                      'success'
                    )
                  }function updateConfirmed() {         

        var record_id = rnum;
        var title_id = document.getElementById("title_id").value;
        var subtitle_id = document.getElementById("subtitle_id").value;
        var type_id = document.getElementById("type_id").value;
        var year_released_id = document.getElementById("year_released_id").value;
        var category_id = document.getElementById("category_id").value;
        var file_upload_id = document.getElementById("file_upload_id").value;

        google.script.run.withSuccessHandler(function (return_string) {

        }).UpdateRecord(record_id, title_id, subtitle_id, type_id, year_released_id, category_id, file_upload_id);
                    
        closeForm();
        SearchRecords();
        setTimeout(SearchRecords(), 1);

                  }
                  setTimeout(updateConfirmed(), 1);

                })


    }

Code of UpdateRecord in the Code.gs:

 function UpdateRecord(record_id, title_id, subtitle_id, type_id, year_released_id, category_id, file_upload_id) {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var dataSheet = ss.getSheetByName("Sheet1");
var getLastRow = dataSheet.getLastRow();
var table_values = dataSheet.getRange(2, 1, getLastRow - 1, 8).getValues();
for (i = 0; i < table_values.length; i++) {
  if (table_values[i][0] == record_id) {
    dataSheet.getRange(i + 2, 2).setValue(title_id);
    dataSheet.getRange(i + 2, 3).setValue(subtitle_id);
    dataSheet.getRange(i + 2, 4).setValue(type_id);
    dataSheet.getRange(i + 2, 5).setValue(year_released_id);
    dataSheet.getRange(i + 2, 6).setValue(category_id);
    dataSheet.getRange(i + 2, 7).setValue(file_upload_id);
    }
  }
  return "SUCCESS";
}

Code for the file URL grabber (within the HTML script):

    <script>
  
    document.getElementById('update_button').addEventListener('click',
    function(e){
      google.script.run.withSuccessHandler(onSuccess).uploadFiles(this.parentNode)
    })



    function onSuccess(data){
      document.getElementById("file_upload_id").value = data;
    }
  
    </script>

Code for the file URL grabber (Code.gs):

function uploadFiles(data)
 {
  var file = data.file_upload_id;
  var folder = DriveApp.getFolderById('folder_id_here');
  var createFile = folder.createFile(file);
  return createFile.getUrl();
 }
0 Answers
Related