File uploads (TheUpload)

Contents

  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
  4. Public methods

Edit options

apijs.config
apijs.config.dialog
apijs.config.upload

Presentation

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" {
#     server.stream-response-body = 2
# }
# stop output buffering in the script (http://stackoverflow.com/a/25835968)
# the echo move the progress bar to 100%
if (!empty($_GET['isAjax']) && empty($_GET['noAjax'])) {
    header('Content-Encoding: chunked', true);
    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);
    ob_implicit_flush(true);
    for ($i = 0; $i < ob_get_level(); $i++)
        ob_end_clean();
    echo ' ';
}

try {
    $file = tempnam(sys_get_temp_dir(), '');                    # = /tmp/anDY8jnU
    move_uploaded_file($_FILES['myInputImage']['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)
else
    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

Public methods

apijs.i18n.translate('word');
apijs.i18n.nodeTranslate('word');
apijs.i18n.changeLang('fr');

apijs.upload.sendFile(...);

apijs.dialog.dialogInformation(...);
apijs.dialog.dialogConfirmation(...);
apijs.dialog.dialogFormOptions(...);
apijs.dialog.dialogFormUpload(...);
apijs.dialog.dialogProgress(...);
apijs.dialog.dialogWaiting(...);
apijs.dialog.dialogPhoto(...);
apijs.dialog.dialogVideo(...);
apijs.dialog.actionClose();
apijs.dialog.styles.remove('string');