Displaying files e g images stored in Google Drive on a website

Question

I was wondering if its possible to access display files like images which are stored in Google Drive on a public website

User · Answer

You can do it directly from Drive  amp  Gmail  Here s how   1 Upload an image to Google drive and set permissions for viewing  can be public OR anyone w  link    Go to Gmail Compose  Select the   next to attachment icon  Select drive icon  triangle shape  Navigate to your image and right-click copy image url Paste into web browser or embed on webpages as needed

User · Answer

UPDATE  As was announced  Google deprecated this feature in Aug 2016  Here s the final update from Google with alternatives   As per April 2013 and using Chrome webkit  the following worked for me   1 Make a folder called e g   quot public quot   2 Select that folder  right click and Share  gt  Share  Click  Select  quot Anyone can access quot   3 Drag and Drop a file into the folder  and let it upload   4 Right click on the file and select Details  One of the lines in the Details-Fieldset reads  quot Hosting quot   Underneath it is an url    https   googledrive com      Drag and Drop that url into a new tab  Copy and paste the url and share or embed it anywhere you like   One limitation is that as far as HTTP goes  only secure HTTP access seems to be possible  Update  Another limitation is that files which Google drive can open  won t be accessible that way  That is  clicking on  quot Details quot  won t show an Google-drive url  To overcome this   right click on the file in question and select  quot Open with gt Manage apps quot      Untick the file-associated apps here Optional  Reload Google Drive Right click on the file and select  quot Details quot  Proceed as in step  4  Note  An alternative to the procedure above  is uploading the file with an extension that Google Drive cannot open is not associated

User · Answer

For images  open an image in google viewer  i e   Method 1  https   docs google com file d 0Bz7qe olclTwWDNJRDRmb1pJamM edit  then view source  find word  texmex-thumb  and aside it there will be link

User · Answer

Some of the previous users were close  but they were missing a step here or there   Here is a video that shows all of the steps    Edit 2-Dec-14 The Below information is incorrect when it comes to the new Google Drive  For the New Google Drive follow these instructions  There are two options you can use   option 1 you can click the cog on the top right and revert to the old google drive  IF you revert  use the instructions after  End Edit     Option 2 or you can follow the work around I found   If I find a better way than this I will update it  but here is what I have found that works   The full link will look like this   https   googledrive com host  folder id  Part one of your link that you need is  https   googledrive com host   for the second half you will need to navigate to the file you would like to share  Once you are in the folder with the file you would like to share  look at the link above  Example 1 https   drive google com drive u 0  folders 0B3UALYkiLexYSXZlcldoU2NpYXM    Example 2 https   drive google com drive u 0  folders 0B3UALYkiLexYSXZlcldoU2NpYXM 0B3UALYkiLexYRkNnOVhsUVozRU0  In both of these above examples  the  Folder ID  you need for sharing is the last group of letters and numbers after the     so in example one  it is  0B3UALYkiLexYSXZlcldoU2NpYXM  in example two it is  0B3UALYkiLexYRkNnOVhsUVozRU0  In the examples I used  example 1 was a folder on my drive  and example 2 was a folder inside that first one  that is why it has the entire first link before the second   We only need the section after the     furthest to the right   So now that you have your  Folder ID   take the above formula  https   googledrive com host  folder id   Example 1 https   googledrive com host 0B3UALYkiLexYSXZlcldoU2NpYXM Example 2 https   googledrive com host 0B3UALYkiLexYRkNnOVhsUVozRU0  Great  now that you have this link  open it in a new page  It will direct you to the shared folder  Once there you can either right click on any file and select  Copy link address  or you can click any file in that folder and it will take you to the hosted image  the URL at the top of the page is the hosting URL   That is the  how you do it  It is quite annoying  and personally it seems a whole lot easier to just revert to the old google drive   I will try to make a new tutorial video ASAP  Let me know if this does not work for you and what problem you are experiencing   End Edit   https   www youtube com watch v QmN22LMPdDk amp feature youtu be  Or you can just follow the written ones below   These pictures go with the ones listed in the steps   https   googledrive com host 0B3UALYkiLexYSXZlcldoU2NpYXM    Create a Folder on your Google Drive that you would like to use for sharing images  Select that folder and go to the sharing options  Change the  Who has access  options from  Specific People  to  Public on the web  All images placed in folder will have a hosting link on them shown in Step 4   Images   Change Folder Option png  Change folder option 2 png  and Change folder option 3 png  place an image in that folder  select the image you would like to share and look at the details section  usually on right hand side  for a section labeled  Hosting  you should find a link that starts with    googledrive com host  random numbers and digits that are the ID for that folder   file name    Use that link to share your images  You can use that link to embed them into other websites    Images  Change folder option 4 png and Change folder option share png

