cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Announcements
Get summer ready with Dropbox basic - travel documents, plans, progress reminders and more, right over 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: 

Displaying file from Dropbox into a WebApplication using Dropbox API

Displaying file from Dropbox into a WebApplication using Dropbox API

Mostafa Ezzat
Explorer | Level 4

Hello, 
       I want to find the best way to view a file like a video or image from Dropbox into a Website using HTTP or Javascript SDK 

for example I'm trying at least to download a file using the shared link and CURL
I also have a question should I use double quotes or single quotes with CURL in the Doc of the website there is a Double quotes but I saw some API calls with single quotes

Basically, It's sync a folder's files which on Dropbox to the Website. 

curl -X POST https://content.dropboxapi.com/2/sharing/get_shared_link_file \
    --header "Authorization: Bearer <REDACTED> " \
    --header "Dropbox-API-Arg: {  \"path\":\"/Hi/drop.jpg\",\"url\":\"https://www.dropbox.com/s/tmziscnuzavon9a/drop.jpg?dl=0\"}"

It prints this error: {"error_summary": "shared_link_not_found/", "error": {".tag": "shared_link_not_found"}}
 
 
1 Accepted Solution

Accepted Solutions

Re: Displaying file from Dropbox into a WebApplication using Dropbox API

Greg-DB
Dropboxer

Unfortunately, the Dropbox Chooser does not have an option for retrieving "direct" links that do not expire, but I'll pass this along as a feature request. I can't promise if or when that might be implemented though. As a workaround, you can use "preview" links, which don't expire, and modify them for direct access as documented here.

 

Also, regarding the issue with the files being disabled, looking at your code, it seems the issue here is that you're setting sizeLimit: 1024, which is limiting the user to selecting only relatively small files. Please try removing that option and you should see larger files selectable.

View solution in original post

11 Replies 11

Re: Displaying file from Dropbox into a WebApplication using Dropbox API

Greg-DB
Dropboxer

I see you're calling /2/sharing/get_shared_link_file and are supplying both the "url" parameter and "path" parameter. The particular shared link you're sending as the "url" is for a file though; in that case you should not also supply the "path" parameter. The "path" parameter is only for when you need to specify a relative path under a folder when the "url" you are supplying is for a folder, not a file. Try the call again without setting the "path" parameter.

 

Also, I've redacted it from your post, but for future reference, do not share your access token.

Re: Displaying file from Dropbox into a WebApplication using Dropbox API

Mostafa Ezzat
Explorer | Level 4

Thanks for response, If I may ask about something important. I have a website that I need to make the users of Dropbox to import their videos into the application itself by clicking a button and authenticate after that and then pick the folder they want to. 

So What are my options relating to Dropbox API, In other words what are the best features that I should use. 
Should I use sharing link and downloading the video or even can I someway fetch all the folder files into website.

Thanks in advance.

 

Re: Displaying file from Dropbox into a WebApplication using Dropbox API

Mostafa Ezzat
Explorer | Level 4

Btw, I also have Js SDK installed, I didn't make test yet but I think it would work normally. So I mean if my best options to use one of the SDK or HTTP it will be okay. 

Re: Displaying file from Dropbox into a WebApplication using Dropbox API

Greg-DB
Dropboxer

While you can use either the HTTPS endpoints themselves or one of our official SDKs such as the Dropbox JavaScript SDK (or a third party library) to access the Dropbox API, we do recommend using one of the official SDKs, as they'll do much of the work for you.

 

In the Dropbox JavaScript SDK, the corresponding method for /2/sharing/get_shared_link_file is sharingGetSharedLinkFile.

 

Exactly what features you use is up to you, depending on the specifics of what your app needs exactly. I recommend reading the File Access Guide for some good reference on interacting with files in Dropbox accounts via the Dropbox API.

 

Also, as an alternative to the API/SDKs, for web apps that just need to allow end-users to select files from their accounts to give to the app, the Dropbox Chooser can be a good, simpler option. Check that out first to see if that works for your use case.

Re: Displaying file from Dropbox into a WebApplication using Dropbox API

Mostafa Ezzat
Explorer | Level 4

