Custom Upload

Mit arcCustomUpload kannst du Bilder und Dateien direkt in Ninox hochladen – einzeln oder als Mehrfachauswahl. Dabei wird automatisch für jede Datei ein eigener Datensatz erzeugt, inklusive Base64-Inhalt, Dateiname und optionalen Zusatzinformationen.

Das Widget löst eine der größten Einschränkungen in Ninox: den umständlichen Mehrfach-Upload. Statt komplizierter Workarounds öffnet sich nun mit einem Klick der Datei-Explorer oder die Kamera – und das in jeder beliebigen Oberfläche: ob in einem Dashboard, über einen Custom Button oder innerhalb eines eigenen Layouts.

Die hochgeladenen Bilder landen zunächst als Base64-Text in einem Feld deiner Wahl und können dort:

• direkt mit dem Widget Custom Image angezeigt werden,

• per Skript in ein Ninox-Bildfeld überführt werden (empfohlen),

• oder einfach als Datei abgespeichert werden.

Auch auf mobilen Geräten ist das Widget ideal: Du kannst wahlweise per Kamera fotografieren oder mehrere Bilder aus der Galerie auswählen und hochladen. Das spart dem Nutzer viele Klicks und vereinfacht die Datenpflege spürbar.

⚠️ Hinweis: Auf der MacOS App sowie auf der Android App funktioniert aktuell leider die Multi-Upload Funktion nicht. Hier sind die Restriktionen von Ninox Seite her eingeschränkt.

Unterstützte Formate

• Bilder: JPG, PNG, SVG

• Dokumente: PDF

• Tabellen & Daten: CSV, XML, XLS, XLSX

Hinweis: PNG- und SVG-Dateien werden aktuell automatisch in JPG konvertiert. Für hochwertige Weiterverarbeitung empfehlen wir, die Base64-Daten zeitnah in echte Dateien umzuwandeln und als Dateifeld in Ninox zu speichern.

Anwendungscode

Hier ein einfaches Beispiel, wie du arcCustomUpload in einer Funktion verwenden kannst – zum Beispiel eingebunden in einer Tabelle (embedded:true) oder eigenständig auf einem Ninox Formular in einem Formelfeld (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")
			}]
	})

Parameter

uniqueId

Typ: text
Pflichtfeld: ja

uniqueId vergibst du individuell und sollte einzigartig sein. Sinn dahinter ist: Wenn du mehrere Uploads mit unterschiedlichen Settings auf deiner Oberfläche erstellst, verhinderst du das Überschreiben der Styles.

📌 Achtung: Wenn zwei Upload-Widgets auf derselben Seite die gleiche uniqueId verwenden, kann das zu Fehlern führen (z. B. werden Uploads überschrieben oder nicht korrekt geladen).

uniqueId: "my-Image-" + Nr,

embedded

Typ: boolean
Default: false

Mit dem Parameter embedded bestimmst du, ob das Upload-Widget eingebettet in ein bestehendes Element (z. B. ein Custom Layout, Custom Button, etc.) angezeigt werden soll – oder ob es als eigenständiges Element auf der Oberfläche steht.

• true → Das Widget passt sich dem umgebenden Container an (z. B. bei festen Layout-Rahmen).

• false → Das Widget wird frei auf der Ninox-Oberfläche dargestellt (z. B. als alleinstehendes Element).

💡 Hinweis: Wenn du embedded: true verwendest, achte darauf, dass das umgebende Element (z. B. ein Layout-Block) eine definierte Höhe/Breite hat. Das Upload-Feld übernimmt diese Maße automatisch.

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

capture

Typ: boolean
Default: false

Mit dem Parameter capture steuerst du, ob das Widget auf mobilen Geräten direkt die Kamera öffnet oder ob der Nutzer eine Datei manuell auswählen kann.

• true → Auf unterstützten Smartphones öffnet sich beim Klick direkt die Kamera-App.

• false → Es wird wie gewohnt der Datei-Explorer oder die Fotogalerie geöffnet.

💡 Hinweis: Diese Funktion funktioniert nur auf mobilen Geräten (Apple) und in Kombination mit bestimmten Browsern. Auf Desktop wird der Parameter ignoriert.

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

multiupload

Typ: boolean
Default: false

Mit multiupload kannst du festlegen, ob mehrere Dateien gleichzeitig hochgeladen werden dürfen.

• true → Der Nutzer kann im Dateidialog mehrere Dateien auswählen (z. B. mehrere Bilder aus der Galerie).

• false → Es kann nur eine Datei pro Upload-Vorgang hochgeladen werden.

💡 Tipp: Besonders praktisch bei Formularen, in denen mehrere Fotos oder Dokumente auf einmal hochgeladen und als einzelne Datensätze gespeichert werden sollen.

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

Block: container{}

Typ: object
Optional

Der container-Block definiert das Erscheinungsbild und Verhalten des Upload-Feldes. Du kannst hier z. B. die Größe festlegen oder einen eigenen Text im Upload-Bereich anzeigen lassen.

