How to Set Image Upload Fields for Documents

This knowledge base article will guide you on setting Image form fields in BoldSign documents using the API. There are 2 ways to achieve this.

Pre-define the Image field in the document before sending it.
Allow signers to add them dynamically.

Send a document to the signer with Image fields:

You can set the Image form field by providing imageInfo object and you can add title, description and allowedFileExtensions.

Supported Allowed File Extensions

JPG or JPEG
SVG
PNG
BMP

Code snippet

curl -X 'POST' \ 'https://api.boldsign.com/v1/document/send' \
     -H 'accept: application/json' \
     -H 'X-API-KEY: {your API key}' \
     -H 'Content-Type: multipart/form-data' \
     -F 'DisableExpiryAlert=false' \
     -F 'ReminderSettings.ReminderDays=5' \
     -F 'BrandId=' \
     -F 'ReminderSettings.ReminderCount=3' \
     -F 'EnableReassign=true' \
     -F 'Message=' \
     -F 'Signers={
        "name": "hanky",
        "emailAddress": "[email protected]",
        "signerType": "Signer",
        "formFields": [
           {
                "id": "Image",
                "name": "Image",
                "fieldType": "Image",
                "pageNumber": 1,
                "isRequired": true,
                "bounds": {
                  "x": 200,
                  "y": 200,
                  "width": 125,
                  "height": 25
                   },
                "imageInfo": {
                  "title": "Add Image",
                  "description": "Image Description",
                  "allowedFileExtensions": ".jpg, .png"
                   }
           }
  ],
  "locale": "EN"
}' \
  -F 'ExpiryDays=30' \
  -F 'EnablePrintAndSign=false' \
  -F 'AutoDetectFields=false' \
  -F 'OnBehalfOf=' \
  -F 'EnableSigningOrder=false' \
  -F 'UseTextTags=false' \
  -F 'SendLinkValidTill=' \
  -F 'Files=@{your file}'
  -F 'Title=Invitation form' \
  -F 'HideDocumentId=false' \
  -F 'EnableEmbeddedSigning=false' \
  -F 'ExpiryDateType=Days' \
  -F 'ReminderSettings.EnableAutoReminder=true' \
  -F 'ExpiryValue=60' \
  -F 'DisableEmails=false' \
  -F 'DisableSMS=false'

var apiClient = new ApiClient("https://api.boldsign.com", "{Your API key}");
var documentClient = new DocumentClient(apiClient);

var documentFilePath = new DocumentFilePath
{
    ContentType = "application/pdf",
    FilePath = "{Your File path}"
};

var filesToUpload = new List<IDocumentFile>
{
    documentFilePath,
};

var imageField = new FormField(
    id: "image",
    isRequired: true,
    type: FieldType.Image,
    pageNumber: 1,
    imageInfo: new ImageInfo(title: "Add Image", description: "Image Description", allowedFileExtensions: ".jpg, .png"),
    bounds: new Rectangle(x: 100, y: 100, width: 125, height: 25));

var formFieldCollections = new List<FormField>()
{
    imageField
};

var signer = new DocumentSigner(
    signerName: "David",
    signerType: SignerType.Signer,
    signerEmail: "[email protected]",
    formFields: formFieldCollections,
    locale: Locales.EN);

var documentSigners = new List<DocumentSigner>()
{
    signer
};

var sendForSign = new SendForSign()
{
    Message = "please sign this",
    Title = "Agreement",
    HideDocumentId = false,
    Signers = documentSigners,
    Files = filesToUpload
};
var documentCreated = documentClient.SendDocument(sendForSign);

import boldsign

configuration = boldsign.Configuration(host = "https://api.boldsign.com", api_key = "YOUR_API_KEY")

with boldsign.ApiClient(configuration) as api_client:

    document_api = boldsign.DocumentApi(api_client)

    send_for_sign = boldsign.SendForSign(
        title = "Document SDK API",
        document_title = "SDK Document Test case",
        description = "Testing document from SDK integration test case", 
        files = ["YOUR_FILE_PATH"],
        signers = [
            boldsign.DocumentSigner(
                name = "Hanky",
                emailAddress = "[email protected]",
                signerOrder = 1,
                signerType = "Signer",
                formFields = [
                    boldsign.FormField(
                        name = "Image",
                        fieldType = "Image",
                        font = "Helvetica",
                        pageNumber = 1,
                        isRequired = True,
                        bounds = boldsign.Rectangle(x = 50, y = 50, width = 100, height = 150),
                        imageInfo = boldsign.ImageInfo(
                            title = "Add Image",
                            description = "Image Description",
                            allowedFileExtensions = ".jpg, .png"
                        )
                    )
                ],
                privateMessage = "This is private message for signer"
            )
        ]
    )

    document_created = document_api.send_document(send_for_sign)

<?php require_once "vendor/autoload.php";

use BoldSign\Configuration;
use BoldSign\Api\DocumentApi;
use BoldSign\Model\{FormField, Rectangle, ImageInfo, DocumentSigner, SendForSign, DocumentInfo, FileInfo};

