Custom Upload

Mit Custom Upload hast du die Möglichkeit, ein Bild oder mehrere Bilder auf einmal in Ninox hochzuladen und direkt eigene Datensätze zu erstellen. Die Bilder werden als Base64 in ein Textfeld eurer Wahl geladen und können zum Beispiel in ein Bildfeld per Ninox Skript importiert werden oder direkt mit Custom Image angezeigt werden.

Mehrfachupload war bisher in Ninox immer etwas umständlich. Nun ist es möglich, mit einem Klick den Finder oder Explorer zu öffnen aus jedem Bereich eurer Oberfläche. Es gibt sowohl einen Fallback (Siehe Bild) als auch die Möglichkeit, zum Beispiel Custom Buttons oder eigene Custom Layouts als Upload Trigger einzusetzen.

Auch auf mobilen Geräten kann Custom Upload effektiv eingesetzt werden, um Bilder entweder direkt aus der Kamera oder per Mehrfach-Upload aus der Galerie oder den Dateien in Ninox als Datensatz hoch zu laden. Unserer Einschätzung nach werden dem User einige Klicks erspart.

Mit Custom Upload kannst du folgende Formate uploaden: JPEG, SVG, PNG PD, XML, CSV, XLS, XLSX .

Wichtig: PNG & SVG Formate werden aktuell in JPEG Dateien umgewandelt.

Wir empfehlen, die Base64 Daten möglichst zeitnah nach dem Upload als files umzuwandeln und in Ninox abzuspeichern.

Anwendungscode

let current:= this;
arcCustomUpload({
		uniqueId: "my-Image-" + Nr,
        embedded: true,
		capture: false,
		multiupload: true,
		container: {
			icon: "",
			label: "",
			height: "100%",
            width: "100%",
			value: ""
		},
		image: {
			tableId: "B",
			fieldId: fieldId("B","Base64Feld"),
			width: "2000px",
			height: "auto", 
            widthFieldId: "J",
			heightFieldId: "K"
		},
		filename: {
    		tableId: "B",
            fieldId: "G"
		},
		changeFieldValues: [{
				fieldId: "B",
				value: number(current.Nr)
			}, {
				fieldId: "E",
				value: 10
			}]
	})

Parameter

uniqueId

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.

uniqueId: "my-Image-" + Nr,

embedded

Mit dem neuen Parameter embedded kannst du Custom Upload fehlerfrei in andere Widgets einbinden. Setze embedded auf true, wenn du es einbettest. Setze es auf false, wenn es frei auf der Ninox Oberfläche liegt.

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

capture

Mit capture: false kann nun die Auswahl gesetzt werden, ob aus Fotogallery, Dateisystem oder Aufnahme Bilder hochgeladen werden können.

capture: false,

Block: container{}

Mit dem container{} Block beschriebst du das Design des Uploads. Wichtig zu verstehen: icon, label, height & width sind die Parameter die das vorgegebene Design anpassen. Wenn du deinen Upload ganz individuell gestalten möchtest, dann kannst du in dem Parameter value innerhalb des containers ein eigenes Design, wie etwa einen Custom Button oder ein eigenes Layout, entwickeln.

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

icon innerhalb container{}

In dem Paramter icon kannst du mit dem Mini Widget Custom Icon ein eigenes Icon bestimmen, dass in dem Upload Container zu sehen sein soll.

icon: "",

label innerhalb container{}

Der Parameter label bestimmt die Beschriftung innerhalb des Containers, die unter dem Icon angezeigt wird. Gebe hier zum Beispiel deinen Call to action (CTA) an.

label: "Upload Image",

height innerhalb von container{}

height gibt die Höhe deines Containers an.

height: "100%",

value innerhalb von container{}

Mit value kannst du dein ganz eigenes Design des Uploads gestalten. Alles, was du bei value angibst, überschriebt das bestehende Standard-Design. Hier kannst du beispielsweise einen einfachen Custom Button verwenden oder ein eigenes Custom Layout gestalten, das sich deiner UI anpasst. Dieser Parameter ist optional und muss natürlich nicht befüllt werden.

value: ""

Block: image{}

In dem Block image{} bestimmst du alle Werte für deinen Datensatz und das Bild, das in dem Datensatz gespeichert wird.

image: {
			tableId: "B",
			fieldId: fieldId("B","Base64Feld"),
			width: "2000px",
			height: "auto"
		},

tableId innerhalb von image{}

Bei tableId gibst du Table ID deiner Tabelle an, in der du dein Bild speichern möchtest. Zum Beispiel in einer Bilder Tabelle.

tableId: "B",

fieldId innerhalb von image{}

Bei fieldId gibst du die Feld ID deines text-Feldes an, in das du den Base64 Text deines Bildes speichern möchtest.

fieldId: fieldId("B","Base64Feld"),

width innerhalb von image{}

Die width innerhalb des image{} Blocks gibt die Weite deines Bildes in Pixelbreite an, in der du es speichern möchtest.

width: "2000px",

height innerhalb von image{}

Die height innerhalb des image{} Blocks gibt die Höhe deines Bildes in Pixelbreite an, in der du es speichern möchtest.

height: "auto"

widthFieldId & heightFieldId innerhalb von image{}

Mit den neuen Parametern widthFieldId und heightFieldId ist es nun möglich, die Abmessungen der hochgeladenen Bilder direkt in Ninox-Felder zu schreiben. Diese Funktion bietet eine komfortable Möglichkeit, Bildgrößen automatisch zu erfassen und weiterzuverarbeiten.

Hinweis: Diese Funktion gilt ausschließlich für Rastergrafiken (z. B. JPG, PNG). Bei SVG-Dateien können die ermittelten Abmessungen ungenau sein, da SVGs abhängig von ihrem Inhalt unter Umständen keine festen Größeninformationen enthalten. (seit Version 2.1.0)

widthFieldId: "", // fieldId hinterlegen
heightFieldId: "" // fieldId hinterlegen

Block: changeFieldValues

Bei changeFieldValues kannst du bestimmen, ob du noch weiterführende Aktionen ausführen möchtest. Zum Beispiel kannst du bei Upload auch gleichzeitig ein Datumsfeld in Ninox bespielen. Du kannst mehrere Aktionen ausführen.

Die fieldId innerhalb des Parameters changeFieldValues[{}] gibt die Feld ID des Feldes an, dass du verändern möchtest. Nutze dazu zum Beispiel die Ninox Funktion fieldId("Table Name","Field Name") oder fieldId(this, "Field Name").

Mit value innerhalb des Parameters changeFieldValues[{}], gibst du den Wert an, der in dein referenziertes Feld geschrieben werden soll.

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

Block: filename{}

Der Block filename{} umfasst den Parameter fieldId, um zu bestimmen in welches Feld der Dateiname geschrieben werden soll.

⚠️ Achtung: Bei Nutzung der Kamera wird kein name gespeichert.

filename: {
			fieldId: "G"
		},