File uploads (TheUpload)


  1. Presentation
    1. Syntax and debug
    2. Example 1 (normal)
    3. Example 2 (processing error)
    4. Example 3 (error 404)
  2. File processing
  3. Additional information

Edit options



Management of the file uploads in asynchronous mode (AJAX).

Please note that even if the file extension and size are checked before the form upload, it is important that the receiving script check again the data.

Syntax and debug

Example 1 in a normal operation

Example 2 with a processing error

Example 3 with a 404 error

File processing

Here is a minimal implementation of the file which processes the file before recording it on the server.

That one should take over the 3 following parameters: $_FILES['myInputImage'], $_GET['noAjax'] and $_GET['isAjax'].
- Two replies are possible: a redirection to another page (1) or a text message (2).
- Two messages are possible: success-fileid or an error message.

// stop output buffering with apache
// <Location ~ "this_file">
//     php_flag zlib.output_compression off
// </Location>
// stop output buffering with lighttpd
// $HTTP["url"] =~ "this_file" {
// = 2
// }
// stop output buffering in the script (
// the echo move the progress bar to 100%
if (!empty($_GET['isAjax']) && empty($_GET['noAjax'])) {
	header('Content-Encoding: chunked');
	header('Content-Type: text/plain; charset=utf-8');
	header('Cache-Control: no-cache, must-revalidate');
	ini_set('output_buffering', false);
	ini_set('implicit_flush', true);
	for ($i = 0; $i < ob_get_level(); $i++)
	echo ' ';

// action
try {
	$file = tempnam(sys_get_temp_dir(), ''); // = /tmp/anDY8jnU
	move_uploaded_file($_FILES['myInputImage']['tmp_name'], $file);
	$result = 'success-'.basename($file);    // = success-anDY8jnU
catch (Exception $e) {
	$result = $e->getMessage();

if (empty($_GET['isAjax']) || !empty($_GET['noAjax']))
	header('Location: xyz.php?image='.rawurlencode($result).'&noAjax=true'); // (1)
	echo $result; // (2)

When the AJAX processing works well, the script returns success-fileid.
The fileid is transmitted to the callback function as follow: callback(fileid, args).

Additional information

The inputname parameter correspond to the file field name of the form.
The maxsize parameter correspond to the max size allowed in megabyte.
The extensions parameter correspond to the extensions allowed (* for all ; jpg,png for jpg/png ; jpg for jpg).

For the icon parameter, the following CSS classes:
- can be used or modified: debug print error warning
- can not be used or modified: start ready end slideshow loading
- can not be modified but can be used: notransition lock
- can not be used but can be modified: information confirmation options upload download progress waiting photo video

According to the window size, the design of the dialog boxes automatically adapts (media queries). According to the modifications that you can have to make, the following CSS code can be useful:

@media screen and (max-width:30rem),(max-device-width:30rem) { ... }
// 30rem = #apijsBox.width [26rem] + 4