User · Answer

A workaround is to get the fileId with Google Drive SDK API and then using this Url    https   drive google com uc export view amp id  fileId    That will be a permanent link to your file in Google Drive  image or anything else    Note  this link seems to be subject to quotas  So not ideal for public massive sharing

User · Answer

UPDATE  As was announced  Google deprecated this feature in Aug 2016  Here s the final update from Google with alternatives    Yes  it s possible  Provided that you put your files in a public folder  you can get any file in a folder by this URL   https   googledrive com host  lt folderID gt   lt filename gt

User · Answer

here is how from   https   productforums google com forum   topic drive yU yF9SI z0 discussion  1- upload ur image  2- right click and chose  get sharable link   3- copy the link which should look like     https   drive google com open id xxxxxxx   4-change the open  to uc  and use it like   lt img src  https   drive google com uc id xxxxx  gt     its recommended to remove the http  or https  when referencing anything from the web to avoid any issues with ur server

User · Answer

Specifically for G-Suite users   As reported in point 3 here  you can use this URL for hosting image  https   drive google com a domain com thumbnail id imageID   with following replacements   domain  replace with your company s GSuite domain like pikachu imageID  replace with the image id   file id     The prerequisite here is that image should have been shared via drive to target audience  either with each person individually or maybe across the org       If you face problems with size of rendered image  use following options as mentioned here  https   drive google com a domain com thumbnail id imageID amp sz w width -h height    with following replacements  in addition to domain and imageID replacement     width   write the width in pixels  without braces  like 300  height   write the height in pixels  without braces  like 200

User · Answer

Per this blog post  a currently working solution is   lt img src    https   drive google com uc id  imageIdGoesHere  quot    gt   Test here https   drive google com uc id 1m-uOoFzHn4oUGlEsDSEfPBbJ2QhBJzlM This is verified to work as of Aug 8  2020  No shared folder or login is required  But a publicly shared file is

User · Answer

1 Change the settings of your picture to public   2 Get its shareable link   3 Go to this website and generate a direct download link   Worked for me

User · Answer

Here s the simple view link  https   drive google com uc id FILE ID  e g  https   drive google com uc id 0B9o1MNFt5ld1N3k1cm9tVnZxQjg You can do the same for other file types  e g  MP3  PDF  etc

User · Answer

From google drive help pages      To host a webpage with Drive          Open Drive at drive google com and select a file    Click the Share button at the top of the page    Click Advanced in the bottom right corner of the sharing box    Click Change       Choose On - Public on the web and click Save    Before closing the sharing box  copy the document ID from the URL in the field below  Link to share   The document ID is a string of   uppercase and lowercase letters and numbers between slashes in the   URL    Share the URL that looks like  www googledrive com host  doc id  where  doc id  is replaced by the document ID you copied in step 6          Anyone can now view your webpage

User · Answer

Con can disable javascript in your browser open the image file and in the view page source or right click on the image  you will see the image link    check share preference before

User · Answer

If you want to view the file in the browser  it s also possible using a similar method to the one provided by rufo and Torxed   https   drive google com uc export view amp id  fileId

User · Answer

Vetea  if you take the link from picture URL  it does not work  but if you take it from the field  Direct Link  it should work  I have used and tested it in multiple occasions

User · Answer

There is a filetype option in the Google Drive API  You could  maybe  check if that resolves to a valid image  I d look at an option where if the filetype gives me an invalid image  then get a new direct URL for the file  I haven t figured out exactly how to do this though  but maybe that s a path to try

User · Answer

I think it is possible but only for a short time  What you have to do is set the Access Control List of the file to Public Read-Only  or Public Read Write   You can do that programmatically using the Google Document List API  or manually through the  Share  button on the Drive image viewer   Then you can get the URL to the image programmatically by either using the Google Document List API or using the Google Drive API  i e  file getDownloadUrl   in Java   You can also easily get a link to the image manually by right clicking on the image in the Google Drive default image viewer   The problem is that this link has a limited time to live  so it will work for a little while and then stop working   Basically the URL of the image file stored in Drive should be accessible without any authentication once it has been set shared publicly but that URL is going to change at some point  We might find a solution to this in the future like providing a permanent URL that will redirect to these changing URL but no promises

