everflux

Gerade wenn es um sogenannten user generated content geht, ist es immer schön, wenn man eine Vorschaufunktion anbieten kann. Ein Knopf “Vorschau” ist ziemlich 1990 – es lebe das Web 2.0 mit Ajax, jQuery und vielen Hacks.

Ich hatte bereits darüber gebloggt wie man mittels jQuery und etwas Tricksen einen “Ajax Fileupload” realisert. Noch schöner ist es natürlich, wenn der User sofort Feedback bekommt, wie sein ausgewähltes Bild wohl aussehen würde. Dazu lädt man das Bild schon direkt nachdem der User eine Datei ausgewählt hat, und zeigt diese an. An Browser-Caches muss man vielleicht noch denken, aber auch hier kann JavaScript bzw. jQuery helfen.

Das Vorgehen:

1. Man hängt einen Listener an die Change Methode des Input Felds
2. Wie in meinem letzten Beitrag beschrieben wird der Upload über ein Iframe realisiert
3. Nun biegt man noch die Bild URL um und zeigt somit das Resultat an

Hier der Quellcode: (das Formular heißt “logoUploadForm”, das input Feld für das Image File “logo”.
Ajax Fileupload handling – und Bild URL umbiegen nach dem Upload.

//handle file upload with hidden iframe
jQuery("#logoUploadForm").submit( function(data)
{
var submittingForm = jQuery( this );
var frameName = ("upload"+(new Date()).getTime());
var uploadFrame = jQuery("<iframe name=\""+frameName+"\" />");
uploadFrame.css("display", "none");
uploadFrame.load(function(data){
//submit is complete here
setTimeout(function(){
//update image
var imageDiv = jQuery("#print_logoImage");
var logoUrl = imageDiv.attr("src").split("?")[0];
imageDiv.attr("src", logoUrl+"?"+ (new Date()).getTime());
//remove hidden upload frame
uploadFrame.remove();},1000);
});
jQuery("body:first").append(uploadFrame);
//setup complete
submittingForm.attr("target", frameName);
});

Hier noch der Code zum “sofort upload”:

jQuery("input[name=logo]").change(function (){
jQuery("#logoUploadForm").submit();
});

Das wars – ausprobieren!

Ajax ist eine tolle Erfindung – bis auf ein paar “Kleinigkeiten”. Z.B. ist nicht vorgesehen einen Dateiupload mittels Ajax zu realisieren. Da muss schon ein echtes Formular her.

Doch wenn dennoch eine Datei im Hintergrund hochgeladen werden soll – also ein “echter” Ajax File upload realisiert werden soll – greift man in die kreative Trickkiste. Die üblichen Verdächtigen für solche Aufgaben sind DWR, jQuery, Dojo. DWR bringt in der Inkarnation 3.0 dann auch Support für Ajax Fileupload, inclusive einem Mapper. Also zurück zu den Basics – was tun, wenn ein XmlHttpRequest nicht da ist? Richtig! Unsichtbares iframe nehmen. Weiterlesen »

GWT zum Mitreden: Informationen zum Google Web Toolkit, die für einen Vortrag zusammengestellt wurden.

Weiterlesen »

Das Google Web Toolkit wird erwachsen – das behauptet Google zwar nicht selber, doch das Umfeld spricht eine deutliche Sprache. GWT 1.5 wird endlich – lang ersehnt – Java 5 und damit auch die Generics von Java 5 unterstützen. Auch wenn noch keine fertige 1.5 Version von GWT vorliegt, so arbeiten bei Google eifrig die Entwickler an dem OpenSource Projekt.

Während von GWT 1.5 inzwischen Milestone 2 verfügbar ist, wächst auch das Ökosystem rund um das Google Web Toolkit:

GQuery ist eine typsichere Umsetzung von jQuery für GWT – wer jQuery kennengelernt hat, wird es sicherlich auf Anhieb lieben.

GWT-SL, die Google Webtoolkit Server Library zielt auf Spring Framework Integration ab: Spring Beans können als RPC Dienste exportiert werden, und macht so die Integration in bestehende Entwicklungs-Stacks oder auch Applikationen einfacher.

Hibernate4GWT schließlich rundet das ganze ab: Hibernate persistierte Objekte (und lazy collections) können ohne Verrenkungen mit GWT verwendet werden. Mit GWT 1.5 und Java Generics wird das sicherlich noch ein großes Stück angenehmer.