0

I'm trying to embed an image that's stored in my Google Drive onto my website. Here's the kicker: the File ID in question is not static, as my function always grabs the latest image in a list of form submissions.

I've fetched the preview URL from a Google Sheet of form responses using Apps Script. I've also sliced out the File ID using .replace() on the first part of the URL.

How can I grab the Image (which is public) from my google drive using this file ID and embed it?

Here's my code (omitting irrelevant info ofc):

const deskFeaturePhoto = document.querySelector('#featurePhoto')

fetch('https://script.google.com/macros/s/AKfycbwWFiL5Lg4J_JeTYAW_xyyH82ZStJYpKiJsBpBiJKT6XrjIYaDmpVOxCa-Jwt4iysNJoQ/exec?t=All%20Submissions')
  .then(res => res.json())
  .then((marketingQuery) => {
    deskFeaturePhoto.innerHTML = `<img src="https://drive.google.com/uc?export=view&id=${marketingQuery[marketingQuery.length-1].feature_image.replace('https://drive.google.com/open?id=', '')}" alt="Special Photo" style="width: 50%;">`
  }).catch(err => console.error(err))
<div id="featurePhoto" style="display: flex; flex-direction: column; align-items: center; justify-content: center;"></div>

This current 'solution' returns a 403 error despite displaying the image correctly when opening the image alone using the final URL.

Aurange
  • 943
  • 2
  • 9
  • 23
Anden Wieseler
  • 55
  • 2
  • 6
  • 1
    I thought that when your file ID is the valid value of the publicly shared image file, your script works. So in order to correctly understand your current issue, can you provide detailed information for correctly replicating your issue? By this, I would like to confirm it. By the way, I cannot understand `(not using node)`. In your current situation, you are using Node.js? – Tanaike Mar 08 '22 at 00:27
  • I am not using Node.js. I am using the Fetch API on a static HTML/CSS/JS site. I'm currently working in VS Code on my MacBook and using Live Server and the Safari developer tools to test. When running the page, the console shoots an error saying that the server responded with status 403. – Anden Wieseler Mar 08 '22 at 00:35
  • From the code provided I have to agree with Tanaike that it seems to be working perfectly fine? – Aurange Mar 08 '22 at 00:44
  • Thank you for replying. I have to apologize for my poor English skill, again. Unfortunately, I cannot still understand your question. But I would like to try to understand it. When I could correctly understand it, I would like to think of the solution. I would be grateful if you can forgive my poor English skill. – Tanaike Mar 08 '22 at 00:44
  • @Tanaike maybe this screen recording can help you understand my issue: https://imgur.com/a/cRrWg5x The image is selected correctly. But when I try to load it in, the server responds with 403, even though the image is public. – Anden Wieseler Mar 08 '22 at 01:08
  • Thank you for replying. Can you provide the value of `marketingQuery` in your script? – Tanaike Mar 08 '22 at 01:27

1 Answers1

0

Issue was reproduced on my end with no errors using sample code provided. This is most likely related to local Live Server issues, as requested sample code is here

Yancy Godoy
  • 582
  • 2
  • 13