Die Funktionsweise

Die A8Dropzone generiert POST-Requests genau wie ein Upload-Element eines normalen HTML-Formulars. D.h. die Programmierung auf der Serverseite MUSS nicht geändert werden.
Aber durch Einsatz der A8Dropzone KANN man Web-Applikationen - und speziell die Datei-Uploads - für die Benutzer absolut neu und extrem einfach gestalten: Seiteninhalte können dynamisch ausgetauscht werden. Zur Demonstration bitte das oben stehende Video ansehen und natürlich die A8Dropzone selbt testen!
Übrigens: Hat der Benutzer ein Bild in der Systen-Zwischenablage und klickt einfach auf die A8Dropzone, so konvertiert die A8Dropzone das Bild in das PNG-Format und öffnet es im Image Center - optimal auch für Screenshots!

Einfache Integration

Stellen Sie einfach die Datei a8dropzone-2.7.0.jar auf Ihren Server und betten Sie z.B. so in Ihren HTML-Code ein:

<applet mayscript code="at.activ8.a8dropzone.A8Dropzone" codebase="http://your.domain.com/a8dropzone" archive="a8dropzone-2.7.0.jar" name="A8Dropzone" width="150" height="50">
  <param name="licenseKey" value="YOUR LICENSE KEY">
  <param name="postURL" value="http://your.domain.com/a8dropzoneuploads.php">
  <param name="postParam0" value="someParam1=someValue1">
  <param name="postParam1" value="someParam2=someValue2">
  <param name="responseFunction" value="updateFiles">
  <param name="label" value="Dropzone">
  <param name="encoding" value="UTF-8">
  <param name="directoryUpload" value="true">
</applet>

Erklärung dazu: Das Applet generiert POST-Requests an die URL die Sie in postURL angeben. Sie können dem Request noch beliebige Parameter hinzufügen (z.B. Session-ID), die bei jedem Datei-Upload mitgeschickt werden: "postParamX" (X=0..n). Die Javascript-Funktion, die nach einem Datei-Upload ausgeführt werden soll, können Sie in "responseFunction" definieren. Diese Funktion wird mit einem Parameter aufgerufen: und zwar dem Response vom Server. (Hinweis: der "mayscript"-Parameter beim Applet-Tag teilt dem Browser mit, dass das Applet Javascript-Funktionen aufrufen darf). Wenn der Benutzer mehrere Dateien auf einmal hochlädt, so wird jede Datei über einen separaten POST-Request zum Server geladen. Nach jedem Request wird die Javascript-Funktion aufgerufen. Sie können die Beschriftung angeben, die angezeigt werden soll wenn die A8Dropzone inaktiv ist. Der "encoding"-Parameter teilt der A8Dropzone mit wie sie den Response vom Server lesen soll. Mit dem "directoryUpload"-Parameter bestimmen sie, ob ein Benutzer komplette Verzeichnisse (inkl. Unterverzeichnissen!) hochladen kann: Im Falle von "true" sendet die A8Dropzone pro POST-Request zusätzlich die HTTP-Header "A8AbsolutePath" und "A8RelativePath" mit.

Hier nur ein kleines Beispiel für die Implementierung einer "responseFunction":

function updateFiles(html) {
  document.getElementById("someElement").innerHTML = html;
}

Natürlich benötigen Ihre Benutzer das Java plugin im Browser, welches Teil der Java Runtime Environment (JRE) 6 ist und von folgendem Link heruntergeladen werden kann: SUN Java Downloads. Sehr große Bilder können in der Regel aufgrund der Java-Speicherplatzzuweisung durch den Browser nicht im ImageCenter bearbeitet werden. Für den Upload gibt es aber keine Größenbeschränkung.

Auf der Serverseite behandeln Sie den Request genau wie jeden anderen Datei-Upload-Request, den ein Standard-HTML-Formular mit enctype="multipart/form-data" auch generieren würde. Da dieser Upload "im Hintergrund" stattfindet während der Benutzer die aktuelle Seite nicht verlässt, sollten Sie diese Requests am Server auch separat bearbeiten - ähnlich wie Sie einen AJAX-Request am Server bearbeiten würden.

Wenn bei der Einbettung der Parameter "directoryUpload" auf true gestellt ist, können Benutzer komplette Verzeichnis-Strukturen hochladen indem sie ein Verzeichnis über Drag&Drop auf die A8Dropzone fallen lassen. In diesem Fall sendet die A8Dropzone folgende HTTP-Header pro Datei an den Server:

• A8AbsolutePath ... der Absolute Pfad der Datei am Client (zB: "C:\temp\test.pdf")
• A8RelativePath ... der Pfad der Datei relativ zum hochgeladenen Stammverzeichnis.
  zB: der Benutzer lädt das Verzeichnis "C:\temp\files" hoch:
  C:\temp\files\f1.pdf
  C:\temp\files\subdir1\f2.pdf
  A8RelativePath ist dann entsprechend "files\f1.pdf" und "files\subdir1\f2.pdf". Somit kann am Server sehr leicht die hochgelandene Verzeichnisstruktur inkl. der Pfade ausgelesen werden.

