How to get images a user uploads on a Wix site to display on a PDF using the PDF Generator API?

Ask the community
,
1

Hey Guys =)

I was hoping someone could pretty please give me advice on how I can make images appear on a PDF using the PDF Generator API which is setup using the following tutorial
https://www.wix.com/velo/forum/tips-tutorials-examples/example-pdf-generator

The code on the page is:

import { getPdfUrl } from 'backend/pdfGenerator'
import wixLocation from 'wix-location';

$w.onReady(function () {
    $w("#ecMenu").show();
});

export async function pdfButton_click(event) {
    const name = $w('#name').value
    const date = $w('#date').value
    const group = $w('#group').value
    const activity = $w('#activity').value
    const title = $w('#lesson').value
    const childsName = $w('#input11').value
    const experience = $w('#experience').value
    const introduction = $w('#introduction').value
    const image1 = $w("#uploadButton1").value
    const outcomes = $w("#text250").text
    const next = $w("#next").value
    const pdfUrl = await getPdfUrl({ name, date, group, title, next, outcomes, childsName, activity, experience, image1, introduction })
    wixLocation.to(pdfUrl);
}

The backend code is :

import PDFGeneratorAPI from 'pdf-generator-api'

const apiKey = 'actual api key is here on the website';
const apiSecret = 'actual api secret is here on the website';
const baseUrl = 'https://us1.pdfgeneratorapi.com/api/v3/';
const workspace = "emails@gmail.com";
const templateID = "314644";

let Client = new PDFGeneratorAPI(apiKey, apiSecret)
Client.setBaseUrl(baseUrl)
Client.setWorkspace(workspace)

let obj = {

 "image1" : "{imageUrl}"
,
 }

export async function getPdfUrl(data) {
    const {response} = await Client.output(templateID, data, undefined, undefined, {output: 'url'})
    return response
}

Here is a screenshot of the template setup:

527×750 70.7 KB

Here is a screenshot of the website page where the user submits the form and uploads the images I need to display on the PDF

493×747 146 KB

Any advice on how I can acheive this would be hugely appreciated =)

2

The form is only allowing the user to select the images, the images aren’t actually being uploaded. The images are uploaded using uploadFiles() .

In order to upload the selected images, see the UploadButton Introduction for an explanation and some sample scenarios.

3

Thanks so much for your reply =)
I changed the code with what I found on the link you sent me but nothing happens at all.
Could you please tell me if that’s any closer?

import { getPdfUrl } from 'backend/pdfGenerator'
import wixLocation from 'wix-location';

$w.onReady(function () {
    $w("#ecMenu").show();
});
 $w("#uploadButton1").fileType = "Image"; // Site visitor can choose an image 
export async function pdfButton_click(event) {
    const image1 = "{fileUrl}"
    const name = $w('#name').value
    const date = $w('#date').value
    const group = $w('#group').value
    const activity = $w('#activity').value
    const title = $w('#lesson').value
    const childsName = $w('#input11').value
    const experience = $w('#experience').value
    const introduction = $w('#introduction').value
    const outcomes = $w("#text250").text
    const next = $w("#next").value
     if ($w("#uploadButton1").value.length > 0) {  // Site visitor chose a file
    console.log("Uploading the following files:")
    $w("#uploadButton1").uploadFiles()
      .then( (uploadedFiles) => {
        uploadedFiles.forEach(uploadedFile => {
        console.log("File url:" + uploadedFile.fileUrl);
        })
      console.log("Upload successful.");
      } )
      .catch( (uploadError) => {
      console.log("File upload error: " + uploadError.errorCode);
      console.log(uploadError.errorDescription);
      } );
  }
  else {  // Site visitor clicked button but didn't choose a file
    console.log("Please choose a file to upload.")
  }
    const pdfUrl = await getPdfUrl({ name, date, group, title, next, outcomes, childsName, activity, experience, image1, introduction })
    wixLocation.to(pdfUrl);
}
4

The uploadFiles() function returns a Promise (.then) when the files have been successfully uploaded and that’s where you need to use the images for your PDF document. You are using image1 , which I don’t see anywhere else in your code, in the call to getPdfUrl(). Also, the call to getPdfUrl() should be inside of the .then() which is where the images will be available.

