Solmetra Flash Uploader
Solmetra Flash Uploader
com/uploader
Why r
eplace <i nput
t ype=“fi
le”>? It'
s awkwar dly
uncust omi sabl
e (
try
changing st
yl e on t
hat “Browse”
button) and it's very inconvenient. You don't see what's going on when uploading files, there is no way
to display upload progress, and you get upload error only when your form is completely submited to
the server
and all
the f
il
es ar
e uploaded.
That '
s a
no good scenario… at
least
in our books.
That's where Flash Uploader comes in. It displays neat progress indicator, it does many file verification
routines (filetype, max size) on client-side and it's customisable beyond recognition, both visually and
functionally.
Requirements
Adobe Flash Player 8.0 or later
PHP 4.3.x or later (only needed if used with a PHP backend)
Usage
Installation
1. Extract the contents of Flash Uploader's package to some directory on your web server
I.e.: uploader
uploader/tmp
uploader/uploads
This can be done using chmod command on *nix OS'es or through most FTP clients.
Principles
Flash Uploader works by replacing <i nput t
ype=“ fil
e”> tag. The bi
ggest di
ffer ence
is that files are
being uploaded to server not with the form but separately - before form submits.
However Flash Uploader is not limited to form hijacking. You can disable it and manage all uploading
yourself using Flash Uploader's JavaScript interface. Or you can have no HTML forms at all. Your call.
Read on to find out how.
1 of 15 8/22/2010 4:44 PM
uploader [Solmetra Documentation] http://wiki.solmetra.com/uploader
it's contents.
maxsize
Maximum allowed file size in bytes. Flash Uploader will display an error and prevent uploading from
starting if the selected file is bigger than this.
filetypes
Add present
fil
e t
ypes
you
want
to
be
used
when
sel
ect
ing
fil
es
to
upl
oad
in
your
“Fi
les
of
type”
dropdown:
<filetypes>
<type>
<description>All files</description>
<extension>*.*</extension>
<mactype>*</mactype>
</type>
<type>
<description>Video Files</description>
<extension>*.avi;*.mpg;*.mov;*.wmv</extension>
<mactype>FLV</mactype>
</type>
<type>
<description>Image files</description>
<extension>*.jpg;*.gif;*.png</extension>
<mactype>JPEG;jp2_;GIFF</mactype>
</type>
</filetypes>
prompts
Language prompts and their translations. You should provide a translation for each language you are
planning to use. If specific prompt for the selected language is missing Flash Uploader will fall back
and display english text instead.
<prompts>
<select_file>
<en>Select a File</en>
<fr>Sélectionner des fichiers</fr>
<de>Wählen Sie eine Datei</de>
</select_file>
...
</prompts>
window
2 of 15 8/22/2010 4:44 PM
uploader [Solmetra Documentation] http://wiki.solmetra.com/uploader
This set of settings controls the way control background rectangle looks like. You can control
background color (including gradient), border colors and width, corner radius as well as padding. Your
can also assign transparency and background image/flash movie for background. Here are several
examples:
bgcol
or:
#CCCCCC;
bor
der
widt
h:
0 (
no
bor
der
);
bor
der
radi
us:
10
bgcol
or:
#CCCCCC;
bor
der
widt
h:
2;
bor
der
col
or:
#777777;
bor
der
radi
us:
5
bgcol
or:
#CCCCCC,
#999999
(gr
adi
ent
);
bor
der
widt
h:
2;
bor
der
col
or:
#777777;
bor
der
radius: 10
layout
Thi
s can
be
eit
her
“hor
izont
al”
(def
aul
t)
or
“ver
tical
”.
horizontal
3 of 15 8/22/2010 4:44 PM
uploader [Solmetra Documentation] http://wiki.solmetra.com/uploader
vertical
NOTE: if Upload/Cancel buttons are turned off (explained further) this setting has no effect
whatsoever.
upload / cancel
These settings control if and how Upload and Cancel buttons are displayed.
Leave width and height settings blank for Flash Uploader to decide on the size automatically.
NOTE: It makes sense to disable Upload button if you are hijacking an HTML form. Clicking Upload
button in Flash Uploader will not trigger form submit event.
progress
This group of settings defines visual appearance of the file selector / progress bar control in Flash
Uploader. Read further for explanation.
progress.width / progress.height
Width and height respectively of the file selector / progress bar control. If left blank Flash Uploader
will calculate it automatically to take all remaining horizontal and/or vertical area.
progress.select
This settings group defines how file selection control looks and behaves like. The settings and their
behaviour is identical to window settings except for a button.
pr
ogr
ess.
sel
ect
.but
ton
= yes
(but
ton
is
shown;
onl
y but
ton
is
cli
ckabl
e;
text
i
s al
i
gned to the left)
4 of 15 8/22/2010 4:44 PM
uploader [Solmetra Documentation] http://wiki.solmetra.com/uploader
pr
ogr
ess.
sel
ect
.but
ton
= no
(but
ton
is
hidden;
the
whol
e sel
ect
or
area
is
cli
ckabl
e;text is centered)
NOTE: the select button autosizes to select control's height so it is probably a bad idea to enable
configurations with high progress.height setting.
progress.background
This group defines progress bar background. Progress bar is shown whne actual uploading is
happening. It also remains there when upload finishes. Please refer to window settings descriptions for
typical settings like color and borders.
progress.background.image / progress.background.stretch
In addition to typical settings you can have an image or even anothe Flash movie (SWF) as a
background for progress bar. Just set it progress.background.image to point to image/movie url.
Flash Uploader will load an image/movie and center it without resizing. If you want it to be stretched
to the dimensions of progress bar, set progress.background.stretch to yes.
In the next example we will use a supplied background image (lib/background_1.gif) without
stretching.
progress.background.image = lib/bg1.gif
NOTE: stretching a Flash movie migh not always work as expected since often SWF's have objects
outside their viewable areas, or their change dimensions due to animations meanwhile stretching is
5 of 15 8/22/2010 4:44 PM
uploader [Solmetra Documentation] http://wiki.solmetra.com/uploader
progress.background.alpha
progress.bar
This group defines progress bar foreground. The idea is that foreground gradually shifts over
background as upload progresses. Most of the settings are identical to backgrounds with an exception
of alpha and fill direction.
progress.bar.image / progress.bar.stretch
A link to and external image or Flash movie (SWF) to use as a filler for the bar instead of the solid
color.
progress.bar.alpha
Identifies opacity of the foreground. You can have black foreground and 50% opacity (default) and it
will produce progress effect by darkening background. Or you can have another image “ taki
ng over ”
background. This might lead to a very entertaining upload process (think empty beer glass slowly
filling up with the finest a Lager).
progress.bar.direction
Controls how your progress will fill up. I.e. right will mean that progress bar will start filling up from
left and continue to the right. Possible values are: right, left, up, down.
In addition to typical settings you can have an image or even anothe Flash movie (SWF) as a
background for progress bar. Just set it progress.background.image to point to image/movie url.
pr
ogr
ess.
bar
.di
rect
ion
= up;
pr
ogr
ess.
bar
.di
rect
ion
= down;
6 of 15 8/22/2010 4:44 PM
uploader [Solmetra Documentation] http://wiki.solmetra.com/uploader
pr
ogr
ess.
bar
.di
rect
ion
= l
eft
;
pr
ogr
ess.
bar
.di
rect
ion
= r
ight
;
progress.textformat / progress.errorformat
7 of 15 8/22/2010 4:44 PM
uploader [Solmetra Documentation] http://wiki.solmetra.com/uploader
button
button.defaults
This section defines default settings that are applicable to all button's states (normal, hover, etc).
Each state can override the default settings as we will see later on.
button.defaults.width / button.defaults.height
Dimensions of the button in pixels. Please note that if the text does not fit into button it will grow
automatically possibly affecting selector / progress bar size.
button.defaults.borderradius
Radius in pixels for rounded corners. Set to 0 (zero) for perfectly square corners.
borderradius = 0 borderradius = 5
borderradius = 10 borderradius = 20
button.defaults.bgcolor
This is a background color for your button. As in all backgrounds in Flash Uploader you can supplied a
list of comma-separated color values to produce a neat radient effect.
button.defaults.crystal
Set
to
“yes”
for
a
“cr
yst
al”
ef
fec
t t
hat
makes
but
tons
look
round
and
shi
ny.
Here are a few examples of color schemes without crystal and width:
8 of 15 8/22/2010 4:44 PM
uploader [Solmetra Documentation] http://wiki.solmetra.com/uploader
baseurl
This is important. It's a base URL for Flash Uploader. This can be a relative or absolute URL to a
directory where uploader.swf is located.
It will subsequently be passed on to a Flash Uploader and be used as a base URL for loading of
external files, such as config.xml, data files and supplemental layout images/SWFs.
This setting however can (and should) be overridden when creating Uploader's PHP class explained
later in this documentation.
width / height
required
If set to true all Flash Uploader instances will be mandatory - the submission of the form will be
canceled if no file is selected to upload. This applies only if hijackForm = true.
hijackForm
If
true Upl oader wi
ll
t r
y t
o “
hij
ack”
enc
los
ing
for
m t
o c
atc
h s
ubmi
t event
and
del
ay it until file was
successfully uploaded.
This feature will not overwrite any existing onSubmit events and even fire browser's submit event.
secureUploads
9 of 15 8/22/2010 4:44 PM
uploader [Solmetra Documentation] http://wiki.solmetra.com/uploader
If set to true Flash Uploader will create tokens for each instance of Flash Uploader bound to user's IP
address. When handling uploaded file, Flash Uploader will check if it came from a proper instance and
corresponding IP address. If it's not it will be rejected.
This is particularly useful for closed-user areas. Your PHP script would generate instances of Flash
Uploader only for authenticated users thus preventing outsiders of uploading any files.
verifyUpload
If true Uploader will wait for confirmation from the receving upload script, i.e. indication whether the
upload was successful.
If you choose to handle uploads yourselves these are the info that needs to be to be returned to flash
by the receiving script:
Examples:
OK:filname.pdf
ERROR:UPLOAD_ERR_INI_SIZE
Error code Meaning
UPLOAD_ERR_INI_SIZE File exceeds size limit set on the server
UPLOAD_ERR_FORM_SIZE The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form
UPLOAD_ERR_PARTIAL The uploaded file was only partially uploaded
UPLOAD_ERR_NO_FILE No file was uploaded
UPLOAD_ERR_NO_TMP_DIR Missing a temporary folder
UPLOAD_ERR_CANT_WRITE Failed to write file to disk
UPLOAD_ERR_EXTENSION File upload stopped by extension
UPLOAD_ERR_UNAUTHORIZED Unauthorized upload
UPLOAD_ERR_MOVE An error occured while trying to move uploaded file
Flash Uploader will display a corresponding error message that is defined for each error code for the
selected language in config XML.
useOriginalName
Normally for security reasons Uploader stores files on server with a temporary names assuming that
your script that does post-processing renames/moves them (all the original data is available by calling
getUploadedFiles() method).
However if you set this setting to true, Uploader will store files on your server using their original file
names. Depending on what extensions you al
low to upload and if
upload directory i
s “visibl
e” through
http requests might possess a severe security risk since malicious user might upload a .php file
overwriteExisting
Aplicable only if useoriginalname is set to true. If false Uploader will rename the filename in order not
to overwrite an existing file
configUrl
A relative or absolute URL to Uploader frontend config file. Please note that this will be relative to
uploader.swf, not the PHP script that displays it.
embedConfig
10 of 15 8/22/2010 4:44 PM
uploader [Solmetra Documentation] http://wiki.solmetra.com/uploader
If true config XML file will be preloaded on server and served to Uploader through HTML object's
params preventing Uploader making separate request to web server
language
bgcolor
useFileTag
fileTagParams
An
arr
ay
of
proper
ty/
val
ue
pai
rs
to
add
to
<input
type=“
fil
e”>
tag.
I.
e.:
ar
ray(
' ass' ⇒ 'myInput')
cl
allowedExtensions
An array of allowed file extensions. If this is not empty, the files with ONLY listed extensions will be
allowed to be uploaded. This list however can be even narrowed down by the disallowEdextensions
setting explained below.
disallowEdextensions
An array of disallowed file extensions. If this is not empty, the files with listed extensions will be
prevented from the upload even if they're listed in allowedExtensions setting.
stripMultipleExtensions
I
f t
rue only l
ast
ext
ens
ion
wil
l be
lef
t f
or
the
fil
e upl
oaded;
i.e.
“mal
ici
ous
.php.
gif
” wi
ll become
“
malic
ious.
gif
”.
It is strongly recommended leaving it set to true since Apache webserver passes files to all of the
handl er s
for each of
the
extension. Ther efore
it is easy to disguise a fi
le l
ike “
malicious.
php.gi
f”
as
an
image and still have Apache process it as a PHP file if it is accessible through HTTP request.
uploadDir
A directory to put uploaded files into. It is strongly recommended setting this to a directory that is
NOT accesible through http requests.
tmpDir
fileTTL
Number of minutes to keep unclaimed files in uploadDir and tmpDir. gcProbability Percent value of the
probability a garbage collector is executed when instantiating Uploader: 0 - never, 100 - every time.
Set this to higher number on rarely used pages.
11 of 15 8/22/2010 4:44 PM
uploader [Solmetra Documentation] http://wiki.solmetra.com/uploader
<?php
// include SolmetraUploader class
include 'SolmetraUploader.php';
getInstance will return all of the necessary HTML/JavaScript code needed to place Uploader instance
on the page.
None of the getInstance parameters are required but one - field name. The rest of the parameters are
replaced by defaults from the config file.
<!-- This should be included since it defines an SWFObject class needed for proper placing of Flash elements -->
<script type="text/javascript" src="SolmetraUploader.js"></script>
<!-- Hidden form fields are used by Uploader JavaScript to control its behaviour -->
<input type="hidden" name="solmetraUploaderInstance" value="[instance_id]" />
<input type="hidden" id="solmetraUploaderData_[instance_id]" name="solmetraUploaderData[[instance_id]]" value
<input type="hidden" id="solmetraUploaderHijack_[instance_id]" value="y" /> <!-- set value to "y" if you want to
<input type="hidden" id="solmetraUploaderRequired_[instance_id]" value="y" /> <!-- set value to "y" to prevent f
<!-- Here we create main object and set config parameters -->
<script type="text/javascript">
<!--
var so = new SWFObject("uploader.swf", "solmetraUploaderMovie_[instance_id]", "500", "50", "8", "#ffffff");
so.useExpressInstall("expressinstall.swf");
so.addParam("allowScriptAccess", "always");
so.addParam("allowFullScreen", "false");
so.addVariable("language", "en"); // [optional] language to use for textual prompts
so.addVariable("baseurl", "./"); // [optional] will be applied to all eternal calls exce
so.addVariable("uploadurl", "upload.php"); // [optional] an url to post files to; relative to uplo
so.addVariable("config", "uploader.xml"); // [optional] path to front-end configuration file
so.addVariable("instance", "[instance_id]"); // instance id should be unique
so.addVariable("allowed", "");
so.addVariable("disallowed", "php,php3,php4,php5");
so.addVariable("verifyupload", "true");
so.addVariable("configXml", "");
so.addVariable("maxsize", "2097152");
so.addVariable("hijackForm", "yes");
so.addVariable("externalErrorHandler", "SolmetraUploader.broadcastError");
so.addVariable("externalEventHandler", "SolmetraUploader.broadcastEvent");
so.write("solmetraUploaderPlaceholder_[instance_id]");
solmetraUploaderMovie_[instance_id] = document.getElementById('solmetraUploaderMovie_[instance_id]');
//-->
</script>
12 of 15 8/22/2010 4:44 PM
uploader [Solmetra Documentation] http://wiki.solmetra.com/uploader
Just replace [instance_id] with any string without spaces. If you have several instances of Uploader on
page, make sure their [instance_id] is different.
Form "hijacking"
It i
s recommended to
set Upl oader
to “
hi jac
k” an
HTML form it is enclosed with. That way it will catch
form submit events. It will also prevent form submission if it is set to required and a file has not been
selected for upload.
For
m “
hij
acki
ng”
wi
ll
not
over
wri
te
any
onSubmi
t event
s you
might
have.
Using PHP
An upload i
s handl ed by the script you
specify i
n your config f
ile.
(“upload.php” bydefault) You can
use the supplied upload.php file or make your own that includes following two lines of code:
include 'SolmetraUploader.php';
$solmetraUploader = new SolmetraUploader();
$solmetraUploader->handleFlashUpload();
It will automatically handle file upload for you and broadcast result codes back to Uploaders Flash
instance which in turn will populate form hidden fields that are needed for the script handling form
submission to know what files were uploaded.
Please note that this is a different script from the one you submit your form to. To easily know what
files were uploaded by Uploader use gatherUploadedFiles() method of the SolmetraUploader class:
include 'SolmetraUploader.php';
$solmetraUploader = new SolmetraUploader();
$solmetraUploader->gatherUploadedFiles();
Doing so will populate PHP's own $_FILE preset variable with the file data just like if they came from
the form upload itself. The only difference is that you won't be able to use PHP's
move_uploaded_files() function.
Without PHP
If you want to use Uploader with other language than PHP you will have to handle uploads by
yourself. For that you will have to build a script that handles file uploads from Flash object as well as
update your script that receives form submission to gather information about files uploaded through
Uploader.
Uploader Flash object contacts upload handling script by making a multibyte POST request. It uses
form field SolmetraUploader to pass file information. It also passes its instance ID using POST variable
instance.
Your script than handles upload from Flash should respond to flash with either an acknowledgement
followed by semicolon and uploaded file name or and error code. Examples of responses:
OK:sample_file.avi
OK:renamedfile
ERROR:UPLOAD_ERR_INI_SIZE
ERROR:UPLOAD_ERR_MOVE
13 of 15 8/22/2010 4:44 PM
uploader [Solmetra Documentation] http://wiki.solmetra.com/uploader
Possible error codes are explained in the section about backend configuration.
Uploader passes info about uploaded files to the form submission receiving script as an array. Each
element in the array represents one uploaded file as a string in the form:
form_field_name|temporary_file_name|real_file_name
form_field_name This is a form field name that represents this instance of Uploader
temporary_file_name Temporary name of the uploaded file. Returned by script that handles actual file upload from Flash.
real_file_name Real file name
It is up to your script to parse this string and move uploaded file accordingly.
<script type="text/javascript">
SolmetraUploader.flashTriggerUpload([instance_id]);
</script>
You can also register your own function to receive events from Uploader.
<script type="text/javascript">
SolmetraUploader.setEventHandler('myEvent');
function myEvent (instance_id, event_id, data) {
alert('EVENT: ' + event_id);
}
</script>
14 of 15 8/22/2010 4:44 PM
uploader [Solmetra Documentation] http://wiki.solmetra.com/uploader
Now everytime an noteworthy event occurs in Uploader a function myEvent will be called. The
function should take three parameters: instance_id, event_id and data.
ready Innitiated when Uploader Flash is loaded and ready for operation
selected A file was just selected
uploading Innitiated when there is a progress in upload. Can be innitiated numerous times during upload.
complete Upload is complete
canceled Upload was canceled by user
The last parameter data contains an object with the following properties:
The error handler function should accept two parameters: instance id and error description string:
<script type="text/javascript">
SolmetraUploader.setErrorHandler('myError');
function myError (instance_id, error_id) {
alert('ERROR: ' + error_id);
}
</script>
15 of 15 8/22/2010 4:44 PM