How to use picture on pdf

monday Apps & Developers
, , , , , , , ,
1

I want to create pdf file using data from monday. I can use text, number columns value but I can not use file column. This file column will contain only picture. How can I use picture on pdf?

2

Try DocuGen app https://monday.com/marketplace/12

3

The data in the file column is stored in a different object than other column types, because it’s a reference to a file stored on our side.

You need to use the assets object in our API to get this data. Here are some docs: Files

4

I tried but is not working for me. I want to create custom with javascript. I can use other data (text, number like)

5

Thank you. I got data like file api call. But I can not use it as a picture. How can I do ?

6

Hello there @1fatma,

If you want to use the image and insert it in a PDF you will probably need the public url from the asset.

You can use a query like this one to get it:

{
  items(ids: 1234567890) {
    assets {
      public_url
    }
  }
}

You can download the image using that URL and then process it as you wish to add it to a PDF on your end.

I hope that helps!

Cheers,
Matias

7

Hello @Matias.Monday ,
I tried this query. But I can not use as I want. I want to use custom app. I got CORS error. I need different type like “BASE64”.

8

Hello again,

I do not have much experience using base64 so I am not sure how that could be achieved.

Let’s hope someone here in the community is experienced with you and can help here :crossed_fingers:

Cheers,
Matias

9

@Matias.Monday Base64 is just an encoding of the data. You can think of it like converting an image from one format to another, like .png to .jpeg.

@1fatma – going to try and answer this in two parts:

Solving the CORS error

If you’re getting a CORS error, I’m guessing you are trying to retrieve the file from the frontend. Is that correct?

The public_url field does not support cross-origin requests unless they are hosted on a monday CDN. To solve this, you need to do one of two things:

  • Upload your code to the monday servers by following these instructions (from the quickstart guide).
  • Make the request from the backend

Getting the data in the right format

When you send a GET request to the public URL, you will get the file plus some response headers.

One of these response headers will be Content-Type, which tells you the format of the data. For example:
Content-Type: image/jpeg
Content-Type: image/png

Once you know what kind of data you’re working with, you’ll need to convert it to base64 encoding. Depending on what language/framework you’re using, you’ll probably have a couple of different ways of doing it.

Here is a StackOverflow posts that explain how to do it in Javascript. Note that I haven’t tested the methods there, just wanted to share: How to convert an image to Base64 with Javascript

And here is a resource explaining the different MIME types that could be returned by the Content-Type header:
Intro to MIME types
Important MIME types you should know