Search

Support

Discord

English

Search

Support

Discord

English

Widgets

Custom Upload

2.3.0

2.3.0

Order widget

Custom Upload

With arcCustomUpload, you can upload images and files directly to Ninox – individually or as a multiple selection. For each file, a separate record is automatically created, including Base64 content, file name, and optional additional information.

The widget addresses one of the biggest limitations in Ninox: the cumbersome multi-upload. Instead of complicated workarounds, clicking now opens the file explorer or camera – and in any interface: whether in a dashboard, via a custom button, or within your own layouts.

The uploaded images initially appear as Base64 text in a field of your choice and can:

  • be displayed directly with the widget Custom Image,

  • be transferred to a Ninox image field via script (recommended),

  • or simply be saved as a file.

The widget is also ideal on mobile devices: You can choose to take a photo with the camera or select and upload multiple images from the gallery. This saves the user many clicks and significantly simplifies data maintenance.

⚠️ Note: Currently, the multi-upload feature unfortunately does not work on the MacOS App and the Android App. The restrictions are limited from Ninox's side.

Supported Formats

  • Images: JPG, PNG, SVG

  • Documents: PDF

  • Tables & Data: CSV, XML, XLS, XLSX

Note: PNG and SVG files are currently automatically converted to JPG. For high-quality further processing, we recommend converting the Base64 data into actual files in a timely manner and saving them as a file field in Ninox.

Screenshot von dem Widget Upload.

Application Code

Here’s a simple example of how you can use arcCustomUpload in a function – for example, embedded in a table (embedded:true) or independently on a Ninox form in a form field (embedded:false):

let current := this;
arcCustomUpload({
		uniqueId: "my-Files-" + Nr,
		embedded: true,
		capture: false,
		multiupload: true,
		container: {
			icon: "",
			label: "Files Upload",
			height: "500px",
			width: "100%",
			value: ""
		},
		image: {
			tableId: "B",
			fieldId: if ninoxApp() = "web" then
				fieldId("Bilder", "base64_web")
			else
				fieldId("Bilder", "base64_app")
			end,
			width: 1500,
			height: 1500,
			widthFieldId: "J",
			heightFieldId: "K"
		},
		filename: {
			tableId: "B",
			fieldId: fieldId("Bilder", "Dateiname")
		},
		convertSettings: {
			type: ""
		},
		changeFieldValues: [{
				fieldId: "B",
				value: number(current.Nr)
			}, {
				fieldId: "E",
				value: 12
			}],
		setNewRecordId: [{
				recordId: current.Nr,
				fieldId: fieldId(current.Nr, "triggerField_saveForBrowser")
			}]
	})

Parameters

uniqueId

Type: text
Required Field: yes

uniqueId is assigned individually and should be unique. The purpose is: If you create multiple uploads with different settings on your surface, you prevent overwriting the styles.

📌 Attention: If two upload widgets on the same page use the same uniqueId, it can lead to errors (e.g., uploads being overwritten or not loaded correctly).

uniqueId: "my-Image-" + Nr,

embedded

Type: boolean
Default: false

With the parameter embedded, you determine whether the upload widget should be embedded in an existing element (e.g., a Custom Layout, Custom Button, etc.) or whether it should be displayed as a standalone element on the interface.

  • true → The widget adapts to the surrounding container (e.g., in fixed layout frames).

  • false → The widget is displayed freely on the Ninox interface (e.g., as a standalone element).

💡 Note: If you use embedded: true, ensure that the surrounding element (e.g., a layout block) has a defined height/width. The upload field will automatically take these measurements.

embedded: "", // Default: false 
embedded: true,
embedded: false,

capture

Type: boolean
Default: false

With the parameter capture, you control whether the widget opens the camera directly on mobile devices or whether the user can select a file manually.

  • true → On supported smartphones, the camera app opens directly when clicked.

  • false → The file explorer or photo gallery opens as usual.

💡 Note: This feature only works on mobile devices (Apple) and in conjunction with certain browsers. On desktop, the parameter is ignored.

capture: "", // Default: false
capture: false,

multiupload

Type: boolean
Default: false

With multiupload, you can specify whether multiple files can be uploaded simultaneously.

  • true → The user can select multiple files in the file dialog (e.g., multiple images from the gallery).

  • false → Only one file can be uploaded per upload process.

💡 Tip: Especially practical for forms where multiple photos or documents are to be uploaded at once and saved as individual records.

multiupload: "", // Default: false
multiupload: true,

Block: container{}

Type: object
Optional

The container block defines the appearance and behavior of the upload field. You can define the size here or display your own text in the upload area.

If you do not pass any values, a default layout with an upload icon and the text "Select file" is displayed.

container: {
			icon: "",
			label: "Upload Image",
			height: "100%",
			value: "wert"
		},

Possible Parameters

Field

Type

Description

label

text

Label (text) in the upload field. Displayed in the middle. Shown below the icon.

value

widget text

With value, you can design your custom upload. Anything you specify as value overrides the existing default design. Here you can use a simple Custom Button or design a custom layout that fits your UI. This parameter is optional and does not need to be filled in, of course.