Hinweis: Die Pfade beinhalten die systemspezifischen Pfad-Separatoren (\ unter Windows und / unter Linux).

Lädt ein Benutzer eine große Datei (siehe Parameter "chunkSize" unten) hoch, so wird diese in Teilstücke zerlegt und die HTTP-Header A8Chunk und A8Chunks werden in jedem Request mitgesendet. Um die Teile am Server wieder zusammenzufügen kann man z.B. cat chunks* > all auf einem Linux-System verwenden.

Damit das Applet all diese Funktionen im Browser durchführen darf, wird die JAR-Datei mit unserem Code-Signing-Zertifikat signiert.

Parameter

licenseKey

Der Lizenzschlüssel, den Sie von uns nach Bestellung erhalten

postURL

Ziel-URL für Datei-Uploads (üblicherweise Script am Server, das Dateien entgegennimmt und bearbeitet)

responseFunction

Name der JavaScript-Funktion, die von A8Dropzone nach jedem Upload einer Datei aufgerufen wird
1 Parameter = Response-Body vom Server

encoding

Zeichen-Kodierung des HTTP-Responses vom Server (z.B: UTF-8)

parameterName

Der Parameter-Name der Datei für den Server (default = "file" entspricht <input type="file" name="file">)

chunkSize

Große Dateien werden aufgeteilt auf mehrere Requests an den Server gesendet. Dieser Parameter gibt die max. Request-Größe an. (in Bytes, default = "2147483648" .. 2GB)
Bsp: wird bei einer chunkSize von 1073741824 (=1GB) eine Datei mit 2,5GB hochgeladen, so werden 3 Requests zum Server gesendet: 1GB, 1GB, 0.5GB. Am Server können die Teile wieder zu einer großen Datei zusammengefügt werden.
Pro Request sendet die A8Dropzone die zusätzlichen HTTP-Header A8Chunk und A8Chunks mit.

postParam0, postParam1, ...

Parameter die im POST-Request an den Server pro Datei mitgeschickt werden (z.B. Session-ID)

postParamsFunction

Name einer Javascript-Funktion, die vor jedem File-Upload aufgerufen wird. So können dynamische Parameter mitgeschickt werden. Bsp:

function myPostParamsFunction() {
  var a = new Array();
  a[0] = "dynamicParam1=value1";
  a[1] = "dynamicParam2=" + document.getElementById("aHiddenInput").value;
  return a;
}

delayBetweenFiles

Pause zwischen Files (in Millisekunden, default = 0)

label

A8Dropzone-Beschriftung

directoryUpload

true / false ... Verzeichnis-Upload akzeptieren

filenameMustMatch

Java Regular Expression um genau zu definieren welche Dateien hochgeladen werden können
Bsp: ^.*\.(jpg|wav)$ ... akzeptiert nur jpg und wav Dateien

filenameMustMatchError

Fehlermeldung wenn Dateiname nicht zu 'filenameMustMatch' passt

maxFileSize

Dateigrößenbeschränkung (in Bytes)

maxFileSizeError

Fehlermeldung wenn eine Datei die Dateigrößenbeschränkung überschreitet

imageCenter

never, possible (=default), always ... Image Center PLUS verhindern / erlauben / erzwingen (für Bilder)

imageMaxWidth

Maximale Bildbreite des Bild-Uploads aus Image Center (in Pixel)

imageMaxHeight

Maximale Bildhöhe des Bild-Uploads aus Image Center (in Pixel)

imageAspect

Seitenverhältnis erzwingen, Bsp "16:9" oder "1,7777777")

imageDownload0, imageDownload1, ...

optionale URLs für Downloads der ImageMagick-Utilities (convert.exe, DLLs, ...)

transcoder

never, possible (=default), always ... Media Converter PLUS verhindern / erlauben / erzwingen (für Audio/Video-Dateien)

transcoderDownload0, transcoderDownload1, ...

optionale URLs für Downloads der Utilities (ffmpeg.exe, preset-files, MP4Box.exe, ...)

transcoderAudio

true / false ... Audio-Uploads akzeptieren

audioProfile0, audioProfile1, ...

Audio-Profil-Definition im Format
name|ffmpeg-encoder|extension|bitraten|samplingraten|kanäle|ffmpeg params
Bsp: mp3|libmp3lame|.mp3|32k,64k,96k*,128k,192k,256k,320k|22050*,44100,48000|1,2
Bsp: aac|aac|.aac|32k,64k,128k,256k*|22050,44100*|1,2|-strict experimental
(Sternchen = Default-Auswahl)

transcoderVideo

true/false ... Video-Uploads akzeptieren

videoProfile0, videoProfile1, ...

Video-Profil-Definition im Format
name|ffmpeg-encoder|extension|bitraten|frameraten|audioprofil|ffmpeg params|mp4box params
Bsp: h264|libx264|.mp4|256k,512k*,768k,1024k|6,12,25*|aac|-fpre libx264-hq.ffpreset|-inter 1000
(Sternchen = Default-Auswahl)

videoMaxWidth

Maximale Videobreite des Video-Uploads aus Media Converter (in Pixel)

videoMaxHeight

Maximale Videohöhe des Video-Uploads aus Media Center (in Pixel)