Wenn du keine Werte übergibst, wird ein Standard-Layout mit Upload-Icon und dem Text „Datei auswählen“ angezeigt.

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

Mögliche Parameter

💡 Tipp: Vermeide zu lange Texte im label, da das Widget zentriert arbeitet und die Lesbarkeit sonst leidet. Ideal sind 1–2 Wörter oder ein Symbol mit kurzer Erklärung

Block: image{}

Typ: object
Pflichtfeld

Im image-Block definierst du, wohin das hochgeladene Bild gespeichert werden soll. Das Bild wird automatisch in ein Base64-Textfeld in der angegebenen Tabelle geschrieben. Optional kannst du auch die Bildbreite und -höhe separat erfassen.

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"
		},

Wichtiger Performance Hinweis

💡 UI/UX-Tipp: Base64-Daten können sehr groß werden – besonders bei hochauflösenden Bildern. Daher empfehlen wir folgenden Workflow:

• Hinterlege einen Trigger bei Änderung in dem Base64-Feld.

• Übertrage das Base64-Bild mit importFile() in ein echtes Bildfeld.

• Leere das Base64-Feld danach, um Speicherplatz zu sparen.

Diesen Trigger hinterlegst du:

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

So bleiben Ladezeiten und Datenbankgröße im Rahmen – und du kannst trotzdem direkt mit den Bilddaten weiterarbeiten.

🧠 Wichtig: Ninox behandelt Trigger in der App und im Browser unterschiedlich. Damit dein Workflow plattformübergreifend zuverlässig funktioniert, nutze zwei getrennte base64-Felder (mit jeweils unterschiedlichen Speicher-Optionen) – eines für Web, eines für die App:

• App -> Zuweisung pro Datensatz im Browser

• Web -> Zuweisung pro Datensatz im Server

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

✅ So stellst du sicher, dass der Upload in beiden Umgebungen automatisch weiterverarbeitet wird.

filename

Typ: object
Optional

Im filename-Block kannst du angeben, in welchem Feld der Dateiname gespeichert werden soll. Das ist hilfreich, wenn du später nach Dateien filtern oder sie in Listen anzeigen möchtest.

💡 Tipp: Falls du später mit importFile() weiterarbeitest oder die Datei wieder abrufen willst (z. B. in einer Galerie oder Download-Liste), ist der Dateiname oft notwendig – speichere ihn daher am besten immer mit.

changeFieldValues

Typ: array of objects
Optional

Mit changeFieldValues kannst du zusätzliche Felder im neu erstellten Upload-Datensatz automatisch befüllen – z. B. mit einem Bezug zur aktuellen Tabelle, einem festen Typ oder Statuswert. Jeder Eintrag enthält:

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

setNewRecordId

Typ: array of objects
Optional

Mit setNewRecordId kannst du nach dem Upload den neu erstellten Datensatz (z. B. das Bild) direkt in einem vorhandenen Datensatz verlinken – etwa in einem Referenzfeld des aktuellen Formulars.

Das ist besonders nützlich, wenn du:

• eine 1:1-Verknüpfung zu einem Bild oder Dokument brauchst,

• das Upload-Element nicht in der Zieltabelle eingebettet ist,

• oder gezielt Uploads außerhalb der changeFieldValues setzen willst.

Extra Konvertierungsservice

Die PDF-Konvertierung über convertSettings ist kein Bestandteil des Standard-Uploads, sondern ein externer Service, der über arcRider bereitgestellt wird.

Da bei jeder Konvertierung Serverkosten anfallen, ist die Nutzung kostenpflichtig. Die Abrechnung erfolgt je Konvertierungsvorgang.

💬 Für die Nutzung des Dienstes erstellen wir individuelle Preispläne – abhängig vom erwarteten Volumen und den konkreten Anforderungen. Bitte kontaktiere uns, wenn du den PDF-Konvertierungsdienst aktivieren möchtest oder Fragen zu den Konditionen hast. (office@arc-rider.com)

convertSettings

Typ: object
Optional – nur bei PDF-Dateien relevant

Wenn du PDF-Dateien hochlädst, kannst du mit convertSettings festlegen, dass sie automatisch in JPG / PNG / SVG-Dateien umgewandelt werden – z. B. für technische Zeichnungen oder Formular-PDFs, die in Ninox darstellbar sein sollen.

✅ Fazit

Mit arcCustomUpload gestaltest du Upload-Prozesse in Ninox intuitiv, performant und flexibel – egal ob auf Desktop oder mobil. Durch gezielte Parametrierung steuerst du Darstellung, Zieltabellen, Automatisierungen und sogar die Konvertierung von PDFs.

Wenn du komplexe Uploads in dein System integrieren möchtest oder Hilfe beim Setup brauchst, melde dich gerne bei uns – wir unterstützen dich bei der optimalen Konfiguration.