after uploading pdf with .net, how to show thumbnail on my page?
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?
Best Answers
-
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.
0 -
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: trueparameter.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
0
Answers
-
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_thumbparameter:If you wish to exclude the default delivery of the first page, this can be adjusted accordingly (here I added the
pg_2parameter: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
0 -
You can create a thumbnail from it using the
c_thumbparameterHow 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'
0 -
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">
0 -
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:
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
0 -
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);
0 -
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
0 -
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?
0 -
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
0 -
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.
0 -
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.
0 -
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.
0 -
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?
0 -
the link is broken
0 -
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).
0
