How to allow signers to upload images before complete signing the electronic signature request via API?

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": "hankyWhites@gmail.com",
        "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: "david@cubeflakes.com",
    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 requests
import json

url = "https://api.boldsign.com/v1/document/send"

signer_data = {
    "name": "hanky",
    "emailAddress": "hankyWhites@gmail.com",
    "signerType": "Signer",
    "formFields": [
        {
            "id": "Image",
            "name": "Image",
            "fieldType": "Image",
            "pageNumber": 1,
            "isRequired": True,
            "bounds": {
                "x": 50,
                "y": 50,
                "width": 200,
                "height": 25
            },
            "imageInfo": {
                "title": "Add Image",
                "description": "Image Description",
                "allowedFileExtensions": ".jpg, .png"
            }
        }
    ],
    "locale": "EN"
}

payload = {
    'DisableExpiryAlert': 'false',
    'ReminderSettings.ReminderDays': '3',
    'BrandId': '',
    'ReminderSettings.ReminderCount': '5',
    'EnableReassign': 'true',
    'Message': 'Please sign this.',
    'Signers': json.dumps(signer_data),
    'ExpiryDays': '10',
    'EnablePrintAndSign': 'false',
    'AutoDetectFields': 'false',
    'OnBehalfOf': '',
    'EnableSigningOrder': 'false',
    'UseTextTags': 'false',
    'SendLinkValidTill': '',
    'Title': 'Agreement',
    'HideDocumentId': 'false',
    'EnableEmbeddedSigning': 'false',
    'ExpiryDateType': 'Days',
    'ReminderSettings.EnableAutoReminder': 'false',
    'ExpiryValue': '60',
    'DisableEmails': 'false',
    'DisableSMS': 'false'
}

files=[
  ('Files',('file',open('{Your File Path}','rb'),'application/pdf'))
]

headers = {
  'accept': 'application/json',
  'X-API-KEY': 'Your API Key'
}

response = requests.request("POST", url, headers=headers, data=payload, files=files)

print(response.text)

const axios = require('axios');
const FormData = require('form-data');
const fs = require('fs');

const form = new FormData();
form.append('DisableExpiryAlert', 'false');
form.append('ReminderSettings.ReminderDays', '3');
form.append('BrandId', '');
form.append('ReminderSettings.ReminderCount', '5');
form.append('EnableReassign', 'true');
form.append('Message', 'Please sign this.');
form.append('Signers', '{\n  "name": "hanky",\n  "emailAddress": "hankyWhites@gmail.com",\n  "formFields": [\n    {\n      "fieldType": "Image",\n      "pageNumber": 1,\n      "bounds": {\n        "x": 100,\n        "y": 100,\n        "width": 100,\n        "height": 50\n      },\n      "isRequired": true,\n      "imageInfo": {\n        "title": "Add Image",\n        "description": "Image Description",\n        "allowedFileExtensions": ".jpg, .png"\n      }\n     }\n  ]\n}');
form.append('ExpiryDays', '10');
form.append('EnablePrintAndSign', 'false');
form.append('AutoDetectFields', 'false');
form.append('OnBehalfOf', '');
form.append('EnableSigningOrder', 'false');
form.append('UseTextTags', 'false');
form.append('SendLinkValidTill', '');
form.append('Files', fs.readFileSync('agreement.pdf;type=application/pdf'), 'agreement.pdf;type=application/pdf');
form.append('Title', 'Agreement');
form.append('HideDocumentId', 'false');
form.append('EnableEmbeddedSigning', 'false');
form.append('ExpiryDateType', 'Days');
form.append('ReminderSettings.EnableAutoReminder', 'false');
form.append('ExpiryValue', '60');
form.append('DisableEmails', 'false');
form.append('DisableSMS', 'false');

const response = await axios.post(
    'https://api.boldsign.com/v1/document/send',
    form,
    {
        headers: {
            ...form.getHeaders(),
            'accept': 'application/json',
            'X-API-KEY': '{your API key}',
            'Content-Type': 'multipart/form-data'
        }
    }
);

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.