To better understand how Promises work, see these articles:

5

@yisrael-wix thanks for your support again. I couldn’t get it to work, I tried to hire someone via Wix twice, and everyone stopped replying or said they cannot help as soon as I shared a link to this post explaining what I needed to hire them for. I also contacted a few people externally and the PDF support themselves and no one can help.

I am really lost here and need it to work to get my client’s site live, could you pretty please provide me with any further advice or if I could hire you, Or anyone you know of that would actually be able to do it I could hire?

I would appreciate it SOOO much!!

If not maybe you could recommend another service provider that might be easier for me to use and set up?

Literally, any advice at all would be so appreciated =)

6

I am almost sure that your wished functionality is possible to be generated, at least using an html-component for your purposes and CANVAS.

7

@russian-dima thank you for your reply =) . Could you please tell me more

8

@info22695

Before i start to direct you to use an alternative way, perhaps you first should try to go your already taken direction and complete your function regarding Yisrael’s suggestions…

934×1920 208 KB

Yisrael already highlighted some important checkpoints, whehe you should put your eyes on and check it.

All hints, how to solve your issue, already mentioned by Yisrael. All you have to do, is to follow the tips and check step by step the provided informations.

Since i am not in front of my PC and answering you from mobile, it’s a little bit difficult to inspect your whole code. But i have played around a little bit…

934×1920 339 KB

Check if you can use this one…

import { getPdfUrl } from 'backend/pdfGenerator'
import wixLocation from 'wix-location';

$w.onReady(function () {$w("#ecMenu").show();});
 $w("#uploadButton1").fileType = "Image";
export async function pdfButton_click(event) {
    let image=[];
    const name = $w('#name').value
    const date = $w('#date').value
    const group = $w('#group').value
    const activity = $w('#activity').value
    const title = $w('#lesson').value
    const childsName = $w('#input11').value
    const experience = $w('#experience').value
    const introduction = $w('#introduction').value
    const outcomes = $w("#text250").text
    const next = $w("#next").value
     if ($w("#uploadButton1").value.length > 0) {console.log("Uploading the following files:")
   		 $w("#uploadButton1").uploadFiles()
      .then((uploadedFiles) => {console.log(uploadedFiles);
          let counter=0;
          uploadedFiles.forEach(uploadedFile => {
        	console.log("File url:" + uploadedFile.fileUrl);
        	counter = counter+1
          image[counter] = uploadedFile.fileUrl;
        })
        console.log("Upload successful.");
      })
      .catch( (uploadError) => {
      console.log("File upload error: " + uploadError.errorCode);
      console.log(uploadError.errorDescription);
      });
  }
  else {  // Site visitor clicked button but didn't choose a file
    console.log("Please choose a file to upload.")
  }
    const pdfUrl = await getPdfUrl({name, date, group, title, next, outcomes, childsName, activity, experience, image[0], introduction })
    wixLocation.to(pdfUrl);
}
9

@russian-dima Thank you again for your reply =)
I have been trying that one and other similar versions all day and still no luck.
I am getting this red error here, and the PDF won’t generate at all

1554×217 8.85 KB

Really appreciate any more advice at all

10

@info22695

I have done a mistake.
Change the following line…
image [ counter ] = uploadedFile . fileUrl ;
…to…
image.push(uploadedFile . fileUrl) ;

You can also delete the counter-variable.

The “image”-array will be filled with the uploaded-file-urls. Which should later look like the following…
image = [url1, url2, url3, url4, and so on…];
You can check for every single value in the Array, like this…
console.log(image[0]);
console.log(image[1]);
console.log(image[2]);
…ans so on…

Use more the -->CONSOLE, it will help you to solve your issue.

Check if you get RESULTS in your CONSOLE.
If YES → GO NEXT STEP
If NOT–> USE CONSOLE TO DEBUG ERROR.

I do not know if you have already done this, but you should move the following line into THEN()-CODE-PART…
const pdfUrl = await getPdfUrl ({ name , date , group , title , next , outcomes , childsName , activity , experience , image [ 0 ], introduction }) wixLocation . to ( pdfUrl );

Why? You have First to know the generated URLs of the images, before you can use them. Yisrael already mentioned this in his post.

