How to render pdfs within an opensaas project

within a opensaas project, using wasp-lang. How do i make it so that, pdfs can be clicked on and seen in the front-end? I'm trying to use this: For a guide on how to create Ai Creations, check out the <a className="underline text-blue-200 hover:text-blue-300" href="/User_Guide_to_generate_and_upload_ai_images.pdf" download>User Guide</a>. And the folder structure is within the /public. but it is not working? note there's also a static folder, within client/static for images. but its not working as expected for the pdfs?
5 Replies
kapa.ai
kapa.ai3mo ago
Hi @ApexFossa45. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the provided knowledge sources, there isn't enough specific information about rendering PDFs within an OpenSaaS project using Wasp. However, I can provide some general guidance on handling static assets in Wasp projects, which may be relevant to your PDF issue: 1. For static assets that are never referenced in source code or must retain the exact file name, Wasp recommends using the public directory at the root of your project Docs > Project > Static Asset Handling (https://wasp-lang.dev/docs/project/static-assets#the-public-directory). 2. Assets in the public directory are served at the root path / during development and copied to the root of the dist directory as-is. 3. When referencing public assets, you should always use the root absolute path. For example, if you have a file User_Guide_to_generate_and_upload_ai_images.pdf in the public directory, you should reference it as /User_Guide_to_generate_and_upload_ai_images.pdf in your code Docs > Project > Static Asset Handling (https://wasp-lang.dev/docs/project/static-assets#the-public-directory). Given this information, you might want to try adjusting your link to:
<a className="underline text-blue-200 hover:text-blue-300" href="/User_Guide_to_generate_and_upload_ai_images.pdf" download>User Guide</a>
<a className="underline text-blue-200 hover:text-blue-300" href="/User_Guide_to_generate_and_upload_ai_images.pdf" download>User Guide</a>
If this doesn't work, there might be issues with how your project is set up or how the static assets are being served. Unfortunately, the provided knowledge sources don't contain enough information to troubleshoot further or provide a specific solution for rendering PDFs within an OpenSaaS project using Wasp. For more detailed assistance, you might want to consult the Wasp documentation or reach out to the Wasp community for support, as they might have more specific information about handling PDFs in OpenSaaS projects. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @ApexFossa45, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?
Vinny (@Wasp)
Vinny (@Wasp)3mo ago
@ApexFossa45 did you get your problem solved? What errors do you see in the browser console when you try to click the link?
ApexFossa45
ApexFossa45OP3mo ago
@Vinny (@Wasp) hi, thank you for following up. I resolved ghe issue, yep. I had uploaded a corrupted pdf by mistake, which is why it wasnt showing. I uploaded a working one, and then it worked! Thanks, apex
martinsos
martinsos3mo ago
Awesome! @ApexFossa45 I am curios, what was your situation at the end, that works for you now? So you have this PDF in /public? And you reference it from <a> as /mypdf.pdf?
ApexFossa45
ApexFossa45OP3mo ago
@martinsos Hi, yes that is exactly it. I have the pdf in the /public folder, and to reference it within the front-end I use <a href="/mypdf.pdf"></a>, for example

Did you find this page helpful?