Yes Chooser Feature this's exactly what I want, but the button it doesn't working at all can I just get a demo to implement the button in my app and able to make the user login and choose the files that he wants with providing options array to this. Thanks in advance. 

Re: Displaying file from Dropbox into a WebApplication using Dropbox API

Greg-DB
Dropboxer

The Dropbox Chooser page does include a working demo under the "Demo" section. Is that "Choose from Dropbox" button not working for you? If not, what exactly does/doesn't happen? Do you get any error message?

Re: Displaying file from Dropbox into a WebApplication using Dropbox API

Mostafa Ezzat
Explorer | Level 4

This's my code I added the js lib of Dropbox, Do I miss something else? but the button it doesn't appear
I also have only one issue can I make the direct link doesn't expire because my scenario will be the user will choose the videos or images, Then I get the direct link and that will be previewed in the application that if anybody wants to watch the video or the image but the link expires. 

<html>

<head>
  <script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="2hver24zt8u8zdv"></script>

</head>

<body>

  <video controls autoplay width="620" type="video/mp4">

  </video>


 


  <script type="text/javascript">
    options = {

      // Required. Called when a user selects an item in the Chooser.
      success: function(files) {
        alert("Here's the file link: " + files[0].link)
      },

      // Optional. Called when the user closes the dialog without selecting a file
      // and does not include any parameters.
      cancel: function() {

      },

      // Optional. "preview" (default) is a preview link to the document for sharing,
      // "direct" is an expiring link to download the contents of the file. For more
      // information about link types, see Link types below.
      linkType: "direct", // or "direct"

      // Optional. A value of false (default) limits selection to a single file, while
      // true enables multiple file selection.
      multiselect: true, // or true

      // Optional. This is a list of file extensions. If specified, the user will
      // only be able to select files with these extensions. You may also specify
      // file types, such as "video" or "images" in the list. For more information,
      // see File types below. By default, all extensions are allowed.
      extensions: ['.pdf', '.doc', '.docx', '.mp4'],

      // Optional. A value of false (default) limits selection to files,
      // while true allows the user to select both folders and files.
      // You cannot specify `linkType: "direct"` when using `folderselect: true`.
      folderselect: true, // or true

      // Optional. A limit on the size of each file that may be selected, in bytes.
      // If specified, the user will only be able to select files with size
      // less than or equal to this limit .
      // For the purposes of this option, folders have size zero.
      sizeLimit: 1024, // or any positive number
    };
    var button = Dropbox.createChooseButton(options);
    document.getElementById("container").appendChild(button);
  </script>


</html>

Re: Displaying file from Dropbox into a WebApplication using Dropbox API

Mostafa Ezzat
Explorer | Level 4

Update 1: Everything is good Sir, It works and it's fine, My only problem now is link expiring because my scenario will be I get the direct links save them in the database then get these links when it requested so if the link expires will be error so how can I make the direct link doesn't expire, and Is there any comments about this scenario, Do you think I'll face any problem in it soon while implementing along with Dropbox? Thanks in advance 

Update: I did implement the button and it opens but I can't select any thing the selection button not exist. So all I just need is to get a direct link that doesn't expire at all. Thanks in advance and appreciate. 
I followed this link :https://dropbox.tech/developers/quickly-integrate-file-upload-in-your-web-app-using-the-chooser
Screenshot 2022-04-21 121111.png

Re: Displaying file from Dropbox into a WebApplication using Dropbox API

Greg-DB
Dropboxer

Unfortunately, the Dropbox Chooser does not have an option for retrieving "direct" links that do not expire, but I'll pass this along as a feature request. I can't promise if or when that might be implemented though. As a workaround, you can use "preview" links, which don't expire, and modify them for direct access as documented here.

 

Also, regarding the issue with the files being disabled, looking at your code, it seems the issue here is that you're setting sizeLimit: 1024, which is limiting the user to selecting only relatively small files. Please try removing that option and you should see larger files selectable.

Poll
Which Dropbox Plan do you have?
Who's talking

Top contributors to this post

  • User avatar
    Greg-DB Dropboxer
  • User avatar
    Mostafa Ezzat Explorer | Level 4
What do Dropbox user levels mean?
Need more support?