User · Answer

Function  title  goobox tags  image hosting  regex  URL  google drive  dropbox  advanced  return  string  Returns a string URL that can be used directly as the source of an image  when you host an image on google drive or dropbox you can t use the direct URL of your file to be an image source  you need to make changes to this URL to use it directly as an image source  goobox   will take the URL of your image file  and change it to be used directly as an image source  Important  you need to check your files  permissions first  and whether it s public  live example  https   ybmex csb app   cconst goobox    url   gt        let dropbox regex     http s          www     dropbox com        let drive regex    http s          www     drive google com  file  d           if url match dropbox regex           return url replace   http s          www        quot https   dl  quot              if url match drive regex            return  https   drive google com uc id   url replace drive regex   quot  quot   match    w       0  replace       quot  quot                return console error  Wrong URL  not a vlid drobox or google drive url       let url    https   drive google com file d 1PiCWHIwyQWrn4YxatPZDkB8EfegRIkIV view    goobox URL       https   drive google com uc id 1PiCWHIwyQWrn4YxatPZDkB8EfegRIkIV

User · Answer

EDIT   As of 2020  THIS is working  Most previous answers are outdated   Easy Solution All you have to do is open your file   Then  go into your web inspector  for Chrome  Cmd-Shift-I or Ctrl-Shift-I depending on your OS  and get the link  Paste that link into your browser and it will redirect to another link  Copy the new URL  Done    What s the redirect for  It seems that if you use the first link  it can only be accessed when signed in to your Google account  Not very helpful for other people  The second  redirected link  however  does not need you to be signed in  That s the rationale behind it   I deleted the original file shown in the images  but I have another working example here   I ve actually checked back on my example link that I posted in my edit about a week ago  but it no longer seems to be working  I guess these links only work temporarily  so don t use them for any kind of production environment

User · Answer

A very useful api url I found is   imageId - gt  the file ID  width  the desired width  cannot be greater than image resolution width   must be integer for it to work height  the desired height  cannot be greater than image resolution height   must be integer for it to work  https   drive google com thumbnail id   imageId  amp sz w  width -h  height   Note  the api url will keep the aspect ratio so it will stop at whichever dimension is met first

User · Answer

However this answer is simple  infact very simple and yea many have mentioned it that simply put the id of image into the following link https   drive google com uc export view amp id  fileId   But however easy that is  I made a script to run in the console   Feed in an array of complete sharable links from google drive and get them converted into the above link  Then they can be simply used as static addresses     x000D   x000D  array     https   drive google com open id 0B8kNn6zsgGEtUE5FaGNtcEthNWc   https   drive google com open id 0B8kNn6zsgGEtM2traVppYkhsV2s   https   drive google com open id 0B8kNn6zsgGEtNHgzT2x0MThJUlE   x000D   x000D  function separateDriveImageId arr    x000D  for  n 0 n lt arr length n     x000D   x000D  str   arr n  x000D   x000D  for i 0 i lt str length i     x000D  if  str charAt i           x000D  var num   i 1  x000D  var extrctdStrng   str substr num  x000D   x000D    x000D    x000D  console log  https   drive google com uc export view amp id   extrctdStrng  x000D  window open  https   drive google com uc export view amp id   extrctdStrng   blank   x000D    x000D   x000D   x000D    x000D  separateDriveImageId array  x000D   x000D   x000D

User · Answer

Solution provided by Niutech worked for me i e   http   googledrive com host  lt folderID gt   lt filename gt    But there are 2 outstanding issues   You cannot have 2 files with the same name in the same folder in the drive else this link won t work  It is not yet clear but Google seems to be planning to deprecate image hosting via drive  please see the link below  https   support google com richmedia answer 6098968 hl en

User · Answer

You can follow below steps to embed the files you want to your website   Find the PDF file in Google Drive Preview the PDF file in Google Drive Pop-out the Google Drive preview Use the More actions menu and choose Embed item Copy code provided Edit Google Sites page where you want to embed Open the HTML Editor Paste the HTML embed code provided by the Google Drive preview Use the Update button and Save the page  References  https   www steegle com websites google-sites-howtos embed-drive-pdf

[google-drive-api] Displaying files (e.g. images) stored in Google Drive on a website

Examples related to google-drive-api