Datein hochladen unschön?

Hi,

heute mal eine Idee, wie man das File-Upload-Element von Html-Formularen verschönern kann. Wie wahrscheinlich viele wisse, ist dieses Html-Feld so gut wie gar nicht stylebar.

<input class="__specialfile" type="file" name="file">
<style>
.__specialfile {
  display: none;
}
.__specialfiletxt {
  display: inline-block;
  border: 1px solid gray;
  border-radius: 3px;
  min-width: 330px;
  min-height: 18px;
  padding: 1px 3px;
  background-color: white;
  font-weight: bold;
  font-style: italic;
  cursor: pointer;
}
.__specialfiletxt:empty:before {
  content: "Datei auswählen";
  color: red;
  font-weight: normal;
  font-style: normal;
  opacity: 0.5;
   border: 1px solid red;
  border-radius: 3px;
  padding: 0px 3px;
}
.__specialfiledel {
  color: red;
  font-weight: normal;
  font-style: normal;
  opacity: 0.5;
  border: 1px solid red;
  border-radius: 3px;
  padding: 0px 3px;
  margin-left: 5px;
  cursor: pointer;
}
</style>
<script>
  $$('.__specialfile').forEach(function (aFileField) {
    var txt = new Element('span', {'class': '__specialfiletxt'});
    txt.observe('click', (function (event, file) {
      file.click();
    }).bindAsEventListener(txt, aFileField));
    var del = new Element('span', {'class': '__specialfiledel', 'style': 'display: none;'});
    del.update('X');
    del.observe('click', (function (event, file, txt) {
      file.value = '';
      txt.update('');
      this.hide();
    }).bindAsEventListener(del, aFileField, txt));
    aFileField.parentNode.appendChild(txt);
    aFileField.parentNode.appendChild(del);
    aFileField.observe('change', (function (event, txt, del) {
      txt.update(this.value);
      if (this.value) {
        del.show();
      }
      else {
        del.hide();
      }
    }).bindAsEventListener(aFileField, txt, del));
  });
</script>

Erklärung: Beim laden der Seite wir folgendes gemacht.

  1. Das File-Upload-Element wird per “display: none;” ausgeblendet.
  2. Es wird ein einfaches Html-Element “class=__specialfiletxt” eingefügt. Dieses Element wird zur Anzeige der ausgwählten Datei benutzt.
  3. Es wird ein weiteres einfaches Html-Element “class=__specialfiledel” eingefügt. Dieses Element wird dazu benutzt um ein gewähltes File wieder aus dem Upload-Element zu entfernen. Dieses Element wir nur angezeigt, wenn ein File ausgewählt wurde.
  4. Wenn jetzt der Benutzer auf das Element “class=__specialfiletxt” klickt, dann wird dieser Event an das echte (aber versteckte) File-Element weitergegeben. Der Auswahldialog für Dateien öffnet sich.
  5. Beim “onchange” wird nun der gewählte Wert bzw. der Name des gewählten Files in das Element “class=__specialfiletxt” geschrieben und das Element “class=__specialfiledel” eingeblendet.

Fertig 🙂

Image

Image

Wie schon das letzte Mal soll dieser Artikel eher beispielhaft sein und nur die Möglichkeiten demonstrieren. Ich habe das ganze auch nur im Firefox getestet.

Advertisements

Doppeltes Abschicken von Formularen unterbinden

Nur eine Idee oder Gedankenanstoß, wie man das doppelte Abschicken von Request auf relativ einfache Art unterbinden kann.

<div id="unloadoverlay"></div>
<script type="text/javascript">
  onbeforeunload = function () {
    $("unloadoverlay").focus();
    $("unloadoverlay").addClassName("phase1");
    (function () {
      $("unloadoverlay").addClassName("phase2");
    }).delay(0.25);
    (function () {
      $("unloadoverlay").removeClassName("phase1");
      $("unloadoverlay").removeClassName("phase2");
    }).delay(10);
  }
</script>

Anmerkungen: Ich habe prototype.js auf der Seite eingebunden.

Idee: Sobald der Browser versucht eine neue Seite zu laden, wird ein DIV über die ganze Seite gelegt und somit ein weiterer Klick auf die Seite oder Buttons abgefangen.

Hier noch die entsprechenden Styles dazu.

#unloadoverlay {
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}
#unloadoverlay.phase1 {
  display: block;
}
#unloadoverlay.phase2 {
  cursor: wait;
}