Vorschau bei Bildupload

Ich finde es ein nettes Feature, eine kleine Vorschau anzuzeigen, wenn ich ein Bild auf einer Webseite hochladen will.
Dazu folgendes kleines Snippet:

$(function() {
    $("#fileUpload").change(function() {
        if (this.files && this.files[0]) {
            var file = this.files[0];

            var preview = $('#imagePreview');

            var isImage = typeof file.type !== "undefined" && file.name.match(/\.(png|jpe?g)$/i);

            if (isImage && typeof FileReader !== "undefined") {
                var reader = new FileReader();

                reader.onload = function(e) {
                    preview.empty();
                    var img = $('<img>');
                    img.attr('src', e.target.result);

                    if (preview.css('max-height') != 'none') {
                        img.css('max-height', parseInt(preview.css('max-height'), 10));
                    }

                    preview.html(img);
                }

                reader.readAsDataURL(this.files[0]);

                preview.show();
            } else {
                preview.empty();
                preview.html($('<p>').text('Dateiname: ' + file.name));
                preview.show();
            }
        }
    });
});

Das passende Formular dazu:

<div class="form-group">
    <label for="fileUpload" class="control-label col-md-2">Datei: </label>
    <div class="col-md-10">
        <input type="file" name="fileUpload" id="fileUpload"/>
    </div>
</div>
                    
<div class="form-group">
    <div class="col-md-10 col-md-offset-2 fileInputPreview" id="imagePreview">
        <!-- empty tag for preview image -->
    </div>
</div>

Die passenden CSS Klassen, damit das Bild auch nicht aus dem Design rauswandert 🙂

.fileInputPreview {
    display: inline-block;
    max-height: 200px;
    width: 500px;
}

.fileInputPreview img {
    max-width: 100%;
    height: auto;
}

Am Ende sieht es dann etwa so aus:
imagePreview

Den File-Upload habe ich mit Bootstrap FileStyle optisch etwas ansprechender gestaltet.

jQuery – Seitennavigation abbrechen

Fast jedes Programm weißt den Benutzer darauf hin, wenn es ungespeicherte Änderungen gibt, sobald man das Programm verlassen will.
Im Browser gibt es sowas standardmäßig nicht, aber dank JavaScript ist das kein Problem. Und mit jQuery wird die ganze Sache sogar noch einfacher.

Und zwar kann man sich an das „beforeUnload“-Event hängen. Hier wird der zu erscheinene Text hinterlegt. Weiteren Einfluss auf die Gestaltungsmöglichkeit hat man nicht, dies hängt vom Browser ab.

$("form").one("change", ":input", function() {
    // einen Hinweis anzeigen (wer es möchte)
    $('#saveInfo').show();

    // Bevor die Seite verlassen wird, wird der folgende Text angezeigt.
    $(window).on('beforeunload', function (e) {
            return "Es gibt ungespeicherte Änderungen.";
    });

    // Verhindern, dass ein Submit-Button (also z.B. "Speichern") auch den Hinweis hervorruft.
    $(this).parents("form:first").find(":submit").click(function() { $(window).off("beforeunload"); });
});

In dem Beispiel überwache ich alle Eingabefelder („:input„) innerhalb meiner Form. Sobald ein Feld geändert wird das „beforeunload“-Event scharf gemacht. Achtet auch auf die letzte Zeile, sollte ich über einen Submit-Button kommen („:submit„), wird das Event wieder aufgehoben. Schließlich will ich ja beim Klick auf „Speichern“ nicht den Hinweis bekommen.

2014

Und wieder beginnt ein neues Jahr. Viele nutzen den Jahreswechsel, um sich guten Vorsätzen hinzugeben und möchten nun ein paar Sachen ändern. Bei mir ist das eigentlich nicht so, denn für mich ist der Jahreswechsel genauso gut oder schlecht wie jeder andere Tag im Jahr. Ich brauche eigentlich keine Veränderungen, denn diese hatte ich in 2013 genug. Angefangen beim eigenen Haus, über einen neuen Arbeitgeber, weiter zur Hochzeit mit meiner Traumfrau weiter zur Glücksvollendung durch die Geburt meines Sohnes Max. Damit war 2013 vermutlich das aufregendste und spannendste Jahr meines Lebens (bis jetzt).
All das hat mein Leben komplett umgekrempelt und meine Prioritäten liegen nun komplett anders als beispielsweise vor einem Jahr. Nicht jede dieser Entwicklungen macht mich glücklich, allerdings wäre es auch keine Herausforderung, wenn alles so einfach zu meistern wäre.
Daher freue ich mich sehr auf das neue Jahr, es wird nicht langweilig und garantiert mit vielen Erlebnissen und Erfahrungen gespickt sein, welche ich mir überhaupt nicht vorstellen kann.
Daher wünsche ich euch auch ein spannendes Jahr und hoffe ihr freut euch auf eure Herausforderungen und nutzt 2014 vielleicht auch für die eine oder andere Veränderung. Es muss ja nicht gleich so radikal wie bei mir sein, aber es kann sich immer lohnen!

In diesem Sinne – Prost Neujahr!

Attrice TFS Sidekicks mit Visual Studio 2013 zum laufen bekommen

Aktuell nutze ich Visual Studio 2013 RC in Verbindung mit dem TFS 2012. Dazu habe ich in den letzten Jahren TFS Sidekicks von Attrice lieben gelernt.
Jedoch wollte das Programm auf meinem Rechner nicht starten, die Fehlermeldung lautete „Application cannot read registry.“. Auch die Tipps aus dem Netz, dass man als Administrator starten sollte halfen nicht. Offiziell wird nur Visual Studio 2012 unterstützt, daher vermutete ich hier das Problem.

Mithilfe von meinem neuen Lieblings-Tool dotPeek kam ich auch schnell dahinter, warum er scheiterte:

        RegistryKey registryKey = Registry.LocalMachine.OpenSubKey("SOFTWARE\\Microsoft\\VisualStudio\\11.0");
        if (registryKey != null)
        {
          if (registryKey.OpenSubKey("TeamFoundation\\SourceControl") != null)
            str = registryKey.GetValue("InstallDir", (object) string.Empty) as string;
        }

Da ich Version 11 (VS 2012) nicht installiert hatte, konnte er den Pfad auch nicht finden. Die Ordner halt von Hand angelegt, den Schlüssel „InstallDir“ aus der 12er-Version kopiert, schon funktionierte alles. Ihr müsst auch den TeamFoundation/SourceControl – Ordner anlegen, der InstallDir-Schlüssel kommt aber unterhalb von „11.0“.

Wichtig: solltet ihr ein 64-Bit System haben, findet ihr die Ordner unterhalb von „Wow6432Node“ in der Registry!