cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Announcements
Want to learn some quick and useful tips to make your day easier? Check out how Calvin uses Replay to get feedback from other teams at Dropbox here.

Dropbox API Support & Feedback

Find help with the Dropbox API from other developers.

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Embedding images without sharing for just the using signed in (trying to build an app)

Embedding images without sharing for just the using signed in (trying to build an app)

Sjoerd
Explorer | Level 4
Go to solution

Hi,

I'm trying to build an app to sort images. Mostly focused on holiday images. Since I have these spread through my Dropbox(phone camera uploads, dslr saved to a seperate Dropbox folder, shares from others who took pictures).

The idea is to make a webapp where I can go trough these images stored on Dropbox and label them, categorise them, etc.

Now most of that is no problem. But! I want to show the user (after giving permissions to the app) his own images in the browser. And I can't get it to work.

- Sharing isn't what I want, since then it will be "public". And I can't share with just myself.
- Temporary url creation can't create a link that works for embedding in html
- Downloading a file actually downloads it to the server and then I have to transfer it to the client of the user and embed it via javascript. This is messy and quite inefficient. I'm also worried about performance, since I want to go trough the images quickly(2500 vacation pictures is a lot of work).

Is there a way to embed images in html without sharing publicly?

I'm using the Python api and Flask.

Thanks in advance!

1 Accepted Solution

Accepted Solutions

Greg-DB
Dropbox Staff
Go to solution

Using the temporary links returned by /2/files/get_temporary_link would be the closest thing to what you're looking for. I believe that should technically work for embedding images, e.g., using the link the 'src' for an <img> tag. In what way did that not work?

An alternative would be to make the API calls in JavaScript directly from the browser, e.g., using the API v2 JavaScript SDK, to avoid sending it through your server. That would look something like this:

dbx.filesDownload({path: '/test.jpg'})
  .then(function(response) {
    var blobUrl = URL.createObjectURL(response.fileBlob);
    var img = document.createElement('img');
    img.setAttribute('src', blobUrl);
    document.getElementById('results').appendChild(img);
  })
  .catch(function(error) {
    console.error(error);
  });

I'll also send this along as a feature request for a better way to do this via the server though. 

View solution in original post

3 Replies 3

Greg-DB
Dropbox Staff
Go to solution

Using the temporary links returned by /2/files/get_temporary_link would be the closest thing to what you're looking for. I believe that should technically work for embedding images, e.g., using the link the 'src' for an <img> tag. In what way did that not work?

An alternative would be to make the API calls in JavaScript directly from the browser, e.g., using the API v2 JavaScript SDK, to avoid sending it through your server. That would look something like this:

dbx.filesDownload({path: '/test.jpg'})
  .then(function(response) {
    var blobUrl = URL.createObjectURL(response.fileBlob);
    var img = document.createElement('img');
    img.setAttribute('src', blobUrl);
    document.getElementById('results').appendChild(img);
  })
  .catch(function(error) {
    console.error(error);
  });

I'll also send this along as a feature request for a better way to do this via the server though. 

Sjoerd
Explorer | Level 4
Go to solution

@Greg-DB wrote:

Using the temporary links returned by /2/files/get_temporary_link would be the closest thing to what you're looking for. I believe that should technically work for embedding images, e.g., using the link the 'src' for an <img> tag. In what way did that not work?


This works. It's not perfect, since the image is still available publicly and I have to check/store/retrieve if I've made a temp link recently. But it works!

I tried this in a seperate browser window and you've got some smart stuff going on in the back that renders your site around it if you do this. But as an embedded image it just shows the image.

I very much would like the feature request yes. So I can only see my own images. Is there anywhere I can follow that?

Thanks for the help!

Greg-DB
Dropbox Staff
Go to solution

I'll make a note to follow up on this thread if/when a better solution is implemented. 

Need more support?
Who's talking

Top contributors to this post

  • User avatar
    Greg-DB Dropbox Staff
  • User avatar
    Sjoerd Explorer | Level 4
What do Dropbox user levels mean?