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

Options
rwahdan
rwahdan Member Posts: 51
edited March 9 in Developer APIs

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?



Tagged:

Best Answers

  • Tamara
    Tamara Member, Cloudinary Staff Posts: 110
    Answer ✓
    Options

    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
    Tamara Member, Cloudinary Staff Posts: 110
    Answer ✓
    Options

    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

Answers

  • Tamara
    Tamara Member, Cloudinary Staff Posts: 110
    Options

    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
    rwahdan Member Posts: 51
    edited March 10
    Options

    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
    Tamara Member, Cloudinary Staff Posts: 110
    Options

    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
    rwahdan Member Posts: 51
    Options

    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
    Tamara Member, Cloudinary Staff Posts: 110
    edited March 10
    Options

    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
    rwahdan Member Posts: 51
    Options

    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
    Tamara Member, Cloudinary Staff Posts: 110
    Options

    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
    rwahdan Member Posts: 51
    Options

    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
    Tamara Member, Cloudinary Staff Posts: 110
    Options

    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
    rwahdan Member Posts: 51
    Options

    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
    rwahdan Member Posts: 51
    Options

    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
    rwahdan Member Posts: 51
    Options

    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
    Tamara Member, Cloudinary Staff Posts: 110
    Options

    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
    rwahdan Member Posts: 51
    Options

    the link is broken

  • rwahdan
    rwahdan Member Posts: 51
    Options

    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).