ToolJet/docs/versioned_docs/version-3.16.0-LTS/widgets/pdf/loading-image-pdf-from-db.md

id	title
loading-image-pdf-from-db	Upload And View PDFs Using Base64 String

This guide shows how to upload and view PDFs using the base64 string format in your ToolJet application.

1. Create a New Table In ToolJet Database

• Create a new table named test_db.

• The id field will be present by default to create a unique identifier for each record in our database table.

• Click on Add more columns button and add this column: pdf and select varchar as datatype.

While we are using the ToolJet Database for this guide; feel free to use other databases while applying the same principles.

<img style={{ marginTop: '15px', marginBottom:'15px' }} className="screenshot-full img-full" src="/img/how-to/load-base64/create-table-pdf.png" alt="Create New Table in TJDB" />

2. Upload File To The Database

• Create a new application and name it Upload PDFs Example.

• Drag and drop a Filepicker component on the canvas from the components library on the right.

• Rename the filepicker component to pdf_picker.

• Retain the default {{"application/pdf"}} setting for the Accept file types property in the pdf_picker component, as it's intended for pdf uploads.

• Click on the pdf_picker component and select a pdf file to upload.

• After uploading, you will see the filename displayed on the filepicker component.

<img style={{ marginBottom:'15px' }} className="screenshot-full img-full" src="/img/how-to/load-base64/pdf-file-upload.png" alt="Uploaded Files using a filepicker" />

• Click on the + Add button in the query panel to create a new query, choose ToolJet Database as the data source, select test_db as Table name, and Create Row as Operations. Name this query upload_files.

• Under the Columns section, add this column pdf and set the value given below :

{{components.pdf_picker.file[0].base64Data}}

In the above query, we are using the exposed variables of the filepicker component to get the base64 string of the file we had uploaded earlier.

<img style={{ marginTop: '15px', marginBottom:'15px' }} className="screenshot-full img-full" src="/img/how-to/load-base64/upload-pdf-query.png" alt="Add Files Query" />

• Add a Button component below the filepicker and rename it to upload.

• Set the Button's text to Upload and create a New event handler with the following settings: Event - On click, Action - Run Query and Query - upload_files.

• Now, Click on the Upload button to upload the files that we had selected in the Filepicker component earlier.

<img style={{ marginBottom:'15px' }} className="screenshot-full img-full" src="/img/how-to/load-base64/pdf-event-handler.png" alt="Upload Button Properties" />

The upload process is now complete. Whenever a file is selected in the Filepicker component and the upload button is clicked, the base64 string of the file will be automatically written to the database.

3. View a PDF File

• Create a query named get_files to retrieve base64 strings from test_db : Click on + Add button in the query panel, select ToolJet as Database, test_db as Table name, and List rows as Operations.

• Enable Run this query on application load from Settings.

<img style={{ marginBottom:'15px' }} className="screenshot-full img-full" src="/img/how-to/load-base64/get-query.png" alt="Fetch Files Query" />

• Drag a PDF component onto the canvas from the components library. Rename the PDF component to display_pdf.

• In the URL property of the display_pdf component, enter the following:

{{'data:pdf;base64,' + queries.get_files.data[0].pdf}}

The provided code constructs a Data URL to display the base64-encoded data as a PDF.

<img style={{ marginTop: '15px', marginBottom:'15px' }} className="screenshot-full img-full" src="/img/how-to/load-base64/display-pdf.png" alt="Final Preview" />