$config = new Configuration();
$config->setHost("https://api.boldsign.com");
$config->setApiKey('YOUR_API_KEY');

$document_api = new DocumentApi($config);

$form_field = new FormField();
$form_field->setName('Image');
$form_field->setFieldType('Image');
$form_field->setPageNumber(1);
$form_field->setFont('Helvetica');
$form_field->setIsRequired(true);
$bounds = new Rectangle([50, 50, 100, 150]);
$form_field->setBounds($bounds);

$image_info = new ImageInfo();
$image_info->setTitle('Add Image');
$image_info->setDescription('Image Description');
$image_info->setAllowedFileExtensions('.jpg, .png');
$form_field->setImageInfo($image_info);

$document_signer = new DocumentSigner();
$document_signer->setName('Hanky');
$document_signer->setEmailAddress('[email protected]');
$document_signer->setSignerType('Signer');
$document_signer->setSignerOrder(1);
$document_signer->setFormFields([$form_field]);
$document_signer->setPrivateMessage('This is private message for signer');

$send_for_sign = new SendForSign();

$documentInfo = new DocumentInfo();
$documentInfo->setTitle('Document SDK API');
$documentInfo->setDescription('Testing document from SDK integration test case');
$send_for_sign->setDocumentInfo([$documentInfo]);

$files = new FileInfo();
$files = 'YOUR_FILE_PATH';
$send_for_sign->setFiles([$files]);

$send_for_sign->setTitle('SDK Document Test case');
$send_for_sign->setSigners([$document_signer]);

$document_created = $document_api->sendDocument($send_for_sign);

ApiClient client = Configuration.getDefaultApiClient();
client.setBasePath("https://api.boldsign.com");
client.setApiKey("YOUR_API_KEY");

DocumentApi documentApi = new DocumentApi(client);

FormField formField = new FormField();
formField.setName("Image");
formField.setFieldType(FormField.FieldTypeEnum.IMAGE);
formField.setPageNumber(1);
formField.setFont(FormField.FontEnum.HELVETICA);
formField.setIsRequired(true);
Rectangle bounds = new Rectangle().x(100f).y(100f).width(100f).height(50f);
formField.setBounds(bounds);

ImageInfo imageInfo = new ImageInfo();
imageInfo.setTitle("Add Image");
imageInfo.setDescription("Image Description");
imageInfo.setAllowedFileExtensions(".jpg, .png");
formField.setImageInfo(imageInfo);

DocumentSigner signer = new DocumentSigner();
signer.setName("Hanky");
signer.setEmailAddress("[email protected]");
signer.setSignerOrder(1);
signer.setSignerType(DocumentSigner.SignerTypeEnum.SIGNER);
signer.setFormFields(Arrays.asList(formField));
signer.setPrivateMessage("This is private message for signer");

SendForSign sendForSign = new SendForSign();

File file = new File("YOUR_FILE_PATH");  
sendForSign.setFiles(Arrays.asList(file));   

sendForSign.setSigners(Arrays.asList(signer));
sendForSign.setTitle("Document SDK API");

DocumentCreated documentCreated = documentApi.sendDocument(sendForSign);

import { DocumentApi, DocumentSigner, DocumentInfo, FormField, Rectangle, SendForSign, ImageInfo } from "boldsign"; 
import * as fs from 'fs';

const documentApi = new DocumentApi("https://api.boldsign.com");
documentApi.setApiKey("YOUR_API_KEY");

const bounds = new Rectangle();
bounds.x = 100;
bounds.y = 50;
bounds.width = 100;
bounds.height = 100;

const formField = new FormField();
formField.name = "Image";
formField.fieldType = FormField.FieldTypeEnum.Image;
formField.font = FormField.FontEnum.Helvetica;
formField.pageNumber = 1;
formField.isRequired = true;
formField.bounds = bounds;

const imageInfo = new ImageInfo();
imageInfo.title = "Add Image";
imageInfo.description = "Image Description";
imageInfo.allowedFileExtensions = ".jpg", ".png";
formField.imageInfo = imageInfo;

const documentSigner = new DocumentSigner();
documentSigner.name = "David";
documentSigner.emailAddress = "[email protected]";
documentSigner.signerOrder = 1;
documentSigner.signerType = DocumentSigner.SignerTypeEnum.Signer;
documentSigner.formFields = [formField];
documentSigner.privateMessage = "This is private message for signer";

const files = fs.createReadStream("YOUR_FILE_PATH");

const sendForSign = new SendForSign();

const documentInfo = new DocumentInfo();
documentInfo.title = "SDK Document Test case";
documentInfo.description = "Testing document from SDK integration test case";
sendForSign.documentInfo = [documentInfo];

sendForSign.title = "Document SDK API";
sendForSign.signers = [documentSigner];
sendForSign.files = [files];

const documentCreated = documentApi.sendDocument(sendForSign);

In the given example, replace the imageInfo values with the desired values. Set the field type as Image and give supported allowedFileExtensions type. Upon executing the provided code, a document will be generated with the specified imageInfo values for the Image form fields.