Working with Pydio (formally Ajaxplorer) in PHP - Part 2

If you've been in the market for open source cloud file sharing software, similar to Dropbox and Box, you may have come across Pydio(formally Ajaxplorer). It's an easy to install and use piece of software.

We continue to develop an already started example. In this post we will be looking at uploading files with the Pydio Server-Side API. I will be doing a drag-and-drop upload using Dropzone JS. To get review the first part of this tutorial, check out Working with Pydio (formally Ajaxplorer) in PHP - Part 1.

First let's add the PHP upload function to the Pydio class we've already created. The file upload is using a PHP form post.

public function upload($files, $dir){

        // Read uploaded file data..
        $fileName = $files['name'];
        $tmpFileName = $files['tmp_name'];
        $fileHandle = fopen($tmpFileName, "r");
        $fileData = fread($fileHandle, filesize($tmpFileName));

        $urlDir = $this->prepareURL($dir);

        $curl = curl_init(trim(self::BASEURL . self::UPLOAD . $this->folder . $urlDir ));

        $curlPostData = array(
            "force_post" => urlencode("true"),
            "urlencoded_filename" => urlencode($fileName),
            "xhr_uploader" => urlencode("true"),
            'userfile_0"; filename="fake-name"' => $fileData
        );

        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($curl, CURLOPT_HTTPHEADER, array("Content-Type: multipart/form-data", "Ajxp-Force-Login: true"));
        curl_setopt($curl, CURLOPT_USERPWD,   self::UPWD );
        curl_setopt($curl, CURLOPT_POST, true);
        curl_setopt($curl, CURLOPT_POSTFIELDS, $curlPostData);
        $response = curl_exec($curl);

        curl_close($curl);

        return $response;
    }

Remember all the constants and prepareURL() referenced above were already created in the previous post. There are some minor changes to keep in mind if you have generalized your class to be able to dynamically set the workspace and folder.

The following code should be added to the $(document).ready() section of the JS.

JavaScript:

//force Dropzone to be initialized with JS
Dropzone.autoDiscover = false; 

var zone = new Dropzone("#file-upload",{ 
       url: "/data/FileHandler.php?method=uploadFile",
       method:"post",
       clickable: "#file-upload",
       addRemoveLinks: true
});

zone.on("complete", function(file){
    listReload();
});

The function below is used to reload the displayed list after the successful file upload.

  function listReload(){
    var client = 'Test'; //repository name
    var p = $("#path").attr("data-path").replace('/' + client , '');
    if(p.substr(0,1) == '/')
        p = p.substr(1, p.length);

    getFileList(p);
}

Dropzone JS is fairly easy to use. Though again, I found the instructions and examples to be a little confusing like with Pydio. My major issue was adding the HTML to the page and then activating it from the JavaScript.
NB: I am turning off autoDiscover to fix the issue mentioned before.

The following should be added to the FileHandler.php file. Be sure to make the changes applicable to dynamic workspaces.

PHP:

function uploadFile($dir, $folder){
    $pydio = new Pydio($folder);
    $dir = str_replace("/".$folder, "", $dir);

    if(substr($dir, 0,1) == "/")
        $dir = substr($dir, 0,strlen($dir));

    return json_encode($pydio->upload($_FILES['file'], $dir));
}

Below is the HTML snippet that alters what we have already created.

HTML:

<div class="row">
    <div class="col-md-8 col-sm-12">
        <div id="path"></div>
        <div id="scrollWrapper">
            <div class="list-group"></div>
        </div>
    </div>
    <div class="col-md-4 col-sm-12">
        <div>
            <strong>Drop files into the current folder here.</strong>
            <br/><br/>
        </div>
        <div id="dropzone">
            <form id="file-upload" 
                  name="file-upload" 
                  class="dropzone dz-clickable" 
                  action= "data/FileHandler.php?method=uploadFile">
                  <div class="dz-default dz-message">
                      <span>Drop files here to upload</span>
                  </div>
                  <input type="hidden" name="path" id="path2" />
                  <input type="hidden" name="folder" value="Test"/>
           </form>
       </div>
    </div>
</div>


Related Post:
Working with Pydio (formally Ajaxplorer) in PHP - Part 1

Vanessa Coote

I'm a programmer and former lecturer with years experience working with PHP, ColdFusion, Java, Visual Basic, JavaScript, HTML, and CSS.