cancel
Showing results for 
Search instead for 
Did you mean: 
Announcements

Known issues updated. Learn more

February contest: Post your Paper workflow to win a Dropbox t-shirt and tote bag!
Highlighted

How can I display PDF in my React app

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

Re: How can I display PDF in my React app

Dropboxer
Dropboxer
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
https://dropbox.com/support


Heart Did this post help you? If so please give it a Like below. 
White check mark Did this post fix your issue/answer your question? If so please press the 'Accept as Solution' button to help others find it.
Arrows Counter Clock Still stuck? Ask me a question! (
Questions asked in the community will likely receive an answer within 4 hours!)

Reply
Loading...

Re: How can I display PDF in my React app

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!
Reply
Loading...

Re: How can I display PDF in my React app

Dropboxer
Dropboxer
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
https://dropbox.com/support


Heart Did this post help you? If so please give it a Like below. 
White check mark Did this post fix your issue/answer your question? If so please press the 'Accept as Solution' button to help others find it.
Arrows Counter Clock Still stuck? Ask me a question! (
Questions asked in the community will likely receive an answer within 4 hours!)

Reply
Loading...

Re: How can I display PDF in my React app

Dropboxer

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.

Reply
Loading...
API Support

Have a question? Our Dropbox Community is here to help you find an answer!
You won’t have to wait too long for a reply, but why not learn more about the Community while you’re here.

Not the right discussion for you? Find out what else our Community has to say about API Support.

Or, search our Help Center for even more.

Who's talking
Top contributors to this post