append"Form" ... also ein bischen mehr als ein Element

[hotti]

s. Thema,

was zu bauen ist: Ganz oben ist ein <input id="myfiles" multiple type="file"> wo mehrere Images ausgewählt werden können. Diese sollen dann untereinander ins DOM eingebaut werden, mit appendChild ist das ja kein Thema, aber es darf ein bischen mehr sein:

Neben jedem Bild soll ein Formular gezeigt werden, wo zum jeweiligen Bild ein paar Eingaben gemacht werden können (Skalierung, Titel, Bechreibung, Zielordner...).

Azuhängen wäre also nicht nur ein Child schlechthin sondern ein ganzer Zweig. Spontan würde ich da mit serverseitiger Unterstützung (ajax) eine Liste mit Formular-Templates vorausgefüllt zurückschicken, aber es könnte ja auch einfacher gehen, also mit einer reinen JS-Lösung, gibts da schon was oder bleibt nur der Eigenbau?

Bitte mal um Hinweise, danke im Vorab.

[molily]

Hallo,

Spontan würde ich da mit serverseitiger Unterstützung (ajax) eine Liste mit Formular-Templates vorausgefüllt zurückschicken, aber es könnte ja auch einfacher gehen, also mit einer reinen JS-Lösung, gibts da schon was oder bleibt nur der Eigenbau?

Da gibt es sehr viele Lösungen, je nachdem, was für eine Komplexität du willst/brauchst.

• HTML-String im JavaScript zusammenbauen, variable Inhalte einmontieren. Lässt sich durch eine Templating-Bibliothek vereinfachen.
• DOM-Baum in JavaScript aufbauen, variable Inhalte einmontieren. Lässt sich durch Bibliotheken vereinfachen. Letztlich arbeitet JSX von ReactJS auch so.
• Ein bestehendes (z.B. unsichtbares) DOM klonen und als Template nutzen. Inhalte händisch einmontieren oder mit Bibliotheken (1, 2).
• JavaScript-Framework benutzen, das eine Templating-Lösung und das Rendern von Listen mitbringt. Dann füllt man nur einen Array mit einem Objekt (dem Model) und die Liste wird automatisch gerendert. Zum Beispiel Angular, Ember oder React.

Das HTML serverseitig zusammenzubauen ist natürlich auch eine mögliche Option, falls du clientseitig nicht viel Logik haben willst und die Logik serverseitig ohnehin implementieren musst.

Mathias

[hotti]

hi Mathias, Deine Antwort kommt prompt, danke Dir!!!

Das HTML serverseitig zusammenzubauen ist natürlich auch eine mögliche Option, falls du clientseitig nicht viel Logik haben willst und die Logik serverseitig ohnehin implementieren musst.

Ich bin noch am Überlegen was das Gesamtkonzept betrifft, da sollte es auch eine Offline-Komponente geben, womit lokale Indexdateien für Bildarchive erstellt werden können (FileSaver.js, Speichern unter…).

Gute Idee einen (unsichtbaren) DOM-Zweig dafür zu klonen.

Andererseits soll das Backend als "Picture Publisher Visuell" das Management von Bilddateien serverseitig erleichtern (visuell, wie der Name suggeriert).

Das spräche für ein serverseitig erzeugtes Template, idealerweise liegt das nur einmal im Code um Redundanzen zu vermeiden...

Danke für Deine Hinweise!!!

Bis dann ;)

[1UnitedPower]

Meine Herren!

Gute Idee einen (unsichtbaren) DOM-Zweig dafür zu klonen.

Das template-Element, der Streber, schnippst mit dem Finger und drängt sich penetrant auf.

[hotti]

Mann!!

Gute Idee einen (unsichtbaren) DOM-Zweig dafür zu klonen.

Das template-Element, der Streber, schnippst mit dem Finger und drängt sich penetrant auf.

Jetzt wo ichs Template serverseitig habe kommst Du mit sowas :)

Aber sowas von schön, Dein Vorschlag, ich nehme an, Danke Dir!!!
(wird aber erstmal übergeschlafen)

Viele Grüße,
  Horst Hurtig

[hotti]

hi,

Gute Idee einen (unsichtbaren) DOM-Zweig dafür zu klonen.

Das template-Element, der Streber, schnippst mit dem Finger und drängt sich penetrant auf.

Es wird hier vorerst beim serverseitigen Template bleiben, das vereinfacht den Datenabgleich mit diesem Ablauf:

Nach dem Einfügen der Bilder in der Browser geht die Liste mit den lokalen Dateinamen per ajax-Request zum Server wo sich ein Index befindet. Sofern ein Dateiname im serverseitigen Index einen Treffer gibt, wird das zum Bild gehörige Formular mit Title, Beschreibung ausgefüllt in der Response zurückgeschickt und neben dem jeweiligen Foto angezeigt.

Ein anderes Problem: Ab 10 Bildern wird's im Browser träge, für Vorschläge zum Optimieren bin ich dankbar.

MfG

[hotti]

...da kommen 300 MB schonmal zusammen. Fürn FF auch kein Problem, 300 MB in einem JS-Objekt...

Problematisch wird es, wenn 170 Fotos (um mal eine Zahl zu nennen) auf einheitlich 200*150px gerendert werden sollen, da geht lange Zeit erstmal garnix mehr.

Gibt es da eine Optimierungsmöglichkeit?
Wie gesagt, ohne die Bilder zu Rendern kann nach dem Einfügen unverzüglich gescrollt werden, aber nur die Dateinamen, das sieht ein bischen nackig aus, da sollten schon die Thumbnails dran.

MfG

[hotti]

...da kommen 300 MB schonmal zusammen. Fürn FF auch kein Problem, 300 MB in einem JS-Objekt...

Problematisch wird es, wenn 170 Fotos (um mal eine Zahl zu nennen) auf einheitlich 200*150px gerendert werden sollen, da geht lange Zeit erstmal garnix mehr.

Gibt es da eine Optimierungsmöglichkeit?
Wie gesagt, ohne die Bilder zu Rendern kann nach dem Einfügen unverzüglich gescrollt werden, aber nur die Dateinamen, das sieht ein bischen nackig aus, da sollten schon die Thumbnails dran.

Heutige Lösung:
Die Bilder werden (nach dem Einlesen der Binaries) im 2-Sekunden-Takt über <canvas> auf Daumennagelgröße herunterscaliert und in den Browser gerendert.

Der Benutzer kann unverzüglich mit der Dateneingabe beginnen und es kann sogar gescrollt werden. Bei Bedarf können Bilder per Klick vorzeitig geladen werden, also unabhängig vom 2-Sekunden-Takt. Das Synchronisieren der Bilddaten mit dem Server erfolgt jedoch für jedes Bild einzeln.

Wer Lust und Laune hat, kann das mal ausprobieren.

Ideen zur Optimierung weiterhin willkommen!!!

Viele Grüße,
  Horst Leghorn