File Open Dialog - can someone dumb it down?

Question

I have looked at various videos and websites, but no matter how closely i think i am following what I should be doing, I can't get this to work.

I am trying to create 2 different file-open dialog boxes.
1) One that will allow me to drill down through the folders on google drive and select a folder (or create a new one in the folder being viewed)
2) One that will enable me to select files for uploading to a google drive folder and enter a descriptive text - the image name and descriptive text would get pulled back through to the spreadsheet.

Option 2 seems easier and I believe it is google.picker I should be using. As I am in a spreadsheet and the UIapp is deprecated, I was looking at the HTML service. I believe for a spreadsheet however that I cannot use a <button>, <input> or <script> tag. Also IFRAME is preferred from reading the developer site as all script will default to this at the end of the month.

I can get a custom dialog box to open using

function HTMLtest() { 
// Display a modeless dialog box with custom HtmlService content.
 var htmlOutput = HtmlService
     .createHtmlOutput('<p>A change of speed, a change of style...</p>')
     .setSandboxMode(HtmlService.SandboxMode.IFRAME)
     .setWidth(250)
     .setHeight(300);
 SpreadsheetApp.getUi().showModelessDialog(htmlOutput, 'My add-on');
}
//This displays a dialog box okay

But I am unable to get the code from this example to work.

I think my credentials are set up correctly. I got lost a step 7 in the link above as I could not see an option to ' click Create new key, then Browser key' or a 'section for public API access'. I selected create credentials and API key which brought up the Browser key option.

Also in the console I selected the picker from enabled API's and went to the API explorer, setting 'Authorize requests using OAuth 2.0:' to enabled (for viewing files and folder).

When I run the example code, I get a dialog box that opens with a 'select' button. On clicking the button I get: There was an error! The API developer key is invalid. I even tried refreshing the picker API Key and using that in the HTML but got the same message.

I don't know if I need to publish something, if I have set up the picker API authorisation incorrectly or if there is something else I should be looking at.

Help?

Answer 1

Tried to doing the example code and managed run it accordingly. For Step 7, what you did was correct (Create Credentials > API Key > Browser Key). What confuses me is what you mentioned:

"Also in the console I selected the picker from enabled API's and went to the API explorer, setting 'Authorize requests using OAuth 2.0:' to enabled (for viewing files and folder)."

I have no idea on how you did that. But what I did was just follow the instructions accordingly (Steps 8 to 9), refreshed the spreadsheet and clicked on the custom menu (Picker > Start). First it did was mention that it needed authorization to proceed, then I just clicked okay, allowed permissions and all. Then the open-dialog box appears, I click on the Select a file button, and somehow managed to receive the same error:

There was an error! The API developer key is invalid.

Then it hit me. I haven't really used the API Key generated yet. So if you notice on Step 9:

The console will generate an API key. Copy it for use below, then return to the script editor and click Close to close the dialog.

So I searched the sample codes, found where to copy it at the Picker.html file.

// IMPORTANT: Replace the value for DEVELOPER_KEY with the API key obtained
    // from the Google Developers Console.
    var DEVELOPER_KEY = 'ABC123 ... ';

Just replace, save, and refresh the spreadsheet. Then run it again (Picker > Start), click on Select a file button. It was all good to go. :D Hope this helps. Good luck.