Schweizer Alpen-Club SAC / C037 Input File
Drag & Drop
Bereits hochgeladen
img_1_140
Format: jpg
img_3_260
Format: png
Gedichte
Format: docx
Data
{
"name": "somefile",
"id": "somefile-1",
"label": "Bilder oder Dateien (max. 5 MB, JPG, PDF)",
"placeholder": "Dateien auswählen",
"multiple": true,
"dropzoneLabel": "Drag & Drop",
"accept": ".jpg",
"hasDropzone": true,
"required": false,
"error": false,
"errorList": false,
"fileList": [
{
"id": "img0",
"name": "img_1_140",
"checkboxName": "tx_usersaccasads_txusersaccasads[ad][deleteFiles][img_1_140.jpg]",
"type": "jpg",
"img": {
"srcset": {
"sizeList": [
[
140
]
],
"basePath": "/modules/c037_input_file/media/img_1_",
"fileExtension": ".jpg"
},
"alt": "Alt Text"
}
},
{
"id": "img1",
"name": "img_3_260",
"checkboxName": "tx_usersaccasads_txusersaccasads[ad][deleteFiles][img_2_140.jpg]",
"type": "png",
"img": {
"srcset": {
"sizeList": [
[
260
]
],
"basePath": "/modules/c037_input_file/media/img_3_",
"fileExtension": ".png"
},
"alt": "Alt Text"
}
},
{
"id": "file1",
"name": "Gedichte",
"checkboxName": "tx_usersaccasads_txusersaccasads[ad][deleteFiles][gedichte.docx]",
"type": "docx"
}
],
"labels": {
"type": "Format",
"deleteFile": "Datei löschen",
"alreadyUploaded": "Bereits hochgeladen"
},
"jsOptions": {
"showFileList": true,
"i18n": {
"status": {
"single": "{{count}} Datei ausgewählt",
"multiple": "{{count}} Dateien ausgewählt"
},
"labels": {
"size": "Größe",
"type": "Format"
}
}
}
}
Template
<div class="c-input-file {{#if hasDropzone}}c-input-file--dragdrop{{/if}}" data-init="InputFile"{{#if jsOptions}} data-inputfile-options='{{{json jsOptions}}}'{{/if}}>
{{#if label}}
<label class="c-form-label fs-copy-note-bold{{# if required}} c-form-label--mandatory{{/if}}{{#ifAny error errorList}} has-error{{/ifAny}}{{#if labelHidden}} o-visuallyhidden{{/if}}" for="{{id}}">{{label}}</label>
{{/if}}
<div class="c-input-file-inner">
<input class="c-input-file__input" type="file" data-js-binding="InputFile-input" name="{{name}}{{#if multiple}}[]{{/if}}" id="{{id}}"{{#if multiple}} multiple{{/if}} {{#if accept}}accept="{{accept}}"{{/if}}>
<label class="c-input-file__label-wrapper c-input-text" for="{{id}}">
{{#if placeholder}}
<span class="c-input-file__label" data-js-binding="InputFile-status">{{placeholder}}</span>
{{/if}}
<button class="c-input-file__reset c-button-text" data-js-binding="InputFile-reset">
<svg class="svg"><use xlink:href="{{@root.global.svgSprite}}#icon-trash-bin"></use></svg>
</button>
<span class="c-input-file__button c-button c-button--secondary c-button--icon-square" aria-hidden="true"><svg class="c-button__icon svg"><use xlink:href="{{@root.global.svgSprite}}#icon-folder-open"></use></svg></span>
</label>
<div class="c-input-file__dropzone">
<span class="c-input-file__dropzone-text fs-copy-note">{{dropzoneLabel}}</span>
</div>
</div>
<div class="c-input-file__local" data-js-binding="InputFile-local"></div>
{{#if fileList}}
<div class="c-input-file__server">
<div class="c-input-file__server-headline fs-copy-note-bold" data-js-binding="InputFile-server-hl">{{labels.alreadyUploaded}}</div>
{{>modules/c037_input_file/partials/_file_list list=fileList showDelete=true }}
</div>
{{/if}}
{{#if errorList}}
<ul class="c-form__input-error-list o-ui-list fs-copy-note">
{{#each errorList}}
<li>{{this}}</li>
{{/each}}
</ul>
{{/if}}
</div>
Template of modules/c037_input_file/partials/_file_list
<div class="c-input-file__list o-ui-list">
{{#each list}}
<div class="c-input-file__file-wrapper">
{{#if ../showDelete}}
<input class="c-input-file__checkbox" type="checkbox" id="{{id}}" name="{{#if checkboxName}}{{checkboxName}}{{else}}{{name}}{{/if}}" value="true" data-js-binding="InputFile-delete" aria-label="{{../labels/deleteFile}}">
{{/if}}
<div class="c-input-file__file">
<div class="c-input-file__file-thumb">
{{#if img}}
<div class="o-aspect-ratio o-aspect-ratio--1x1">
<div>{{> modules/_image/_image img}}</div>
</div>
{{else}}
<svg class="c-input-file__file-icon svg"><use xlink:href="{{@root.global.svgSprite}}#icon-file"></use></svg>
{{/if}}
</div>
<div class="c-input-file__file-text">
<span class="c-input-file__file-name fs-copy-bold">{{name}}</span>
{{#if size}}
<span class="c-input-file__file-size fs-copy-note">{{../labels.size}}: {{size}}</span>
{{/if}}
{{#if type}}
<span class="c-input-file__file-type fs-copy-note">{{../labels.type}}: {{type}}</span>
{{/if}}
</div>
{{#if ../showDelete}}
<div class="c-input-file__delete">
<svg class="c-input-file__trash svg" aria-hidden="true"><use xlink:href="{{@root.global.svgSprite}}#icon-trash-bin"></use></svg>
</div>
{{/if}}
</div>
</div>
{{/each}}
</div>
Global Data
{
"global": {
"lang": "de",
"locale": "de-CH",
"svgSprite": "/assets/media/svg/svg-sprite.svg",
"transparentPixel": "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
"season": "summer",
"api": {
"suisseAlpine": "https://dev.suissealpine.sac-cas.ch/api",
"sacRouteDetail": "https://dev.web.sac-cas.ch/de/?type=1567765346410&tx_usersaccas2020_sac2020[routeId]=",
"sacRoutePassTrough": "https://dev.web.sac-cas.ch/de/?type=1567765346411&tx_usersaccas2020_sac2020[routeId]=",
"uploadProfileImage": "https://dev.web.sac-cas.ch/?eID=routing&route=usersaccassite/users/current/uploadProfileImage",
"deleteProfileImage": "https://dev.web.sac-cas.ch/?eID=routing&route=usersaccassite/users/current/deleteProfileImage",
"aimeosShop": "https://dev.web.sac-cas.ch/de/shop/shopapi/",
"mailchimpForm": "https://sac-cas.us2.list-manage.com/subscribe/post?u=466a37a029f12e4df9e7a2a1f&id=ee3f0f3cf3",
"collections": "https://collectionsdev.web.sac-cas.ch/api",
"hrs": "https://www.alpsonline.org/hut-web-service?wsdl"
},
"baseAimeosUploadPath": "https://dev.web.sac-cas.ch/uploads/tx_aimeos/",
"mapIframeUrl": "/modules/m030_map/media/map_iframe.html",
"baseDestinationLinkUrl": "/pages/destination_summit/destination_summit.html?",
"destinationLinkRouteAnchor": "route",
"baseJourneyLinkUrl": "https://dev.web.sac-cas.ch/de/redirect/google-maps-routing/lv03/",
"routeCollectionLinkUrl": "https://dev.web.sac-cas.ch/de/mein-sac/uebersicht/",
"hrsLinkUrl": "https://www.alpsonline.org/reservation/wizard?header=yes&hut_id={{hutId}}&selectedDate={{date}}",
"schweizMobilImportUrl": "https://map.schweizmobil.ch/?showDialog=importcoordinates&showLogin&coordinates={{coordinates}}",
"geologyImageUrl": "https://www.sac-cas.ch/fileadmin/Huetten_und_Touren/Tourenportal/Gesteinszonenkarten/Hovercard/{{image}}.jpg",
"features": {
"archive": true
},
"translations": {
"disciplines": {
"mountain_hiking": "Berg- und Alpinwandern",
"alpine_tour": "Hochtour",
"climbing": "Klettern",
"alpine_climbing": "Alpinklettern",
"via_ferrata": "Klettersteig",
"ski_tour": "Skitour",
"snowshoe_tour": "Schneeschuhtour",
"archive": "Routenarchiv"
},
"types": {
"summit": "Gipfel",
"hut": "Hütte",
"traverse": "Übergang",
"marking_point": "Markanter Punkt",
"departure_arrival": "Ausgangp./Talort",
"climbing_area": "Klettergebiet"
},
"markingPoints": {
"lake": "See",
"catering": "Einkehr",
"waterfall": "Wasserfall",
"cave": "Höhle",
"bridge": "Brücke",
"alp": "Alpe",
"other": "Sehenswürdigkeit"
},
"difficulties": {
"alpine_tour": {
"L": "L",
"WS": "WS",
"ZS": "ZS",
"S": "S",
"SS": "SS",
"AS": "AS"
},
"ski_tour": {
"L": "L",
"WS": "WS",
"ZS": "ZS",
"S": "S",
"SS": "SS",
"AS": "AS"
}
},
"altitudeSuffix": "m ü.M.",
"altitudeDifferenceUnit": "hm",
"hoursUnit": "h",
"difficulty": "Schwierigkeit",
"ascent": "Aufstieg",
"descent": "Abstieg",
"route": "Route",
"routes": "Routen",
"segment": "Routenabschnitt",
"segments": "Routenabschnitte",
"approach": "Zustieg",
"approaches": "Zustiege",
"sector": "Sektor",
"sectors": "Sektoren",
"hut": "Hütte",
"hutPrivate": "Hütte Privat",
"hutFilter": "Hüttenfinder",
"situationWarning": "Zustandswarnung",
"protectionRule": "Schutzbestimmung",
"archiveRoute": "Archivroute",
"archiveRoutes": "Archivrouten",
"map": {
"map": "Karte",
"legend": "Legende",
"zoomIn": "Reinzoomen",
"zoomOut": "Rauszoomen",
"enterFullscreenMode": "Vollbildmodus starten",
"leaveFullscreenMode": "Vollbildmodus verlassen",
"searchLabel": "Region, Gipfel, Hütte, Talort, POI, …",
"disciplineSettings": "Disziplinen Einstellungen",
"layerSettings": "Ergänzende Kartenebenen",
"geolocate": "Lokalisieren",
"searchInView": "In diesem Gebiet suchen",
"waypointDrawing": "Auf Karte zeichnen",
"drawWaypoints": "Route zeichnen",
"removeWaypoints": "Route löschen",
"exportWaypoints": "GPX downloaden",
"saveInSchweizMobil": "Speichern|SchweizMobil Plus",
"moreInFullscreen": "Entdecke weitere Funktionen auf der Vollbildkarte:<br>- Zeichne deine eigenen Tracks",
"baseLayers": {
"pois": "Tourenziele, Hütten",
"routes": "Routen"
},
"additionalLayers": {
"summer": "Sommer",
"winter": "Winter",
"hikingTrails": "Wanderwege",
"closedHikingTrails": "Gesperrte Wanderwege",
"wildlifeReserves": "Wildschutzgebiete",
"skiTours": "swisstopo Skitouren",
"designatedWildlifeAreas": "Wildruhezonen",
"publicTransportStops": "ÖV-Stationen",
"slopesOver30": "Hangneigung ab 30°",
"protectionRules": "Schutzbestimmungen",
"situationWarnings": "Zustandswarnungen",
"geology": "Gesteinszonenkarte",
"alpGuardDogs": "Herdenschutzhunde",
"armyShooting": "Schiessanzeigen",
"snowCover": "Schneeabdeckung",
"snowDepth": "Schneehöhe"
},
"layerOpacity": "Deckkraft aktiver Karten",
"foregroundOpacity": "Deckkraft aktiver Disziplinen und Hütten",
"backgroundOpacity": "Deckkraft inaktiver Disziplinen und Hütten",
"reset": "Zurücksetzen"
},
"mapHoverCard": {
"publicTransport": "Öffentlicher Verkehr",
"parkingInformations": "Parkinformationen",
"planJourneyPublicTransport": "Anreise",
"searchPublicTransport": "Verbindung suchen (SBB)",
"planJourneyCar": "Anreise Google Maps",
"downloadWaypoint": "Wegpunkt downloaden",
"routeLinkLabel": "Route ansehen",
"wildlifeReserve": "Wildschutzgebiet",
"wildlifeArea": "Wildruhezone",
"closedHikingTrail": "Sperrung / Umleitung Wanderweg",
"alpGuardDogs": "Alpweide geschützt durch Herdenschutzhunde",
"armyShooting": "Schiessanzeige und Gefahrenstelle",
"legalBasis": "Grundlage",
"additionalInformation": "Zusatzinformationen",
"showDetails": "Details anzeigen",
"moreOnMapAdminCh": "Mehr Informationen auf map.admin.ch",
"currentSnowDepth": "Aktuelle Schneehöhe"
},
"protectionArea": {
"lastUpdated": "zuletzt aktualisiert am {{lastUpdate}}",
"validity": "gültig von {{validFrom}} bis {{validUntil}}",
"validityEstimated": "gültig von {{validFrom}} bis voraussichtlich {{validUntil}}",
"validFrom": "gültig ab {{validFrom}}",
"validUntil": "gültig bis {{validUntil}}",
"validUntilEstimated": "gültig bis voraussichtlich {{validUntil}}",
"generallyValid": "generell gültig"
},
"collections": {
"addRouteToCollection": "Route merken",
"selectCollection": "Merkliste auswählen",
"selectRoute": "Welche Route(n) dieses Tourenziels möchtest du dir merken?",
"selectRouteError": "Bitte wähle eine Route aus.",
"addToCollection": "Merken",
"cancel": "Abbrechen",
"routeAddedToCollection": "Die ausgewählte Route(n) wurden zu deiner Merkliste hinzugefügt.",
"createNew": "Neue Liste",
"close": "Schliessen",
"goToCollection": "Zur Merkliste",
"alreadyCollectedIn": "Bereits gemerkt auf"
}
},
"basePublicTransportLinkUrl": "https://www.sbb.ch/en/buying/pages/fahrplan/fahrplan.xhtml?language=en&nach=",
"snowDepthInfoUrl": "https://www.sac-cas.ch",
"snowCoverInfoUrl": "https://www.sac-cas.ch",
"destinationFallbackImages": {
"summit": {
"srcset": {
"sizeList": [
[
600
],
[
1200
],
[
2048
]
],
"urlList": [
"/modules/c015_teaser_destination/media/summit_600.jpg",
"/modules/c015_teaser_destination/media/summit_1200.jpg",
"/modules/c015_teaser_destination/media/summit_2048.jpg"
]
}
},
"hut": {
"srcset": {
"sizeList": [
[
600
],
[
1200
]
],
"urlList": [
"/modules/c015_teaser_destination/media/hut_600.jpg",
"/modules/c015_teaser_destination/media/hut_1200.jpg",
"/modules/c015_teaser_destination/media/hut_2048.jpg"
]
}
}
},
"map": {
"news": [
{
"label": "Neu",
"copy": "Jetzt auch <b>GPX downloaden</b>",
"type": "waypointDrawing"
},
{
"label": "Neu",
"copy": "Jetzt Deckkraft für jede Ebene einstellbar",
"type": "layerSettings"
}
],
"metaLinkList": [
{
"url": "https://www.swisstopo.admin.ch/",
"label": "© swisstopo (5701325910)"
},
{
"url": "/pages/map_legend/map_legend.html",
"label": "Hilfe & Legende"
},
{
"url": "#",
"label": "Haftungsausschluss"
}
]
}
}
}
Documentation
Description
Integration
Copy HTML.