after uploading pdf with .net, how to show thumbnail on my page?

rwahdan

I am able to upload pdf file into cloudinary but on my page the file is not shown because it is not an image. how to show thumbnail of that pdf file in my page?

Tamara

Hi @rwahdan,

You should just change the URL to have these parameters:

<img _ngcontent-ng-c346306970="" alt="" class="img-thumbnail" src="https://res.cloudinary.com/hspa2024/image/upload/v1710066186/FamilyDocs_rateel%20pass.pdf_10_03_2024__14_23_02.pdf" title="FamilyDocs_rateel pass.pdf_10_03_2024__14_23_02">

You don't have to do it manually.

Tamara

Hi @rwahdan,

In my case, the URL loaded without the additional extension.

Indeed, the original PDF file underwent changes because of the incoming transformation you executed earlier, saving the transformed PDF thumbnail as the new 'original.' To retrieve the unaltered original PDF, you'll need to re-upload it with the overwrite: true parameter.

Please note that the PDF you uploaded contains sensitive information about this woman. I suggest you remove this image or change its location to change the URL. This is a public link and a public forum.

-Tamara

Tamara

Hello @rwahdan,

You have the option to convert a PDF to an image format, such as jpg, by specifying it in the delivery URL. For instance, by adding 'f_jpg' to the URL (j_jpg):

https://res.cloudinary.com/tamarayul/image/upload/f_jpg/v1663766776/sample_ovcfof.pdf

You can create a thumbnail from it using the c_thumb parameter:

https://res.cloudinary.com/tamarayul/image/upload/c_thumb,g_north,h_250,w_250,f_jpg/v1663766776/sample_ovcfof.pdf

If you wish to exclude the default delivery of the first page, this can be adjusted accordingly (here I added the pg_2 parameter:

https://res.cloudinary.com/tamarayul/image/upload/c_thumb,g_north,h_250,w_250,f_jpg/pg_2/v1663766776/sample_ovcfof.pdf

For detailed information, I've included a link to our documentation: https://cloudinary.com/documentation/paged_and_layered_media#deliver_a_selected_pdf_page_as_an_image

Best regards,

Tamara

rwahdan

You can create a thumbnail from it using the c_thumb parameter

How to include that in my code? Here is what I have:

public async Task<ImageUploadResult> UploadFamilyDocumentsAsync(IFormFile photo, string folder)

        {

            var uploadResult = new ImageUploadResult();

            if(photo.Length > 0)

            {

                using var stream = photo.OpenReadStream();

                var uploadParams = new ImageUploadParams

                {    

                    File = new FileDescription(photo.FileName, stream),

                    UseFilenameAsDisplayName = true,

                    UseFilename = true,

                    PublicId = folder,

                    Transformation = new Transformation()

                        .Height(500).Width(800)

                        .Page(1).BuildImageTag("woman.jpg")

                };

                uploadResult = await cloudinary.UploadAsync(uploadParams);

            }

            return uploadResult;

        }

I am getting error:

'Transformation' does not contain a definition for 'BuildImageTag'

Tamara

Hi @rwahdan,

The `Transformation` method allows you to specify additional transformations, including the `c_thumb` parameter:

...
      Transformation = new Transformation()

        .Height(500)

        .Width(800)

        .Crop("thumb") 
...

Best,

Tamara

rwahdan

Thanks for the reply,

I still not getting the c_thumb in the url, how to add it?

<img _ngcontent-ng-c346306970="" alt="" class="img-thumbnail" src="https://res.cloudinary.com/hspa2024/image/upload/v1710066186/FamilyDocs_rateel%20pass.pdf_10_03_2024__14_23_02.pdf" title="FamilyDocs_rateel pass.pdf_10_03_2024__14_23_02">

Tamara

Hi @rwahdan

You can dynamically incorporate it into the URL :)

Consider the original PDF file: https://res.cloudinary.com/tamarayul/image/upload/f_jpg/v1663766776/sample_ovcfof.pdf

Now, append the following parameters to the URL:

https://res.cloudinary.com/tamarayul/image/upload/c_thumb,g_north,h_250,w_250,f_jpg/v1663766776/sample_ovcfof.pdf

The approach I demonstrated earlier generates a thumbnail directly from the PDF and preserves it as the original (incoming transformation). This eliminates the need for a separate thumbnail creation step.

Best,

Tamara

rwahdan

I really am sorry for asking many questions as I am beginner to programming.

Now, append the following parameters to the URL:

how to add them to the url? in my code all what I have:

 uploadResult = await cloudinary.UploadAsync(uploadParams);

Tamara

Hi @rwahdan, that's totally fine!

In the upload response, you'll receive the URL for the uploaded asset. Feel free to customize it by appending various parameters to suit your transformation requirements.

The default asset delivery URL has the following structure:

https://res.cloudinary.com/<cloud_name>/<asset_type>/<delivery_type>/<transformations>/<version>/<public_id_full_path>.<extension>

Please let me know if you have any further questions!

-Tamara

rwahdan

so uploadResult will have the URL, how to customize it? and the line code is already uploaded:

 uploadResult = await cloudinary.UploadAsync(uploadParams);

do i need to upload again?

Tamara

Hi @rwahdan,

You don't need to upload the file again if you're modifying the transformation parameters. The existing file will be processed with the new parameters when you call the URL with the transformations applied.

Just copy the URL of the asset from your media library and add the transformations I shared earlier.

-Tamara

rwahdan

this will be done manually, what I want is to do it programatically because I have many pdf files and in my page i want to show thumbnail image of the pdf files before the user can download them.

rwahdan

I have added the following before saving to my db:

https://res.cloudinary.com/hspa2024/image/upload/c_thumb,h_500,w_800/FamilyDocs_marraige.pdf_10_03_2024__17_27_22

still not shown as img source in my code but the link if copied will open ok.

rwahdan

I have added the following as mentioned

<img _ngcontent-ng-c346306970="" src="https://res.cloudinary.com/hspa2024/image/upload/c_thumb,h_500,w_800/{{photo.publicId}}"

alt="{{photo.publicId}}" class="img-thumbnail" title="{{photo.publicId}}" class="img-thumbnail">

but here is what i get

<img _ngcontent-ng-c3139445955="" _ngcontent-ng-c346306970="" class="img-thumbnail" src="https://res.cloudinary.com/hspa2024/image/upload/c_thumb,h_500,w_800/FamilyDocs_10_03_2024__18_06_23" alt="FamilyDocs_10_03_2024__18_06_23" title="FamilyDocs_10_03_2024__18_06_23">

it is empty image.

Tamara

Hi @rwahdan,

The image does load for me (please note that this image contains sensitive information and you shared a public link here): https://res.cloudinary.com/hspa2024/image/upload/c_thumb,h_500,w_800/FamilyDocs_10_03_2024__18_06_23

And I can't find any issues with this image in our logs. What is the error you see in the console?

rwahdan

the link is broken

rwahdan

I had to include .png or .jpg for it to work. But when I went to the cloudinary console, I found my pdf type is image and only one page instead of all pages (3).