How it works

A8Dropzone generates POST requests just like the old-fashioned HTML upload input - so you can implement the server side as usual. But using the A8Dropzone you can do more - creating a whole new user experience with an absolutly new and extremely easy way of uploading files: you can alter the page contents dynamically. For a simple demonstration of the new possibilities please watch the demo video above.
By the way: If the user has an image in the system clipboard and simply left-clicks the A8Dropzone, the A8Dropzone converts that image to a PNG file and uploads it immediately to the server - an ideal solution for screenshots!

Easy integration

Simply place the a8dropzone.jar file on your webserver and integrate the applet into your HTML code like this:

<applet mayscript code="at.activ8.a8dropzone.A8Dropzone" codebase="http://your.domain.com/a8dropzone" archive="a8dropzone-2.6.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>

Explanation: The A8Dropzone generates POST requests to the URL you specify in "postURL". You can add other request parameters (e.g. a session id) that will be sent to the server in each request: "postParamX" (X=0..n). The javascript function you wish to have called after a successful file upload you specify in "responseFunction". This function will be called with a single parameter: the response coming from the server. Note: the "mayscript" parameter tells the browser that the applet should be allowed to call javascript functions. If the user now uploads several files with one "drag & drop"-operation, each file will be posted to the server individually. After each request the javascript function will be called. You can define the "label" of the A8Dropzone and specify the "encoding" of the server's response. Using the "directoryUpload" parameter you define if your users can upload entire directory-trees: If set to "true" the A8Dropzone will send the custom HTTP-Headers "A8AbsolutePath" and "A8RelativePath" in each POST request.

This is a simple example of how to implement a "responseFunction":

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

Naturally the users need the Java plugin installed on their browsers, which is part of the Java Runtime Environment (JRE) 6 and can be downloaded here: SUN Java Downloads. Very large images might not be editable within the ImageCenter due to the amount of memory assigned to the Java applet by the browser. However there is no maximum file size for uploads.

On the server side you handle the requests from the A8Dropzone just like any other file upload request coming from a HTML form with enctype="multipart/form-data". Since the A8Dropzone uploads the files "in the background" while the user doesn't leave the current page, you should process the upload-requests seperately - similar to processing AJAX-requests on the server.

If you set the parameter "directoryUpload" to true, users can upload entire directory-trees by dropping a directory onto the A8Dropzone. In this case the A8Dropzone sends the following HTTP headers to the server:

• A8AbsolutePath ... the absolute path of the original file of the client (e.g: "C:\temp\test.pdf")
• A8RelativePath ... the path of the client's file relative to the uploaded root directory
  e.g: the user uploads the directory "C:\temp\files":
  C:\temp\files\f1.pdf
  C:\temp\files\subdir1\f2.pdf
  A8RelativePath will be "files\f1.pdf" and "files\subdir1\f2.pdf" accordingly. This makes reading the original directory structure extremly easy on the server side.

Note: The paths contain the clients system specific path separator character (\ under windows and / under linux).

If a user uploads a huge file (see parameter "chunkSize" below) the file is split into pieces and the HTTP headers A8Chunk and A8Chunks are sent along in each request. To put the pieces back together on the server after receiving the last chunk you could do a cat chunks* > all on a linux system.

In order for the applet to be allowed to perform all these operations the JAR-file is signed using our code signing certificate.

Parameters

licenseKey

The license key you will receive after ordering

postURL

Target URL for file uploads (usually a script on your server that receives and handels files)

responseFunction

Name of the JavaScript function, the A8Dropzone calls after each file upload
1 parameter = response-body from server

encoding

Character encoding of the HTTP-Response (e.g. UTF-8)

parameterName

Name of the parameter of the file for the server (default = "file" corresponds to <input type="file" name="file">)

chunkSize

Large files are sent to the server in several requests. This parameter defines the max request size. (in Bytes, default = "2147483648" .. 2GB)
e.g.: setting a chunkSize of 1073741824 (=1GB) and uploading a 2.5GB big file will result in 3 requests to the server: 1GB, 1GB, 0.5GB. On the server the parts can then be joined together to the original big file.
A8Dropzone sends the additional HTTP headers A8Chunk and A8Chunks in each request.

postParam0, postParam1, ...

Parameters sent in each POST-request to the server (e.g. Session-ID)

postParamsFunction

Name of a Javascript function called before each file upload to generate dynamic post parameters. E.g:

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

delayBetweenFiles

Delay between file uploads (in milliseconds, default = 0)

label

A8Dropzone label

directoryUpload

true / false ... recursive directory uploads possible?

filenameMustMatch

Java Regular Expression defining which files can be uploaded
e.g. ^.*\.(jpg|wav)$ ... accepts only jpg and wav files

filenameMustMatchError

Error message shown if filename does not match 'filenameMustMatch'

maxFileSize

File size limit (in Bytes)

maxFileSizeError

Error message shown if file is larger than 'maxFileSize' bytes

imageCenter

never, possible (=default), always ... prohibit / allow / force Image Center PLUS (for images)

imageMaxWidth

Maximum image width of images uploaded from Image Center (in Pixels)

imageMaxHeight

Maximum image height of images uploaded from Image Center (in Pixels)

imageAspect

Force aspect ratio, e.g. "16:9" or "1,7777777")

imageDownload0, imageDownload1, ...

optional URLs to download ImageMagick utilities (convert.exe, DLLs, ...)

transcoder

never, possible (=default), always ... prohibit / allow / force Media Converter PLUS (for audio/video-files)

transcoderDownload0, transcoderDownload1, ...

optional URLs to download utilities (ffmpeg.exe, preset-files, MP4Box.exe, ...)

transcoderAudio

true / false ... accept audio uploads

audioProfile0, audioProfile1, ...

Audio profile definition in the form
name|ffmpeg-encoder|extension|bitrates|samplingrates|channels|ffmpeg params
e.g. mp3|libmp3lame|.mp3|32k,64k,96k*,128k,192k,256k,320k|22050*,44100,48000|1,2
e.g. aac|aac|.aac|32k,64k,128k,256k*|22050,44100*|1,2|-strict experimental
(trailing * = default selection)

transcoderVideo

true/false ... accept video uploads

videoProfile0, videoProfile1, ...

Video profile definition in the form
name|ffmpeg-encoder|extension|bitrates|framerates|audioprofile|ffmpeg params|mp4box params
e.g. h264|libx264|.mp4|256k,512k*,768k,1024k|6,12,25*|aac|-fpre libx264-hq.ffpreset|-inter 1000
(trailing * = default selection)

videoMaxWidth

Maximum video width of videos uploaded from Media Converter (in Pixels)

videoMaxHeight

Maximum video height of videos uploaded from Media Converter (in Pixels)