height

text

Height of the upload field, e.g., "80px" or "100%".

width

text

Width of the upload field, e.g., "100%", "300px", or "auto".

icon

widget

With arcCustomIcon, a custom icon can be defined.

💡 Tip: Avoid long texts in the label, as the widget operates centered and otherwise impacts readability. Ideal are 1–2 words or a symbol with a brief explanation.

Block: image{}

Type: object
Required Field

In the image block, you define where the uploaded image should be stored. The image is automatically written to a Base64 text field in the specified table. Optionally, you can also capture the image width and height separately.

Field

Type

Description

tableId

text

Target table where the image is saved as a record.

fieldId

text

Field ID of the text field where the Base64 image content is written.

widthFieldId

text

(optional) Field ID for the stored image width (in pixels). Create a Ninox number field for this.

heightFieldId

text

(optional) Field ID for the stored image height (in pixels). Create a Ninox number field for this.

width / height

text

(optional) The width / height within the image{} block specifies the width / height of your image in pixel width to save it.

image: {
			tableId: "B",
			fieldId: if ninoxApp() = "web" then
				fieldId("Bilder", "base64_web")
			else
				fieldId("Bilder", "base64_app")
			end,
			width: 1500,
			height: 1500,
			widthFieldId: "J",
			heightFieldId: "K"
		},

Important Performance Note

💡 UI/UX Tip: Base64 data can become very large – especially with high-resolution images. Therefore, we recommend the following workflow:

  • Set a trigger on change in the Base64 field.

  • Transfer the Base64 image with importFile() into an actual image field.

  • Clear the Base64 field afterwards to save space.

You set this trigger:

Datei := importFile(Nr, base64, Dateiname);
shareURL := shareFile(Datei);
base64:=null;

This keeps load times and database size manageable – and you can still work directly with the image data.

🧠 Important: Ninox treats triggers differently in the app and the browser. For your workflow to function cross-platform reliably, use two separate base64 fields (with different storage options) – one for web, one for the app:

  • App -> Assignment per record in the browser

  • Web -> Assignment per record on the server

fieldId: if ninoxApp() = "web" then
				fieldId("Bilder", "base64_web")
			else
				fieldId("Bilder", "base64_app")
			end,

✅ This ensures that the upload is automatically further processed in both environments.

filename

Type: object
Optional

In the filename block, you can specify in which field the file name should be stored. This is helpful if you want to filter files later or display them in lists.

Field

Type

Description

tableId

text

Target table where the record is saved.

fieldId

text

Field ID where the file name is written.

💡 Tip: If you later work with importFile() or want to retrieve the file again (e.g., in a gallery or download list), the file name is often necessary – so it’s best to always save it.

changeFieldValues

Type: array of objects
Optional

With changeFieldValues, you can automatically fill additional fields in the newly created upload record – e.g., with a reference to the current table, a fixed type, or status value. Each entry includes:

Field

Type

Description

fieldId

text

The field in the new record that should be set.

value

any

The value to be written to the field.

changeFieldValues: [{
				fieldId: "B",
				value: number(current.Nr)
			}, {
				fieldId: "E", 
				value: 10
			}]

setNewRecordId

Type: array of objects
Optional

With setNewRecordId, you can link the newly created record (e.g., the image) directly to an existing record after the upload – for instance, in a reference field of the current form.

This is particularly useful if you:

  • need a 1:1 link to an image or document,

  • the upload element is not embedded in the target table,

  • or want to set uploads outside of the changeFieldValues.

Field

Type

Description

recordId

text

The ID value of the existing record where the link should be made.

fieldId

text

The reference field that should be filled with the new upload record.

Extra Conversion Service

The PDF conversion via convertSettings is not part of the standard upload, but an external service provided by arcRider.

As every conversion incurs server costs, the use is subject to fees. Billing occurs per conversion process.

💬 For the use of the service, we create individual pricing plans – depending on the expected volume and concrete requirements. Please contact us if you would like to activate the PDF conversion service or have questions about the terms. (office@arc-rider.com)

convertSettings

Type: object
Optional – only relevant for PDF files

When you upload PDF files, you can use convertSettings to specify that they should be automatically converted to JPG / PNG / SVG files – e.g., for technical drawings or form PDFs that should be displayable in Ninox.

Field

Type

Description

fileType

text

Target format of the conversion. Currently supported: "jpg"

apiKey

text

Your personal API key for the PDF conversion service (please request from arcRider)

width

number

Target width in pixels (if dpi is not set)

height

number

Target height in pixels (if dpi is not set)

dpi

number

Resolution of the conversion in dpi (dots per inch)

originalFile

object

Optional: field for storing the original PDF file as Base64

✅ Conclusion

With arcCustomUpload, you intuitively, efficiently, and flexibly design upload processes in Ninox – whether on desktop or mobile. Through targeted parameterization, you control presentation, target tables, automations, and even PDF conversions.

If you want to integrate complex uploads into your system or need help with the setup, feel free to contact us – we support you in optimal configuration.

Arc Rider Ventures GmbH

© 2025

Arc Rider Ventures GmbH

© 2025