How to process with RubaXa File API uploaded file blobs in php? - php

Question

I found this useful tool called RubaXa / jquery.fileapi
which slices a file and create blobs. But within the documentation there is a lack of information about how to process the uploaded parts on the server. The example on the page refers to a url: './ctrl.php' but you can't see the content of it on the developers page. I used this (look below) client side script so far and there were no errors. A file was sliced and several post requests appeared in my firebug console. So it seems to work. But how to process the received fileparts in PHP on the server?
imported scripts:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
window.FileAPI = {
debug: false // debug mode
, staticPath: 'jquery.fileapi-master/FileAPI/' // path to *.swf
};
</script>
<script src="jquery.fileapi-master/FileAPI/FileAPI.min.js"></script>
<script src="jquery.fileapi-master/jquery.fileapi.min.js"></script>
the initiation and setup of the fileuploader:
jQuery(function ($){
$('#uploader').fileapi({
url: 'stash.php',
autoUpload: true,
accept: 'video/*',
multiple: false, //only single file upload
chunkSize: .5 * FileAPI.MB //filesize of the blobs/chunks
});
});
the HTML file upload "form":
<div id="uploader">
<div class="js-fileapi-wrapper">
<input type="file" name="files[]" />
</div>
<div data-fileapi="active.show" class="progress">
<div data-fileapi="progress" class="progress__bar"></div>
</div>
</div>

Answer 1

Hope this code will help you
<?php
/**
* FileAPI upload controller (example)
*/
include './FileAPI.class.php';
if( !empty($_SERVER['HTTP_ORIGIN']) ){
// Enable CORS
header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Range, Content-Disposition, Content-Type');
}
if( $_SERVER['REQUEST_METHOD'] == 'OPTIONS' ){
exit;
}
if( strtoupper($_SERVER['REQUEST_METHOD']) == 'POST' ){
$files = FileAPI::getFiles(); // Retrieve File List
$images = array();
// Fetch all image-info from files list
fetchImages($files, $images);
// JSONP callback name
$jsonp = isset($_REQUEST['callback']) ? trim($_REQUEST['callback']) : null;
// JSON-data for server response
$json = array(
'images' => $images
, 'data' => array('_REQUEST' => $_REQUEST, '_FILES' => $files)
);
// Server response: "HTTP/1.1 200 OK"
FileAPI::makeResponse(array(
'status' => FileAPI::OK
, 'statusText' => 'OK'
, 'body' => $json
), $jsonp);
exit;
}
function fetchImages($files, &$images, $name = 'file'){
if( isset($files['tmp_name']) ){
$filename = $files['tmp_name'];
list($mime) = explode(';', #mime_content_type($filename));
if( strpos($mime, 'image') !== false ){
$size = getimagesize($filename);
$base64 = base64_encode(file_get_contents($filename));
$images[$name] = array(
'width' => $size[0]
, 'height' => $size[1]
, 'mime' => $mime
, 'size' => filesize($filename)
, 'dataURL' => 'data:'. $mime .';base64,'. $base64
);
}
}
else {
foreach( $files as $name => $file ){
fetchImages($file, $images, $name);
}
}
}
?>

Answer 2

you can get the source code in here:
https://github.com/mailru/FileAPI
inside the "server" folder it is the ctrl.php and FileAPI.class.php