Server-Side PHP Example

The component can work in 4 modes, the best mode for corresponding browser detected automatically:

• html5 (multiselect, ajax, progress, IE10, IE11, FF, Opera, Chrome)
• flash (multiselect, progress, any browser with flash player installed)
• html4 (standard HTML 'input' element with type=file, any browser)
• sl (Silverlight engine, multiselect, progress, any browser with silverlight/3rd party mode installed)

Handle config

• while initializing, vault tries to load "maxFileSize" configuration from server
• conf.uploadUrl used as url for request
• mode=conf param is added
• later you can call vault.getMaxFileSize() on the client side
• the response should be: {maxFileSize: value}

if (@$_REQUEST["mode"] == "conf") {
    header("Content-Type: text/json");
    print_r('{maxFileSize: 1234567}');
}

If maxFileSize was not set via config on init stage and server returned valid numeric maxFileSize greater than zero in conf-response, Vault will use maxFileSize returned by conf-response.

Handle html5/flash modes

• conf.uploadUrl is used for html5, conf.swfUrl - for flash
• the param mode is set to html5 or flash (i.e. mode=html5 or mode=flash)
• the response should be: {state: true/false, name: "server_name", extra: "any_data, optional"}
• the state and name params are mandatory, extra - optional
• the name param is the server name which can be different from the name on the client side
• IE10 and IE11 have problem with uploading zero-size files in the html5 mode, to solve it, we use the following trick: once we detect a file with zero size going to be uploaded - url changed a bit, params zero_size=1 and file_name=somename.ext will send to server

if (@$_REQUEST["mode"] == "html5" || @$_REQUEST["mode"] == "flash") {
    if (@$_REQUEST["zero_size"] == "1") {
        // IE10, IE11 zero file fix
        // get file name
        $filename = @$_REQUEST["file_name"];
        // just create empty file
        file_put_contents("path_to_save/".$filename, "");
    } else {
        // get file name
        $filename = $_FILES["file"]["name"];
        // save file
        move_uploaded_file($_FILES["file"]["tmp_name"], "path_to_save/".$filename);
    }
    // response
    header("Content-Type: text/json");
    print_r(json_encode(array(
        "state" => true,    // saved or not saved
        "name"  => $filename,   // server-name
        "extra" => array(   // extra info, optional
                "info"  => "just a way to send some extra data",
                "param" => "some value here"
        )
    )));
}

Handle html4 mode

• conf.uploadUrl is used for the html4 mode
• the param mode is set to html4 (i.e. mode=html4)
• the response should be: {state: true/false, name: "server_name", size: "filesize", extra: "any_data, optional"}
• it's unable to detect file size on the client, so it will be updated after uploading using the size param in response
• if uploading will be cancelled by user - there will be a new request with action=cancel param
• for cancelling, the response should be: {"state":"cancelled"}
• state, name and size are mandatory params, extra - optional
• the name param is the server name which can be different from the name on the client side

if (@$_REQUEST["mode"] == "html4") {
    header("Content-Type: text/html");
    if (@$_REQUEST["action"] == "cancel") {
        // handle cancelling
        print_r('{"state":"cancelled"}');
    } else {
        // handle uploading
        // get file name
        $filename = $_FILES["file"]["name"];
        // save file
        move_uploaded_file($_FILES["file"]["tmp_name"], "path_to_file/".$filename);
        print_r(json_encode(array(
            "state" => true,            // uploaded or not
            "name"  => $filename,           // server-name
            "size"  => $_FILES["file"]["size"], // file size
            "extra" => array(           // extra info, optional
                    "info"  => "just a way to send some extra data",
                    "param" => "some value here"
            )
        )));
    }
}

Handle sl mode

• conf.slUrl is used for the sl mode
• the param mode is set to sl (i.e. mode=sl)
• there are some additional params: fileName, fileSize, fileKey and action
• due to some silverlight limitations, uploading will done in 2 stages: 1 - uploading, 2 - getting the result
  • in 1st request - the server script will get file and save it
  • in 2nd request - the server script will return save-status to the client (for this: action=getUploadStatus)
• to sync requests param fileKey is used, it can be /^[a-z0-9]{12}$/, generated for each file
• the response should be: {state: true/false, name: "server_name", extra: "any_data, optional"}
• state, name and size are mandatory params, extra - optional
• the name param is the server name which can be different from the name on the client side

if (@$_REQUEST["mode"] == "sl" && isset($_REQUEST["fileSize"]) && isset($_REQUEST["fileName"]) 
&& isset($_REQUEST["fileKey"])) {
    // check key
    preg_match("/^[a-z0-9]{12}$/", $_REQUEST["fileKey"], $p);
    if (@$p[0] $_REQUEST["fileKey"]) {
        // generate temp name
        $temp_name = "path_to_file/".md5($p[0]);
        if (@$_REQUEST["action"] != "getUploadStatus") {
            // 1st "upload" request, no needs to output something
            // saving file
            $postData = file_get_contents("php://input");
            if (strlen($postData) == $_REQUEST["fileSize"]) 
                file_put_contents($temp_name, $postData);
        } else {
            // 2nd "check" request, output uploading status
            $state = "false";
            if (file_exists($temp_name)) {
                rename($temp_name, "path_to_file/".$_REQUEST["fileName"]);
                $state = "true";
            }
            header("Content-Type: text/json");
            print_r(json_encode(array(
                "state" => true,            // uploaded or not
                "name"  => $_REQUEST["fileName"],   // server-name
                "extra" => array(           // extra info, optional
                        "info"  => "just a way to send some extra data",
                        "param" => "some value here"
                )
            )));
        }
    }
}

Handle custom files

• conf.uploadUrl is used for uploading url
• the param mode is set to 'custom' (i.e. mode=custom)
• the response should be: {state: true/false, name: "server_name", size: 1234, extra: "any_data, optional"}
• the state and name params are mandatory, size and extra - are optional
• if the size is defined on the client and a new size comes with the server reponse, the size on the client will be updated
• the name param is the server name which can be different from the name on the client side

if (@$_REQUEST["mode"] == "custom") {
    echo "{state: true, ".
            "name: 'server_".str_replace("'", "\\'", $_REQUEST["name"])."', ".
            "extra: {param: 'value'}}";
}

Handle files downloading

In order to download files from Vault you need to specify the path to the server.

You can do it in two ways:

1) set url to the server during the Vault initialization:

var myVault = new dhtmlXVaultObject({
    downloadUrl: "../server/download.php?fileName={serverName}"
});

2) use the setDownloadURL method:

myVault.setDownloadURL("../server/download.php?fileName={serverName}");

{serverName} will be replaced with serverName attr, returned by server when file uploaded.

3) and finally some tricks on server side (script download.php):

<?php
    // make sure file name set
    if (isset($_REQUEST["fileName"])) {
        // here you also can make some extra checks, like this
        $fname = basename(urldecode($_REQUEST["fileName"]));
        // get file contents
        $data = file_get_contents("path/to/file/".$fname);
        // send donwload headers, force browser to show download dialog
        header("Content-Type: application/octet-stream");
        header("Content-Disposition: attachment; filename=\"".$fname."\"");
        header("Content-Length: ".strlen($data));
        // output file
        print_r($data);
    }
?>

Back to top