11

@russian-dima I think I am making it worse?
I can’t get my head around how to make it work =(
Here is the latest attempt, the PDF generates fine still but no luck on the images.
Could I please hire you? I am pretty much waiting on this last function for my client to be able to publish the site, and this is really important to them.
Please let me know if that’s possible at all

Each time I tried moving those lines of code to the .then I got errors and nothing would work for me

 import { getPdfUrl } from 'backend/pdfGenerator'
import wixLocation from 'wix-location';

$w.onReady(function () {
  $w("#ecMenu").show();});
 $w("#uploadButton1").fileType = "Image";
export async function pdfButton_click_1(event) {
    let image=[];
    const name = $w('#name').value
    const date = $w('#date').value
    const group = $w('#group').value
    const activity = $w('#activity').value
    const title = $w('#lesson').value
    const childsName = $w('#input11').value
    const experience = $w('#experience').value
    const introduction = $w('#introduction').value
    const outcomes = $w("#text250").text
    const next = $w("#next").value
     if ($w("#uploadButton1").value.length > 0) {console.log("Uploading the following files:")
       $w("#uploadButton1").uploadFiles()
      .then((uploadedFiles) => {console.log(uploadedFiles);
          uploadedFiles.forEach(uploadedFile => {
          console.log("File url:" + uploadedFile.fileUrl);
          image.push(uploadedFile.fileUrl);
          
          
      
        })
        console.log("Upload successful.");
      })
      .catch( (uploadError) => {
      console.log("File upload error: " + uploadError.errorCode);
      console.log(uploadError.errorDescription);
      });
  }
  else {  // Site visitor clicked button but didn't choose a file
    console.log("Please choose a file to upload.")
  }



   const pdfUrl = await getPdfUrl({name, date, group, title, next, outcomes, childsName, activity, experience, image, introduction })
    wixLocation.to(pdfUrl);
    }
12

Were you able to get just ONE image to work?
By the way, if you want to use my SERVICE , you will find my e-mail in my PROFILE.

YOUR WISHED FUNCTION IS AVAILABLE !

I will need your → TEMPLATE, because i do not want to reconstruct all the PDF-File by my own.

You can either send me your template-source-code, which will look something like this…

{
    "name": "Template 2",
    "tags": null,
    "isDraft": false,
    "layout": {
        "format": "A4",
        "unit": "cm",
        "orientation": "portrait",
        "rotation": 0,
        "margins": {
            "top": 0.5,
            "left": 0.5,
            "right": 0.5,
            "bottom": 0.5
        },
        "emptyLabels": 0,
        "width": 21,
        "height": 29.7,
        "repeatLayout": null
    },
    "pages": [{
        "width": 21,
        "height": 29.7,
        "conditionalFormats": [],
        "backgroundImage": null,
        "layout": [],
        "components": [{
            "width": 4.85,
            "height": 5.51,
            "id": "",
            "top": 1.72,
            "left": 7.28,
            "zindex": 1001,
            "phpClassName": "Reports_Component_CustomImage",
            "className": "CustomImage",
            "preview": null,
            "value": "{CompanyInfo::Image1}",
            "defaultValue": null,
            "dataIndex": null,
            "borderStatus": {
                "top": true,
                "right": true,
                "bottom": true,
                "left": true
            },
            "borderWidth": 0,
            "borderColor": "#000000",
            "borderStyle": "none",
            "backgroundColor": "",
            "useFlexHeight": true,
            "isEditable": false,
            "isPlainHTML": false,
            "padding": {
                "top": 0,
                "right": 0,
                "bottom": 0,
                "left": 0
            },
            "conditionalFormats": [],
            "fontFamily": "opensans",
            "fontAlign": "left",
            "fontSize": 12,
            "fontType": [],
            "fontColor": "#000000",
            "lineHeight": 1.15,
            "textDirection": "ltr",
            "textColumns": 1,
            "dynamicFontSize": false,
            "autoScale": true,
            "align": "left",
            "cls": "imageComponent",
            "fontValign": "top"
        }, {
            "width": 3.97,
            "height": 1.06,
            "id": "",
            "top": 0.5,
            "left": 0.5,
            "zindex": 1002,
            "phpClassName": "Reports_Component_CustomText",
            "className": "CustomText",
            "preview": null,
            "value": "",
            "dataIndex": "",
            "borderStatus": {
                "top": true,
                "right": true,
                "bottom": true,
                "left": true
            },
            "borderWidth": 0,
            "borderColor": "#000000",
            "borderStyle": "none",
            "backgroundColor": "",
            "useFlexHeight": true,
            "isEditable": false,
            "isPlainHTML": false,
            "padding": {
                "top": 0,
                "right": 0.2,
                "bottom": 0,
                "left": 0
            },
            "conditionalFormats": [],
            "fontFamily": "opensans",
            "fontAlign": "left",
            "fontSize": 12,
            "fontType": [],
            "fontColor": "#000000",
            "lineHeight": 1.15,
            "textDirection": "ltr",
            "textColumns": 1,
            "dynamicFontSize": false,
            "cls": "labelComponent",
            "fontValign": "top"
        }, {
            "width": 3.97,
            "height": 1.06,
            "id": "",
            "top": 0.5,
            "left": 0.5,
            "zindex": 1003,
            "phpClassName": "Reports_Component_CustomText",
            "className": "CustomText",
            "preview": null,
            "value": "{CompanyInfo::CompanyName}",
            "dataIndex": "",
            "borderStatus": {
                "top": true,
                "right": true,
                "bottom": true,
                "left": true
            },
            "borderWidth": 0,
            "borderColor": "#000000",
            "borderStyle": "none",
            "backgroundColor": "",
            "useFlexHeight": true,
            "isEditable": false,
            "isPlainHTML": false,
            "padding": {
                "top": 0,
                "right": 0.2,
                "bottom": 0,
                "left": 0
            },
            "conditionalFormats": [],
            "fontFamily": "opensans",
            "fontAlign": "left",
            "fontSize": 12,
            "fontType": [],
            "fontColor": "#000000",
            "lineHeight": 1.15,
            "textDirection": "ltr",
            "textColumns": 1,
            "dynamicFontSize": false,
            "cls": "labelComponent",
            "fontValign": "top"
        }, {
            "width": 3.97,
            "height": 1.06,
            "id": "",
            "top": 2.01,
            "left": 0.47,
            "zindex": 1004,
            "phpClassName": "Reports_Component_CustomText",
            "className": "CustomText",
            "preview": null,
            "value": "{CompanyInfo::LegalName}",
            "dataIndex": "",
            "borderStatus": {
                "top": true,
                "right": true,
                "bottom": true,
                "left": true
            },
            "borderWidth": 0,
            "borderColor": "#000000",
            "borderStyle": "none",
            "backgroundColor": "",
            "useFlexHeight": true,
            "isEditable": false,
            "isPlainHTML": false,
            "padding": {
                "top": 0,
                "right": 0.2,
                "bottom": 0,
                "left": 0
            },
            "conditionalFormats": [],
            "fontFamily": "opensans",
            "fontAlign": "left",
            "fontSize": 12,
            "fontType": [],
            "fontColor": "#000000",
            "lineHeight": 1.15,
            "textDirection": "ltr",
            "textColumns": 1,
            "dynamicFontSize": false,
            "cls": "labelComponent",
            "fontValign": "top"
        }],
        "margins": {
            "right": 0.5,
            "bottom": 0.5
        },
        "border": false
    }, {
        "width": 21,
        "height": 29.7,
        "conditionalFormats": [],
        "backgroundImage": null,
        "layout": [],
        "components": [],
        "margins": {
            "right": 0.5,
            "bottom": 0.5
        },
        "border": false
    }],
    "dataSettings": {
        "sortBy": [],
        "filterBy": []
    },
    "editor": {
        "heightMultiplier": 1
    },
    "fontSubsetting": false,
    "barcodeAsImage": false
}

…or you send me a link where i can download it, or you send it via e-mail.

How to export Template-Data???
-Open your Template in → PDF-Generator (Editor)

-Navigate to → EXPORT and create an export-json-file on your desktop, or where ever you want.

-Copy & Paste the data of the file into a CODE-BLOCK here into this post…

928×701 136 KB

13

@russian-dima Thank you thank you! I have just sent you an email =)

14

What is final solution of this issue?