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: 

Re: How can I display PDF in my React app

How can I display PDF in my React app

mrdk86
New member | Level 2

Hi,

I am tryng to display pdf on my website but I try to use files_get_preview function, download but only think I can Fetch the data but not displaying in an embed/iframe.

I have those erros; "unsupported extension" and  "a frame because it set 'X-Frame-Options' to 'deny'."

How can I display a simple PDF on my site?

Thx

4 Replies 4

Jay
Dropbox Staff
Hi there, if you’re referring to displaying a file as it appears in your Dropbox account via a shared link, then you can do so by renaming the dl=0 to raw=1 in the link.
 
This way the PDF gets rendered as the PDF, and should be treated as such.
 
If you’re referring however to accessing the file via the Dropbox API, let me know and I can forward this thread to the appropriate forum!

Jay
Community Moderator @ Dropbox
dropbox.com/support


Heart Did this post help you? If so, give it a Like below to let us know.
:arrows_counterclockwise: Need help with something else? Ask me a question!
:pushpin: Find Tips & Tricks Discover more ways to use Dropbox here!
:arrows_counterclockwise: Interested in Community Groups? Click here to join!

mrdk86
New member | Level 2

Is not working I'll paste the code for any suggestion

 

dbx.filesListFolder({path: '/folder_name})
      .then(function(response) {
        if(response){
        var a = []
        response.entries.map((r, i) => {
          console.log(r.name)
          return a.push(r.path_display)
        })
        self.setState({name: a})
        }
      })
      .catch(function(error) {
        console.log(error);
      });

I tryed using filesDownload aswell but the same

<embed src={`https://www.dropbox.com/home/folder/${this.state.name}?raw=1`} width="800px" height="800px" />
 
any suggestion?
thanks!

Jay
Dropbox Staff
Looks like you’re referring to the API functions. I’ll move this thread to the correct section for the expert to assist you.
 

Jay
Community Moderator @ Dropbox
dropbox.com/support


Heart Did this post help you? If so, give it a Like below to let us know.
:arrows_counterclockwise: Need help with something else? Ask me a question!
:pushpin: Find Tips & Tricks Discover more ways to use Dropbox here!
:arrows_counterclockwise: Interested in Community Groups? Click here to join!

Greg-DB
Dropbox Staff

The filesListFolder method you included in your code is just for listing files and folders; it doesn't itself offer access to file data.

Also, the 'https://www.dropbox.com/home/folder/...' kind of URLs you mentioned are private URLs for your account. You can't use them to embed file data. Jay was referring to getting a shared link (e.g., via the Dropbox web site, or via the Dropbox API), and modifying it for direct access.

If you're using the API via the JavaScript SDK and want to retrieve the original file data, you should use the filesDownload method. E.g., you can use that to get the PDF data for a PDF file. (This is distinct from the shared link functionality noted above.)

If the file isn't already a PDF but you want a PDF version of it, you can use the filesGetPreview method, if the file is a supported type (see the docs for information).

In any case though, these method only gives you the data. They do not offer a mechanism for embedding that data on web site. That's a more general web development question, not specific to Dropbox, so I can't offer guidance on that in particular.

Need more support?