Manage images

📝 Note: This feature only supports invoice template customizations. Document Builder, which supports both invoice and quote template customizations, might be available on your marketplace. For more information, see Document Builder.

Marketplace Managers can upload images that they want to include on invoices, to the AppDirect platform . For each image, the platform returns a unique URL that identifies the image storage location. Use these URLs to reference images when you create image components in JSON templates (see Build image components) and, optionally, when you populate logo images in Invoice settings (see Configure invoice headers and content).

To upload images

1. Go to the Edit JSON page with one of the following paths:
   • Manage > Marketplace > Settings > Invoice Templates > {templateName} | Gear icon | Edit JSON .
   • Manage > Marketplace > Settings > Invoice Templates > {templateName} > Edit JSON .
2. Click Upload Image. A file explorer dialog opens.
3. Navigate to and select the image.
4. Click Open. The dialog closes.
5. Next to the Upload image button, click the up arrow icon. The images list appears.
   • Image—Preview of the uploaded image.
   • Name—Image file name.
   • Generated URL—Unique URL that identifies the image storage location.
   • Upload date—Date the Marketplace Manager saved the file to the AppDirect platform.

To acquire and add an image source URL to an image component

1. Go to the Edit JSON page with one of the following paths:
   • Manage > Marketplace > Settings > Invoice Templates > {templateName} | Gear icon | Edit JSON .
   • Manage > Marketplace > Settings > Invoice Templates > {templateName} > Edit JSON .
2. Next to the Upload image button, click the up arrow icon. The images list appears.
   • Image—Preview of the uploaded image.
   • Name—Image file name.
   • Generated URL—Unique URL that identifies the image storage location.
   • Upload date—Date the Marketplace Manager saved the file to theAppDirect platform .
3. Locate the image in the list.
4. In the image row, click Copy image source.
5. In the JSON editor section, click JSON. The code editor appears.
6. Navigate to the image component or the row where you are building the image component. s
7. Paste the URL in the image Source property, in the following format:
   "src": "https://*"
8. (Optional) Click Validate. The error console message bar displays the validation results.
9. Click Preview PDF. The image appears in the invoice preview.
10. Click Save Changes.