I am displaying around 20 thumbnail images at a time from google drive using the following link syntax, the thumbnail links are stored in a database and are grabbed using ajax POST request. I am testing this on localhost and every time i clear the cache and reload i get a 403 no response from server error on at least a few images. The images are public and are made accessable to anyone and visiting the link manually opens the image every time.
Heres the link i use:
"https://lh3.googleusercontent.com/d/" + imgid + "=s500?authuser=0"
Why are you using this link to get the files?
Try to get one of the links in the File resource:
webContentLink Link for downloading the content of the file in a browser. This is only available for files with binary content in Google Drive.
webViewLink Link for opening the file in a relevant Google editor or viewer in a browser.
iconLink Static, unauthenticated link to the file's icon.
thumbnailLink A short-lived link to the file's thumbnail, if available. Typically lasts on the order of hours. Only populated when the requesting app can access the file's content.
Choose one of the attributes that best fit your needs after that. Make the necessary request
GET https://www.googleapis.com/drive/v3/files/<yout-file-id>?fields=webContentLink&key=[YOUR_API_KEY] HTTP/1.1
Authorization: Bearer [YOUR_ACCESS_TOKEN]
Accept: application/json
After that you can use your retrieved link to show the image.
There is on person having your problem if you want to look over the final result of the img tag.
Related
I have an app that uses the Google Drive API, and I need to display the thumbnails. But when I pass the link to an <img> tag it responds with a 404, but if I open the link manually in another tab in my browser it display just fine
You want to put the thumbnail of the file retrieved from Google Drive to your HTML.
The thumbnail link is retrieved by Drive API.
When you put it and open the HTML, 404 is returned. But when you directly access to the URL of the thumbnail link, you can see the image on your browser.
I believe your goal and your issue like above. For this, how about this answer?
Issue and workaround:
From your situation, I think that when you directly access to the thumbnail link, you might have logged in Google Account. By this, the image can be seen. And also, I thought that you might have used the following thumbnail link. This is the thumbnail link retrieved by Drive API.
https://docs.google.com/feeds/vt?gd=true&id={fileId}&v=1&s=###&sz=s220
Unfortunately, it seems that this link cannot be directly used at the HTML of outside. So in order to use the thumbnail at the HTML of outside, how about changing the endpoint?
Modified endpoint:
https://drive.google.com/thumbnail?sz=w640&id={fileId}
Please replace {fileId} of your file ID.
w640 means 640 pixels in the width. If you want to change the height, please useh instead of w.
Please share publicly the file you want to retrieve the thumbnail. It's On - Anyone with the link. By this, above link can be used. Please be careful this.
Note:
When the following HTML is used with the above link, the thumbnail can be seen.
<img src="https://drive.google.com/thumbnail?sz=w640&id={fileId}">
Can I use images stored in Google Drive to be used in a website by the html,<img src="<webContentLink>" /> ?
Where <webContentLink> is returned after a file is uploaded and is in the format, 'https://drive.google.com/uc?id=<FILEID>&export=download'
I have a small website created for account users only. They can upload files to their google drive folder and this folder has permissions set to share with the accounts of the other users (specific people only). This is an ASP.NET MVC 5 website using the Google API Client Libraries for .NET.
In Chrome and Firefox the images display fine, in IE and Safari they don't show and return a 302 status code. Sometimes if you view the image directly in a new tab and then refresh the web page it shows. It might also show if the folder permission is set to 'anyone with the link', but this isn't ideal.
The documentation (https://developers.google.com/drive/v3/web/manage-downloads) says, 'If you want to allow a user to view a file directly in a web browser instead of through the API, use the webContentLink.' I understood this to be okay to use img src='' to display an image directly without the API, however it then goes on to say, 'You can either redirect a user to this URL, or offer it as a clickable link'.
So can Google please confirm if 'webContentLink' can be used in img src='', or not and why it works in some browsers and not others? I've read many posts on this, some old, some more recent. If it's not to be used in img src I think it should be made clear in the documentation.
Many thanks
Yes, you can definitely use webContentLink as your img src in your HTML page. I tried and this is what I got on my sample HTML page.
<img src = "https://drive.google.com/uc?id=0Bzgk4zncCwI7aDZCSHY4YU0zNUF&export=download">
webContentLink can be obtained using Files.list and place 'files' in the fields parameter.
Displaying an image from Google Drive can be done in 3 steps:
Retrieving your image ID
Right click on your image and select Share.
You'll see a link that you need to copy. You will extract the image's ID from the URL.
Here is what your sharing link should look like:
https://drive.google.com/open?id=YourFileId
Check your sharing settings
Your images will only be visible to people who have access to those files. To allow anyone access to your images, you need to set the sharing setting as Visible with the link.
Display your image
With your sharing settings properly configured and your image file IDs at hand, you can now specify how your images will be displayed using a prescribed format.
https://drive.google.com/thumbnail?id=YourFileID
More details can be found here
when I do this I just get a sign like an nonexistent image.
Why?
I just copy paste this line:
<img src = "https://drive.google.com/uc?id=0Bzgk4zncCwI7aDZCSHY4YU0zNUF&export=download">
JS Fiddle
We have a web app with html pages 1>2>3
Page 2 has a link to download a pdf - I've used an anchor tag in the form to do this. The response is of type application/pdf. If I wait on page 2 my pdf eventually shows as downloaded, however I want to be able to move to page 3 with the pdf download happening asynchronously...
I can get the server to do it but as soon as I request page 3 the browser (Chrome) shows the GET request (for the pdf) as status: (canceled) :-(
I've tried both HTTP Request and AJAX Request (type: document and xhr) any suggestions?
So far I can only get it to work when the request is in a new tab - but that's not what I want as the pdf is downloaded and not opened in the new tab.
If your app is SPA, you can create an iframe and set src attribute with the download url.
If it is not SPA, and you used anchor <a> tag then use target="_blank" attribute to download it from a new window in which case, new tab will open and starting the download and the tab will be closed by letting the download happened in the background so that you can change anything on the main page.
If you want to download rather than show the pdf, I'd look into getting the server setting the http response header
Content-Disposition: attachment; filename="yourname.pdf"
so the browser should suggest "save as" and open a dialog to choose the save location - the download will usually continue running when navigating away from the page where the download was initiated.
I'm sorry I have no idea if you can achieve this purely on the browser side.
Solution to my problem was to get access to the HttpServletResponse (server side), set the header content type ("application/pdf") and disposition ("attachment;filename='...'") and flush the outputStream.
This must happen ahead of writing the PDF byte array to the outputStream.
The above allowed the browser to show my PDF download as 'started' and I could then navigate away from that page while the download continued.
I was just trying to add a background image from http://wallpaperswide.com/rocky_peak-wallpapers.html to my website.
The link to the particular image is http://wallpaperswide.com/download/rocky_peak-wallpaper-1920x1080.jpg.
However, if I try to load the image from the second link, it doesn't load. If I paste the URL into my browser, it redirects me to the first link.
Why does this happen? Thanks.
Edit
I'm getting some answers that there is an HTTP redirect. I know I can download the file and use locally.
However, the problem is that I'm writing a script that dynamically takes an image from the wallpaperswide.com site and automatically getting the image that fits the person's screen resolution. I just scan the page for the links and try to use those links. I can't download every image from the site and have them locally...
Any suggestions?
Because http://wallpaperswide.com/download/rocky_peak-wallpaper-1920x1080.jpg is not an image, it's a document.
HTTP urls always point to documents, therefore the web server is able to process it and give you the appropriate result.
The website author has added a 302 redirect rule while accessing the links directly, so you can't embed that link directly. Instead, you can download and refer it.
I'm able to post a status on the users wall using GRAPH API - https://graph.facebook.com/me/feed/. But I have problem with the image associated with the post.
In my case, the picture URL looks like this : https://images.XXXXXX.com/Images.aspx?imageId=??? , retrieves image based on request parameter . If I mention the URL as above I don't see the images displayed . Whereas if I mention the picture URL as a static URL (i.e. https://digitalpictures/test.gif), it works . Please help me to resolve this problem
You could save the image from the picture URL as a file with a static URL, then delete it once it's been uploaded to Facebook.
Make sure the https://images.XXXXXX.com/Images.aspx?imageId=??? can be seen by the facebook linter tool. Use it as an og:image tag on a public url. If facebook can't lint it, you can use it as the Picture URL in your graph API call.
Add Open Graph tags to the GRAPH API request, specifically "og:image", "https://images.XXXXXX.com/Images.aspx?imageId=??" for your image.
Facebook Open Graph Protocol 1