Christian
4 years ago
parent
e3b3bdb92f
commit
28fee3c731
@ -0,0 +1,76 @@ |
|||||||
|
<?php |
||||||
|
/* For licensing terms, see /license.txt */ |
||||||
|
|
||||||
|
/** |
||||||
|
* Input file with progress element. |
||||||
|
* |
||||||
|
* Class BigUpload |
||||||
|
*/ |
||||||
|
class BigUpload extends HTML_QuickForm_file |
||||||
|
{ |
||||||
|
/** |
||||||
|
* @param string $elementName |
||||||
|
* @param string $elementLabel |
||||||
|
* @param array $attributes |
||||||
|
*/ |
||||||
|
public function __construct($elementName = null, $elementLabel = null, $attributes = null) |
||||||
|
{ |
||||||
|
parent::__construct($elementName, $elementLabel, $attributes); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* @return string |
||||||
|
*/ |
||||||
|
public function toHtml() |
||||||
|
{ |
||||||
|
$origin = $this->getAttribute('data-origin'); |
||||||
|
$id = $this->getAttribute('id'); |
||||||
|
$html = parent::toHtml(); |
||||||
|
$html .= '<div id="'.$id.'-bigUploadProgressBarContainer"> |
||||||
|
<div id="'.$id.'-bigUploadProgressBarFilled"></div> |
||||||
|
</div> |
||||||
|
<div id="'.$id.'-bigUploadTimeRemaining"></div> |
||||||
|
<div id="'.$id.'-bigUploadResponse"></div>'; |
||||||
|
$js = '<script src="'.api_get_path(WEB_LIBRARY_JS_PATH).'bigupload/js/bigUpload.js"></script>'; |
||||||
|
$js .= '<script> |
||||||
|
var bigUpload = new bigUpload(); |
||||||
|
var uploadForm, formId, submitButtonId; |
||||||
|
$(function() { |
||||||
|
uploadForm = $("#'.$id.'").closest("form"); |
||||||
|
formId = uploadForm.attr("id"); |
||||||
|
submitButtonId = uploadForm.find("[type=\'submit\']").attr("id"); |
||||||
|
$("#"+submitButtonId).click(function(e) { |
||||||
|
e.preventDefault(); |
||||||
|
setBigUploadSettings(); |
||||||
|
bigUpload.fire(); |
||||||
|
}); |
||||||
|
}); |
||||||
|
function setBigUploadSettings() { |
||||||
|
//The id of the file input |
||||||
|
bigUpload.settings.inputField = "'.$id.'"; |
||||||
|
//The id of the form with the file upload. |
||||||
|
bigUpload.settings.formId = formId; |
||||||
|
//The id of the progress bar |
||||||
|
bigUpload.settings.progressBarField = "'.$id.'-bigUploadProgressBarFilled"; |
||||||
|
//The id of the time remaining field |
||||||
|
bigUpload.settings.timeRemainingField = "'.$id.'-bigUploadTimeRemaining"; |
||||||
|
//The id of the text response field |
||||||
|
bigUpload.settings.responseField = "'.$id.'-bigUploadResponse"; |
||||||
|
//The id of the submit button |
||||||
|
bigUpload.settings.submitButton = submitButtonId; |
||||||
|
//Color of the background of the progress bar |
||||||
|
bigUpload.settings.progressBarColor = "#5bb75b"; |
||||||
|
//Color of the background of the progress bar when an error is triggered |
||||||
|
bigUpload.settings.progressBarColorError = "#da4f49"; |
||||||
|
//Path to the php script for handling the uploads |
||||||
|
bigUpload.settings.scriptPath = "'.api_get_path(WEB_LIBRARY_JS_PATH).'bigupload/inc/bigUpload.php"; |
||||||
|
//Set the origin upload |
||||||
|
bigUpload.settings.origin = "'.$origin.'"; |
||||||
|
//The parameters from the upload form |
||||||
|
bigUpload.settings.formParams = uploadForm.serialize(); |
||||||
|
} |
||||||
|
</script>'; |
||||||
|
|
||||||
|
return $js.$html; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,53 @@ |
|||||||
|
------------------------------------------------------------------------- |
||||||
|
|
||||||
|
BigUpload |
||||||
|
|
||||||
|
version 1.2 |
||||||
|
Created by: Sean Thielen <sean@p27.us> |
||||||
|
[BigUpload: Uploading really big files in the browser](http://p27.us/2013/03/bigupload-uploading-really-big-files-in-the-browser/) |
||||||
|
|
||||||
|
------------------------------------------------------------------------- |
||||||
|
|
||||||
|
BigUpload is a tool for handling large file uploads (tested up to 2GB) through the browser. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
------------------------------------------------------------------------- |
||||||
|
|
||||||
|
It uses the HTML5 FileReader library to split large files into manageable chunks, |
||||||
|
and then sends these chunks to the server one at a time using an XmlHttpRequest. |
||||||
|
|
||||||
|
The php script then pieces these chunks together into one large file. |
||||||
|
|
||||||
|
Because the chunks are all the same size, it is easy to calculate an accurate progress bar |
||||||
|
and a fairly accurate time remaining variable. |
||||||
|
|
||||||
|
This tool is capable of handling file uploads of up to 2GB in size, without the need to tweak |
||||||
|
the max_upload and timeout variables on your httpd. |
||||||
|
|
||||||
|
This tool only works on Chrome and Firefox, but falls back to a normal file upload form on other browsers. |
||||||
|
|
||||||
|
If you want to deploy this as-is, the variables you need to worry about are in the top of |
||||||
|
* js/bigUpload.js |
||||||
|
* inc/bigUpload.php |
||||||
|
|
||||||
|
And you need to be sure to make /BigUpload/files and /BigUpload/files/tmp writeable |
||||||
|
|
||||||
|
|
||||||
|
Please feel free to contribute and use this in your projects! |
||||||
|
|
||||||
|
------------------------------------------------------------------------- |
||||||
|
|
||||||
|
v 1.2 |
||||||
|
* Cleaned up the code quite a lot |
||||||
|
* Added pause/resume functionality |
||||||
|
* Added fallback for unsupported browsers |
||||||
|
|
||||||
|
v 1.0.1 |
||||||
|
* Added time remaining calculator |
||||||
|
* Response from php script is now a json object, allowing for error processing |
||||||
|
* Minor script changes and bugfixes |
||||||
|
* Better comments |
||||||
|
|
||||||
|
v 1.0.0 |
||||||
|
* Initial version |
||||||
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 37 KiB |
@ -0,0 +1,78 @@ |
|||||||
|
body { |
||||||
|
margin: 0 auto; |
||||||
|
background-color:#ffffff; |
||||||
|
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; |
||||||
|
color: #000000; |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
h1 { |
||||||
|
font-size:32px; |
||||||
|
margin-top:0; |
||||||
|
} |
||||||
|
.bigUpload .bigUploadContainer { |
||||||
|
max-width: 350px; |
||||||
|
padding: 20px 30px 30px; |
||||||
|
margin: 0 auto 20px; |
||||||
|
margin-top:75px; |
||||||
|
background-color: #ffffff; |
||||||
|
border: 1px solid #e5e5e5; |
||||||
|
-webkit-border-radius: 5px; |
||||||
|
-moz-border-radius: 5px; |
||||||
|
border-radius: 5px; |
||||||
|
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05); |
||||||
|
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05); |
||||||
|
box-shadow: 0 1px 2px rgba(0,0,0,.05); |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.bigUpload #bigUploadFile { |
||||||
|
border: 1px solid #e5e5e5; |
||||||
|
-webkit-border-radius: 5px; |
||||||
|
-moz-border-radius: 5px; |
||||||
|
border-radius: 5px; |
||||||
|
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05); |
||||||
|
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05); |
||||||
|
box-shadow: 0 1px 2px rgba(0,0,0,.05); |
||||||
|
padding: 10px; |
||||||
|
} |
||||||
|
.bigUpload .bigUploadButton { |
||||||
|
background-color: rgb(0, 109, 204); |
||||||
|
border: 1px solid rgba(0, 0, 0, 0.09); |
||||||
|
-webkit-border-radius: 6px; |
||||||
|
-moz-border-radius: 6px; |
||||||
|
border-radius:6px; |
||||||
|
padding-bottom: 11px; |
||||||
|
padding-left: 19px; |
||||||
|
padding-right: 19px; |
||||||
|
padding-top: 11px; |
||||||
|
font-size: 18px; |
||||||
|
color:#ffffff; |
||||||
|
cursor: pointer; |
||||||
|
margin-top:15px; |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
.bigUpload .bigUploadAbort { |
||||||
|
background-color:rgb(218, 79, 73); |
||||||
|
} |
||||||
|
|
||||||
|
.bigUpload #bigUploadProgressBarContainer { |
||||||
|
width:94%; |
||||||
|
height:19px; |
||||||
|
margin-left: 3%; |
||||||
|
margin-top:1%; |
||||||
|
border: 1px solid #e5e5e5; |
||||||
|
-webkit-border-radius: 6px; |
||||||
|
-moz-border-radius: 6px; |
||||||
|
border-radius: 6px; |
||||||
|
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05); |
||||||
|
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05); |
||||||
|
box-shadow: 0 1px 2px rgba(0,0,0,.05); |
||||||
|
} |
||||||
|
|
||||||
|
.bigUpload #bigUploadProgressBarFilled { |
||||||
|
border-radius: 5px; |
||||||
|
margin: 1px; |
||||||
|
height:17px; |
||||||
|
width:0; |
||||||
|
background-color: rgb(91, 183, 91); |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
|
||||||
|
.bigUploadContainer{ |
||||||
|
width : 450px; |
||||||
|
border : solid 1px gray; |
||||||
|
border-radius: 14px; |
||||||
|
padding : 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.bigUploadContainer input[type="file"] { |
||||||
|
appearance: auto; |
||||||
|
user-select: none; |
||||||
|
white-space: pre; |
||||||
|
align-items: flex-start; |
||||||
|
text-align: center; |
||||||
|
cursor: default; |
||||||
|
padding: 1px 6px; |
||||||
|
margin : 8px; |
||||||
|
padding : 8px; |
||||||
|
padding-left : 2px; |
||||||
|
margin-left : 2px; |
||||||
|
} |
||||||
|
|
||||||
|
.bigUploadButton{ |
||||||
|
margin-left : 16px; |
||||||
|
} |
||||||
@ -0,0 +1,34 @@ |
|||||||
|
<!doctype html> |
||||||
|
<html> |
||||||
|
<head> |
||||||
|
<link rel="stylesheet" href="style.css"> |
||||||
|
<script src="js/bigUpload.js"></script> |
||||||
|
<script> |
||||||
|
bigUpload = new bigUpload(); |
||||||
|
function upload() { |
||||||
|
bigUpload.fire(); |
||||||
|
} |
||||||
|
function abort() { |
||||||
|
bigUpload.abortFileUpload(); |
||||||
|
} |
||||||
|
</script> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div class="bigUpload"> |
||||||
|
<div class="bigUploadContainer"> |
||||||
|
<h1>BigUpload</h1> |
||||||
|
<form action="inc/bigUpload.php?action=post-unsupported" method="post" enctype="multipart/form-data" id="bigUploadForm"> |
||||||
|
<input type="file" id="bigUploadFile" name="bigUploadFile" /> |
||||||
|
<input type="button" class="bigUploadButton" value="Start Upload" id="bigUploadSubmit" onclick="upload()" /> |
||||||
|
<input type="button" class="bigUploadButton bigUploadAbort" value="Cancel" onclick="abort()" /> |
||||||
|
</form> |
||||||
|
<div id="bigUploadProgressBarContainer"> |
||||||
|
<div id="bigUploadProgressBarFilled"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div id="bigUploadTimeRemaining"></div> |
||||||
|
<div id="bigUploadResponse"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,302 @@ |
|||||||
|
<?php |
||||||
|
|
||||||
|
require_once '../../../../global.inc.php'; |
||||||
|
require_once api_get_path(SYS_CODE_PATH).'work/work.lib.php'; |
||||||
|
|
||||||
|
class BigUpload |
||||||
|
{ |
||||||
|
/** |
||||||
|
* Temporary directory for uploading files |
||||||
|
*/ |
||||||
|
const TEMP_DIRECTORY = '/tmp/'; |
||||||
|
|
||||||
|
/** |
||||||
|
* Directory files will be moved to after the upload is completed |
||||||
|
*/ |
||||||
|
const MAIN_DIRECTORY = '../files/'; |
||||||
|
|
||||||
|
/** |
||||||
|
* Max allowed filesize. This is for unsupported browsers and |
||||||
|
* as an additional security check in case someone bypasses the js filesize check. |
||||||
|
* |
||||||
|
* This must match the value specified in main.js |
||||||
|
*/ |
||||||
|
const MAX_SIZE = 2147483648; |
||||||
|
|
||||||
|
/** |
||||||
|
* Temporary directory |
||||||
|
* @var string |
||||||
|
*/ |
||||||
|
private $tempDirectory; |
||||||
|
|
||||||
|
/** |
||||||
|
* Directory for completed uploads |
||||||
|
* @var string |
||||||
|
*/ |
||||||
|
private $mainDirectory; |
||||||
|
|
||||||
|
/** |
||||||
|
* Name of the temporary file. Used as a reference to make sure chunks get written to the right file. |
||||||
|
* @var string |
||||||
|
*/ |
||||||
|
private $tempName; |
||||||
|
|
||||||
|
/** |
||||||
|
* Constructor function, sets the temporary directory and main directory |
||||||
|
*/ |
||||||
|
public function __construct() |
||||||
|
{ |
||||||
|
$tempDirectory = api_get_path(SYS_ARCHIVE_PATH); |
||||||
|
$this->setTempDirectory($tempDirectory); |
||||||
|
$this->setMainDirectory(self::MAIN_DIRECTORY); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Create a random file name for the file to use as it's being uploaded |
||||||
|
* @param string $value Temporary filename |
||||||
|
*/ |
||||||
|
public function setTempName($value = null) |
||||||
|
{ |
||||||
|
if($value) { |
||||||
|
$this->tempName = $value; |
||||||
|
} |
||||||
|
else { |
||||||
|
$this->tempName = mt_rand() . '.tmp'; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Return the name of the temporary file |
||||||
|
* @return string Temporary filename |
||||||
|
*/ |
||||||
|
public function getTempName() |
||||||
|
{ |
||||||
|
return $this->tempName; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Set the name of the temporary directory |
||||||
|
* @param string $value Temporary directory |
||||||
|
*/ |
||||||
|
public function setTempDirectory($value) |
||||||
|
{ |
||||||
|
$this->tempDirectory = $value; |
||||||
|
return true; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Return the name of the temporary directory |
||||||
|
* @return string Temporary directory |
||||||
|
*/ |
||||||
|
public function getTempDirectory() |
||||||
|
{ |
||||||
|
return $this->tempDirectory; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Set the name of the main directory |
||||||
|
* @param string $value Main directory |
||||||
|
*/ |
||||||
|
public function setMainDirectory($value) |
||||||
|
{ |
||||||
|
$this->mainDirectory = $value; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Return the name of the main directory |
||||||
|
* @return string Main directory |
||||||
|
*/ |
||||||
|
public function getMainDirectory() |
||||||
|
{ |
||||||
|
return $this->mainDirectory; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Function to upload the individual file chunks |
||||||
|
* @return string JSON object with result of upload |
||||||
|
*/ |
||||||
|
public function uploadFile() |
||||||
|
{ |
||||||
|
//Make sure the total file we're writing to hasn't surpassed the file size limit |
||||||
|
if(file_exists($this->getTempDirectory() . $this->getTempName())) { |
||||||
|
if(filesize($this->getTempDirectory() . $this->getTempName()) > self::MAX_SIZE) { |
||||||
|
$this->abortUpload(); |
||||||
|
return json_encode(array( |
||||||
|
'errorStatus' => 1, |
||||||
|
'errorText' => 'File is too large.' |
||||||
|
)); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//Open the raw POST data from php://input |
||||||
|
$fileData = file_get_contents('php://input'); |
||||||
|
|
||||||
|
//Write the actual chunk to the larger file |
||||||
|
$handle = fopen($this->getTempDirectory() . $this->getTempName(), 'a'); |
||||||
|
|
||||||
|
fwrite($handle, $fileData); |
||||||
|
fclose($handle); |
||||||
|
|
||||||
|
return json_encode(array( |
||||||
|
'key' => $this->getTempName(), |
||||||
|
'errorStatus' => 0 |
||||||
|
)); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Function for cancelling uploads while they're in-progress; deletes the temp file |
||||||
|
* @return string JSON object with result of deletion |
||||||
|
*/ |
||||||
|
public function abortUpload() |
||||||
|
{ |
||||||
|
if(unlink($this->getTempDirectory() . $this->getTempName())) { |
||||||
|
return json_encode(array('errorStatus' => 0)); |
||||||
|
} |
||||||
|
else { |
||||||
|
|
||||||
|
return json_encode(array( |
||||||
|
'errorStatus' => 1, |
||||||
|
'errorText' => 'Unable to delete temporary file.' |
||||||
|
)); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Function to rename and move the finished file |
||||||
|
* @param string $final_name Name to rename the finished upload to |
||||||
|
* @return string JSON object with result of rename |
||||||
|
*/ |
||||||
|
public function finishUpload($finalName) |
||||||
|
{ |
||||||
|
$origin = $_POST['origin']; |
||||||
|
if ($origin == 'document') { |
||||||
|
$tmpFile = $this->getTempDirectory() . $this->getTempName(); |
||||||
|
chmod($tmpFile, '0777'); |
||||||
|
$file = [ |
||||||
|
'name' => $finalName, |
||||||
|
'type' => $_POST['type'], |
||||||
|
'tmp_name' => $tmpFile, |
||||||
|
'error' => 0, |
||||||
|
'size' => $_POST['size'], |
||||||
|
'copy_file' => true, |
||||||
|
]; |
||||||
|
$files = ['file' => $file]; |
||||||
|
$unzip = isset($_POST['unzip']) ? $_POST['unzip'] : null; |
||||||
|
$index = isset($_POST['index_document']) ? $_POST['index_document'] : null; |
||||||
|
DocumentManager::upload_document( |
||||||
|
$files, |
||||||
|
$_POST['curdirpath'], |
||||||
|
$_POST['title'], |
||||||
|
$_POST['comment'], |
||||||
|
$unzip, |
||||||
|
$_POST['if_exists'], |
||||||
|
$index, |
||||||
|
true |
||||||
|
); |
||||||
|
$redirectUrl = api_get_path(WEB_CODE_PATH).'document/document.php?'.api_get_cidreq(); |
||||||
|
if (!empty($_POST['id'])) { |
||||||
|
$redirectUrl .= '&'.http_build_query( |
||||||
|
[ |
||||||
|
'id' => $_POST['id'], |
||||||
|
] |
||||||
|
); |
||||||
|
} |
||||||
|
return json_encode(array('errorStatus' => 0, 'redirect' => $redirectUrl)); |
||||||
|
} else if ($origin == 'learnpath') { |
||||||
|
|
||||||
|
unset($_REQUEST['origin']); |
||||||
|
$redirectUrl = api_get_path(WEB_CODE_PATH).'upload/upload.php?'.api_get_cidreq().'&from=bigUpload&name='.$this->getTempName(); |
||||||
|
return json_encode(array('errorStatus' => 0, 'redirect' => $redirectUrl)); |
||||||
|
|
||||||
|
} else if ($origin == 'work') { |
||||||
|
|
||||||
|
$tmpFile = $this->getTempDirectory() . $this->getTempName(); |
||||||
|
chmod($tmpFile, '0777'); |
||||||
|
$workInfo = get_work_data_by_id($_REQUEST['id']); |
||||||
|
$values = $_REQUEST; |
||||||
|
$course_info = api_get_course_info(); |
||||||
|
$session_id = api_get_session_id(); |
||||||
|
$group_id = api_get_group_id(); |
||||||
|
$user_id = api_get_user_id(); |
||||||
|
$values['contains_file'] = 1; |
||||||
|
$file = [ |
||||||
|
'name' => $finalName, |
||||||
|
'type' => $_POST['type'], |
||||||
|
'tmp_name' => $tmpFile, |
||||||
|
'error' => 0, |
||||||
|
'size' => $_POST['size'], |
||||||
|
'copy_file' => true, |
||||||
|
]; |
||||||
|
|
||||||
|
// Process work |
||||||
|
$result = processWorkForm( |
||||||
|
$workInfo, |
||||||
|
$values, |
||||||
|
$course_info, |
||||||
|
$session_id, |
||||||
|
$group_id, |
||||||
|
$user_id, |
||||||
|
$file, |
||||||
|
api_get_configuration_value('assignment_prevent_duplicate_upload') |
||||||
|
); |
||||||
|
$redirectUrl = api_get_path(WEB_CODE_PATH).'work/work.php?'.api_get_cidreq(); |
||||||
|
return json_encode(array('errorStatus' => 0, 'redirect' => $redirectUrl)); |
||||||
|
} |
||||||
|
|
||||||
|
return json_encode(array('errorStatus' => 0)); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Basic php file upload function, used for unsupported browsers. |
||||||
|
* The output on success/failure is very basic, and it would be best to have these errors return the user to index.html |
||||||
|
* with the errors printed on the form, but that is beyond the scope of this project as it is very application specific. |
||||||
|
* @return string Success or failure of upload |
||||||
|
*/ |
||||||
|
public function postUnsupported() |
||||||
|
{ |
||||||
|
$name = $_FILES['bigUploadFile']['name']; |
||||||
|
$size = $_FILES['bigUploadFile']['size']; |
||||||
|
$tempName = $_FILES['bigUploadFile']['tmp_name']; |
||||||
|
|
||||||
|
if(filesize($tempName) > self::MAX_SIZE) { |
||||||
|
return 'File is too large.'; |
||||||
|
} |
||||||
|
|
||||||
|
if(move_uploaded_file($tempName, $this->getMainDirectory() . $name)) { |
||||||
|
return 'File uploaded.'; |
||||||
|
} |
||||||
|
else { |
||||||
|
return 'There was an error uploading the file'; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//Instantiate the class |
||||||
|
$bigUpload = new BigUpload; |
||||||
|
|
||||||
|
//Set the temporary filename |
||||||
|
$tempName = null; |
||||||
|
if(isset($_GET['key'])) { |
||||||
|
$tempName = $_GET['key']; |
||||||
|
} |
||||||
|
if(isset($_POST['key'])) { |
||||||
|
$tempName = $_POST['key']; |
||||||
|
} |
||||||
|
$bigUpload->setTempName($tempName); |
||||||
|
|
||||||
|
switch($_GET['action']) { |
||||||
|
case 'upload': |
||||||
|
print $bigUpload->uploadFile(); |
||||||
|
break; |
||||||
|
case 'abort': |
||||||
|
print $bigUpload->abortUpload(); |
||||||
|
break; |
||||||
|
case 'finish': |
||||||
|
print $bigUpload->finishUpload($_POST['name']); |
||||||
|
break; |
||||||
|
case 'post-unsupported': |
||||||
|
print $bigUpload->postUnsupported(); |
||||||
|
break; |
||||||
|
} |
||||||
|
?> |
||||||
@ -0,0 +1,336 @@ |
|||||||
|
function bigUpload () { |
||||||
|
|
||||||
|
//These are the main config variables and should be able to take care of most of the customization
|
||||||
|
this.settings = { |
||||||
|
//The id of the file input
|
||||||
|
'inputField': 'bigUploadFile', |
||||||
|
|
||||||
|
//The id of the form with the file upload.
|
||||||
|
//This should be a valid html form (see index.html) so there is a fallback for unsupported browsers
|
||||||
|
'formId': 'bigUploadForm', |
||||||
|
|
||||||
|
//The id of the progress bar
|
||||||
|
//Width of this element will change based on progress
|
||||||
|
//Content of this element will display a percentage
|
||||||
|
//See bigUpload.progressUpdate() to change this code
|
||||||
|
'progressBarField': 'bigUploadProgressBarFilled', |
||||||
|
|
||||||
|
//The id of the time remaining field
|
||||||
|
//Content of this element will display the estimated time remaining for the upload
|
||||||
|
//See bigUpload.progressUpdate() to change this code
|
||||||
|
'timeRemainingField': 'bigUploadTimeRemaining', |
||||||
|
|
||||||
|
//The id of the text response field
|
||||||
|
//Content of this element will display the response from the server on success or error
|
||||||
|
'responseField': 'bigUploadResponse', |
||||||
|
|
||||||
|
//The id of the submit button
|
||||||
|
//This is then changed to become the pause/resume button based on the status of the upload
|
||||||
|
'submitButton': 'bigUploadSubmit', |
||||||
|
|
||||||
|
//Color of the background of the progress bar
|
||||||
|
//This must also be defined in the progressBarField css, but it's used here to reset the color after an error
|
||||||
|
//Default: green
|
||||||
|
'progressBarColor': '#5bb75b', |
||||||
|
|
||||||
|
//Color of the background of the progress bar when an error is triggered
|
||||||
|
//Default: red
|
||||||
|
'progressBarColorError': '#da4f49', |
||||||
|
|
||||||
|
//Path to the php script for handling the uploads
|
||||||
|
'scriptPath': 'inc/bigUpload.php', |
||||||
|
|
||||||
|
//Size of chunks to upload (in bytes)
|
||||||
|
//Default: 1MB
|
||||||
|
'chunkSize': 1000000, |
||||||
|
|
||||||
|
//Max file size allowed
|
||||||
|
//Default: 2GB
|
||||||
|
'maxFileSize': 2147483648 |
||||||
|
}; |
||||||
|
|
||||||
|
//Upload specific variables
|
||||||
|
this.uploadData = { |
||||||
|
'uploadStarted': false, |
||||||
|
'file': false, |
||||||
|
'numberOfChunks': 0, |
||||||
|
'aborted': false, |
||||||
|
'paused': false, |
||||||
|
'pauseChunk': 0, |
||||||
|
'key': 0, |
||||||
|
'timeStart': 0, |
||||||
|
'totalTime': 0 |
||||||
|
}; |
||||||
|
|
||||||
|
parent = this; |
||||||
|
|
||||||
|
//Quick function for accessing objects
|
||||||
|
this.$ = function(id) { |
||||||
|
return document.getElementById(id); |
||||||
|
}; |
||||||
|
|
||||||
|
//Resets all the upload specific data before a new upload
|
||||||
|
this.resetKey = function() { |
||||||
|
this.uploadData = { |
||||||
|
'uploadStarted': false, |
||||||
|
'file': false, |
||||||
|
'numberOfChunks': 0, |
||||||
|
'aborted': false, |
||||||
|
'paused': false, |
||||||
|
'pauseChunk': 0, |
||||||
|
'key': 0, |
||||||
|
'timeStart': 0, |
||||||
|
'totalTime': 0 |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
//Inital method called
|
||||||
|
//Determines whether to begin/pause/resume an upload based on whether or not one is already in progress
|
||||||
|
this.fire = function() { |
||||||
|
if(this.uploadData.uploadStarted === true && this.uploadData.paused === false) { |
||||||
|
this.pauseUpload(); |
||||||
|
} |
||||||
|
else if(this.uploadData.uploadStarted === true && this.uploadData.paused === true) { |
||||||
|
this.resumeUpload(); |
||||||
|
} |
||||||
|
else { |
||||||
|
this.processFiles(); |
||||||
|
} |
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
//Initial upload method
|
||||||
|
//Pulls the size of the file being uploaded and calculated the number of chunks, then calls the recursive upload method
|
||||||
|
this.processFiles = function() { |
||||||
|
|
||||||
|
//If the user is using an unsupported browser, the form just submits as a regular form
|
||||||
|
if(!Blob.prototype.slice) { |
||||||
|
this.$(this.settings.formId).submit(); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
//Reset the upload-specific variables
|
||||||
|
this.resetKey(); |
||||||
|
this.uploadData.uploadStarted = true; |
||||||
|
|
||||||
|
//Some HTML tidying
|
||||||
|
//Reset the background color of the progress bar in case it was changed by any earlier errors
|
||||||
|
//Change the Upload button to a Pause button
|
||||||
|
this.$(this.settings.progressBarField).style.backgroundColor = this.settings.progressBarColor; |
||||||
|
this.$(this.settings.responseField).textContent = ''; |
||||||
|
this.$(this.settings.submitButton).value = 'Pause'; |
||||||
|
|
||||||
|
//Alias the file input object to this.uploadData
|
||||||
|
this.uploadData.file = this.$(this.settings.inputField).files[0]; |
||||||
|
|
||||||
|
//Check the filesize. Obviously this is not very secure, so it has another check in inc/bigUpload.php
|
||||||
|
//But this should be good enough to catch any immediate errors
|
||||||
|
var fileSize = this.uploadData.file.size; |
||||||
|
if(fileSize > this.settings.maxFileSize) { |
||||||
|
this.printResponse('The file you have chosen is too large.', true); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
//Calculate the total number of file chunks
|
||||||
|
this.uploadData.numberOfChunks = Math.ceil(fileSize / this.settings.chunkSize); |
||||||
|
|
||||||
|
//Start the upload
|
||||||
|
this.sendFile(0); |
||||||
|
}; |
||||||
|
|
||||||
|
//Main upload method
|
||||||
|
this.sendFile = function (chunk) { |
||||||
|
|
||||||
|
//Set the time for the beginning of the upload, used for calculating time remaining
|
||||||
|
this.uploadData.timeStart = new Date().getTime(); |
||||||
|
|
||||||
|
//Check if the upload has been cancelled by the user
|
||||||
|
if(this.uploadData.aborted === true) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
//Check if the upload has been paused by the user
|
||||||
|
if(this.uploadData.paused === true) { |
||||||
|
this.uploadData.pauseChunk = chunk; |
||||||
|
this.printResponse('Upload paused.', false); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
//Set the byte to start uploading from and the byte to end uploading at
|
||||||
|
var start = chunk * this.settings.chunkSize; |
||||||
|
var stop = start + this.settings.chunkSize; |
||||||
|
|
||||||
|
//Initialize a new FileReader object
|
||||||
|
var reader = new FileReader(); |
||||||
|
|
||||||
|
reader.onloadend = function(evt) { |
||||||
|
|
||||||
|
//Build the AJAX request
|
||||||
|
//
|
||||||
|
//this.uploadData.key is the temporary filename
|
||||||
|
//If the server sees it as 0 it will generate a new filename and pass it back in the JSON object
|
||||||
|
//this.uploadData.key is then populated with the filename to use for subsequent requests
|
||||||
|
//When this method sends a valid filename (i.e. key != 0), the server will just append the data being sent to that file.
|
||||||
|
xhr = new XMLHttpRequest(); |
||||||
|
xhr.open("POST", parent.settings.scriptPath + '?action=upload&origin=' + parent.settings.origin+'&key=' + parent.uploadData.key, true); |
||||||
|
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); |
||||||
|
|
||||||
|
xhr.onreadystatechange = function() { |
||||||
|
if(xhr.readyState == 4) { |
||||||
|
var response = JSON.parse(xhr.response); |
||||||
|
|
||||||
|
//If there's an error, call the error method and break the loop
|
||||||
|
if(response.errorStatus !== 0 || xhr.status != 200) { |
||||||
|
parent.printResponse(response.errorText, true); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
//If it's the first chunk, set this.uploadData.key to the server response (see above)
|
||||||
|
if(chunk === 0 || parent.uploadData.key === 0) { |
||||||
|
parent.uploadData.key = response.key; |
||||||
|
} |
||||||
|
|
||||||
|
//If the file isn't done uploading, update the progress bar and run this.sendFile again for the next chunk
|
||||||
|
if(chunk < parent.uploadData.numberOfChunks) { |
||||||
|
parent.progressUpdate(chunk + 1); |
||||||
|
parent.sendFile(chunk + 1); |
||||||
|
} |
||||||
|
//If the file is complete uploaded, instantiate the finalizing method
|
||||||
|
else { |
||||||
|
parent.sendFileData(); |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
//Send the file chunk
|
||||||
|
xhr.send(blob); |
||||||
|
}; |
||||||
|
|
||||||
|
//Slice the file into the desired chunk
|
||||||
|
//This is the core of the script. Everything else is just fluff.
|
||||||
|
var blob = this.uploadData.file.slice(start, stop); |
||||||
|
reader.readAsBinaryString(blob); |
||||||
|
}; |
||||||
|
|
||||||
|
//This method is for whatever housekeeping work needs to be completed after the file is finished uploading.
|
||||||
|
//As it's setup now, it passes along the original filename to the server and the server renames the file and removes it form the temp directory.
|
||||||
|
//This function could also pass things like this.uploadData.file.type for the mime-type (although it would be more accurate to use php for that)
|
||||||
|
//Or it could pass along user information or something like that, depending on the context of the application.
|
||||||
|
this.sendFileData = function() { |
||||||
|
var data = 'key=' + this.uploadData.key + '&name=' + this.uploadData.file.name + '&type=' + this.uploadData.file.type + '&size=' + this.uploadData.file.size + '&origin=' + parent.settings.origin + '&' + parent.settings.formParams; |
||||||
|
xhr = new XMLHttpRequest(); |
||||||
|
xhr.open("POST", parent.settings.scriptPath + '?action=finish', true); |
||||||
|
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); |
||||||
|
|
||||||
|
xhr.onreadystatechange = function() { |
||||||
|
if(xhr.readyState == 4) { |
||||||
|
var response = JSON.parse(xhr.response); |
||||||
|
|
||||||
|
//If there's an error, call the error method
|
||||||
|
if(response.errorStatus !== 0 || xhr.status != 200) { |
||||||
|
parent.printResponse(response.errorText, true); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
//Reset the upload-specific data so we can process another upload
|
||||||
|
parent.resetKey(); |
||||||
|
|
||||||
|
//Change the submit button text so it's ready for another upload and spit out a sucess message
|
||||||
|
parent.$(parent.settings.submitButton).value = 'Start Upload'; |
||||||
|
parent.printResponse('File uploaded successfully.', false); |
||||||
|
|
||||||
|
if (response.redirect) { |
||||||
|
location.href = response.redirect; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
//Send the reques
|
||||||
|
xhr.send(data); |
||||||
|
}; |
||||||
|
|
||||||
|
//This method cancels the upload of a file.
|
||||||
|
//It sets this.uploadData.aborted to true, which stops the recursive upload script.
|
||||||
|
//The server then removes the incomplete file from the temp directory, and the html displays an error message.
|
||||||
|
this.abortFileUpload = function() { |
||||||
|
this.uploadData.aborted = true; |
||||||
|
var data = 'key=' + this.uploadData.key; |
||||||
|
xhr = new XMLHttpRequest(); |
||||||
|
xhr.open("POST", this.settings.scriptPath + '?action=abort', true); |
||||||
|
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); |
||||||
|
|
||||||
|
xhr.onreadystatechange = function() { |
||||||
|
if(xhr.readyState == 4) { |
||||||
|
var response = JSON.parse(xhr.response); |
||||||
|
|
||||||
|
//If there's an error, call the error method.
|
||||||
|
if(response.errorStatus !== 0 || xhr.status != 200) { |
||||||
|
parent.printResponse(response.errorText, true); |
||||||
|
return; |
||||||
|
} |
||||||
|
parent.printResponse('File upload was cancelled.', true); |
||||||
|
} |
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
//Send the request
|
||||||
|
xhr.send(data); |
||||||
|
}; |
||||||
|
|
||||||
|
//Pause the upload
|
||||||
|
//Sets this.uploadData.paused to true, which breaks the upload loop.
|
||||||
|
//The current chunk is still stored in this.uploadData.pauseChunk, so the upload can later be resumed.
|
||||||
|
//In a production environment, you might want to have a cron job to clean up files that have been paused and never resumed,
|
||||||
|
//because this method won't delete the file from the temp directory if the user pauses and then leaves the page.
|
||||||
|
this.pauseUpload = function() { |
||||||
|
this.uploadData.paused = true; |
||||||
|
this.printResponse('', false); |
||||||
|
this.$(this.settings.submitButton).value = 'Resume'; |
||||||
|
}; |
||||||
|
|
||||||
|
//Resume the upload
|
||||||
|
//Undoes the doings of this.pauseUpload and then re-enters the loop at the last chunk uploaded
|
||||||
|
this.resumeUpload = function() { |
||||||
|
this.uploadData.paused = false; |
||||||
|
this.$(this.settings.submitButton).value = 'Pause'; |
||||||
|
this.sendFile(this.uploadData.pauseChunk); |
||||||
|
}; |
||||||
|
|
||||||
|
//This method updates a simple progress bar by calculating the percentage of chunks uploaded.
|
||||||
|
//Also includes a method to calculate the time remaining by taking the average time to upload individual chunks
|
||||||
|
//and multiplying it by the number of chunks remaining.
|
||||||
|
this.progressUpdate = function(progress) { |
||||||
|
|
||||||
|
var percent = Math.ceil((progress / this.uploadData.numberOfChunks) * 100); |
||||||
|
this.$(this.settings.progressBarField).style.width = percent + '%'; |
||||||
|
this.$(this.settings.progressBarField).textContent = percent + '%'; |
||||||
|
|
||||||
|
//Calculate the estimated time remaining
|
||||||
|
//Only run this every five chunks, otherwise the time remaining jumps all over the place (see: http://xkcd.com/612/)
|
||||||
|
if(progress % 5 === 0) { |
||||||
|
|
||||||
|
//Calculate the total time for all of the chunks uploaded so far
|
||||||
|
this.uploadData.totalTime += (new Date().getTime() - this.uploadData.timeStart); |
||||||
|
console.log(this.uploadData.totalTime); |
||||||
|
|
||||||
|
//Estimate the time remaining by finding the average time per chunk upload and
|
||||||
|
//multiplying it by the number of chunks remaining, then convert into seconds
|
||||||
|
var timeLeft = Math.ceil((this.uploadData.totalTime / progress) * (this.uploadData.numberOfChunks - progress) / 100); |
||||||
|
|
||||||
|
//Update this.settings.timeRemainingField with the estimated time remaining
|
||||||
|
this.$(this.settings.timeRemainingField).textContent = timeLeft + ' seconds remaining'; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
//Simple response/error handler
|
||||||
|
this.printResponse = function(responseText, error) { |
||||||
|
this.$(this.settings.responseField).textContent = responseText; |
||||||
|
this.$(this.settings.timeRemainingField).textContent = ''; |
||||||
|
if(error === true) { |
||||||
|
this.$(this.settings.progressBarField).style.backgroundColor = this.settings.progressBarColorError; |
||||||
|
} |
||||||
|
}; |
||||||
|
} |
||||||
@ -0,0 +1,350 @@ |
|||||||
|
function bigUpload () { |
||||||
|
|
||||||
|
//These are the main config variables and should be able to take care of most of the customization
|
||||||
|
this.settings = { |
||||||
|
//The id of the file input
|
||||||
|
'inputField': 'bigUploadFile', |
||||||
|
|
||||||
|
//The id of the form with the file upload.
|
||||||
|
//This should be a valid html form (see index.html) so there is a fallback for unsupported browsers
|
||||||
|
'formId': 'bigUploadForm', |
||||||
|
|
||||||
|
//The id of the progress bar
|
||||||
|
//Width of this element will change based on progress
|
||||||
|
//Content of this element will display a percentage
|
||||||
|
//See bigUpload.progressUpdate() to change this code
|
||||||
|
'progressBarField': 'bigUploadProgressBarFilled', |
||||||
|
|
||||||
|
//The id of the time remaining field
|
||||||
|
//Content of this element will display the estimated time remaining for the upload
|
||||||
|
//See bigUpload.progressUpdate() to change this code
|
||||||
|
'timeRemainingField': 'bigUploadTimeRemaining', |
||||||
|
|
||||||
|
//The id of the text response field
|
||||||
|
//Content of this element will display the response from the server on success or error
|
||||||
|
'responseField': 'bigUploadResponse', |
||||||
|
|
||||||
|
//The id of the submit button
|
||||||
|
//This is then changed to become the pause/resume button based on the status of the upload
|
||||||
|
'submitButton': 'bigUploadSubmit', |
||||||
|
|
||||||
|
//Color of the background of the progress bar
|
||||||
|
//This must also be defined in the progressBarField css, but it's used here to reset the color after an error
|
||||||
|
//Default: green
|
||||||
|
'progressBarColor': '#5bb75b', |
||||||
|
|
||||||
|
//Color of the background of the progress bar when an error is triggered
|
||||||
|
//Default: red
|
||||||
|
'progressBarColorError': '#da4f49', |
||||||
|
|
||||||
|
//Path to the php script for handling the uploads
|
||||||
|
'scriptPath': 'inc/big-upload.php', |
||||||
|
|
||||||
|
//Additional URL variables to be passed to the script path
|
||||||
|
//ex: &foo=bar
|
||||||
|
'scriptPathParams': '', |
||||||
|
|
||||||
|
//Size of chunks to upload (in bytes)
|
||||||
|
//Default: 1MB defaut : 1000000
|
||||||
|
'chunkSize': 50000, |
||||||
|
|
||||||
|
//Max file size allowed
|
||||||
|
//Default: 2GB defaut : 2147483648
|
||||||
|
'maxFileSize': 414748364 |
||||||
|
}; |
||||||
|
this.scormid = ''; |
||||||
|
|
||||||
|
//Upload specific variables
|
||||||
|
this.uploadData = { |
||||||
|
'uploadStarted': false, |
||||||
|
'file': false, |
||||||
|
'numberOfChunks': 0, |
||||||
|
'aborted': false, |
||||||
|
'paused': false, |
||||||
|
'pauseChunk': 0, |
||||||
|
'key': 0, |
||||||
|
'timeStart': 0, |
||||||
|
'totalTime': 0 |
||||||
|
}; |
||||||
|
|
||||||
|
//Success callback
|
||||||
|
this.success = function(response) { |
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
parent = this; |
||||||
|
|
||||||
|
//Quick function for accessing objects
|
||||||
|
this.$ = function(id) { |
||||||
|
return document.getElementById(id); |
||||||
|
}; |
||||||
|
|
||||||
|
//Resets all the upload specific data before a new upload
|
||||||
|
this.resetKey = function() { |
||||||
|
this.uploadData = { |
||||||
|
'uploadStarted': false, |
||||||
|
'file': false, |
||||||
|
'numberOfChunks': 0, |
||||||
|
'aborted': false, |
||||||
|
'paused': false, |
||||||
|
'pauseChunk': 0, |
||||||
|
'key': 0, |
||||||
|
'timeStart': 0, |
||||||
|
'totalTime': 0 |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
//Inital method called
|
||||||
|
//Determines whether to begin/pause/resume an upload based on whether or not one is already in progress
|
||||||
|
this.fire = function() { |
||||||
|
if(this.uploadData.uploadStarted === true && this.uploadData.paused === false) { |
||||||
|
this.pauseUpload(); |
||||||
|
} |
||||||
|
else if(this.uploadData.uploadStarted === true && this.uploadData.paused === true) { |
||||||
|
this.resumeUpload(); |
||||||
|
} |
||||||
|
else { |
||||||
|
this.processFiles(); |
||||||
|
} |
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
//Initial upload method
|
||||||
|
//Pulls the size of the file being uploaded and calculated the number of chunks, then calls the recursive upload method
|
||||||
|
this.processFiles = function() { |
||||||
|
|
||||||
|
//If the user is using an unsupported browser, the form just submits as a regular form
|
||||||
|
if (!window.File || !window.FileReader || !window.FileList || !window.Blob) { |
||||||
|
this.$(this.settings.formId).submit(); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
//Reset the upload-specific variables
|
||||||
|
this.resetKey(); |
||||||
|
this.uploadData.uploadStarted = true; |
||||||
|
|
||||||
|
//Some HTML tidying
|
||||||
|
//Reset the background color of the progress bar in case it was changed by any earlier errors
|
||||||
|
//Change the Upload button to a Pause button
|
||||||
|
this.$(this.settings.progressBarField).style.backgroundColor = this.settings.progressBarColor; |
||||||
|
this.$(this.settings.responseField).textContent = 'Envoi...'; |
||||||
|
this.$(this.settings.submitButton).value = 'Pause'; |
||||||
|
|
||||||
|
//Alias the file input object to this.uploadData
|
||||||
|
this.uploadData.file = this.$(this.settings.inputField).files[0]; |
||||||
|
|
||||||
|
//Check the filesize. Obviously this is not very secure, so it has another check in inc/bigUpload.php
|
||||||
|
//But this should be good enough to catch any immediate errors
|
||||||
|
var fileSize = this.uploadData.file.size; |
||||||
|
if(fileSize > this.settings.maxFileSize) { |
||||||
|
this.printResponse('Votre fichier est trop gros.', true); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
//Calculate the total number of file chunks
|
||||||
|
this.uploadData.numberOfChunks = Math.ceil(fileSize / this.settings.chunkSize); |
||||||
|
|
||||||
|
//Start the upload
|
||||||
|
this.sendFile(0); |
||||||
|
}; |
||||||
|
|
||||||
|
//Main upload method
|
||||||
|
this.sendFile = function (chunk) { |
||||||
|
|
||||||
|
//Set the time for the beginning of the upload, used for calculating time remaining
|
||||||
|
this.uploadData.timeStart = new Date().getTime(); |
||||||
|
|
||||||
|
//Check if the upload has been cancelled by the user
|
||||||
|
if(this.uploadData.aborted === true) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
//Check if the upload has been paused by the user
|
||||||
|
if(this.uploadData.paused === true) { |
||||||
|
this.uploadData.pauseChunk = chunk; |
||||||
|
this.printResponse('En pause.', false); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
//Set the byte to start uploading from and the byte to end uploading at
|
||||||
|
var start = chunk * this.settings.chunkSize; |
||||||
|
var stop = start + this.settings.chunkSize; |
||||||
|
|
||||||
|
//Initialize a new FileReader object
|
||||||
|
var reader = new FileReader(); |
||||||
|
|
||||||
|
reader.onloadend = function(evt) { |
||||||
|
|
||||||
|
//Build the AJAX request
|
||||||
|
//
|
||||||
|
//this.uploadData.key is the temporary filename
|
||||||
|
//If the server sees it as 0 it will generate a new filename and pass it back in the JSON object
|
||||||
|
//this.uploadData.key is then populated with the filename to use for subsequent requests
|
||||||
|
//When this method sends a valid filename (i.e. key != 0), the server will just append the data being sent to that file.
|
||||||
|
xhr = new XMLHttpRequest(); |
||||||
|
xhr.open("POST", parent.settings.scriptPath + '?action=upload&key=' + parent.uploadData.key + parent.settings.scriptPathParams, true); |
||||||
|
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); |
||||||
|
|
||||||
|
xhr.onreadystatechange = function() { |
||||||
|
if(xhr.readyState == 4) { |
||||||
|
|
||||||
|
var response = JSON.parse(xhr.response); |
||||||
|
|
||||||
|
//If there's an error, call the error method and break the loop
|
||||||
|
if(response.errorStatus !== 0 || xhr.status != 200) { |
||||||
|
parent.printResponse(response.errorText, true); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
//If it's the first chunk, set this.uploadData.key to the server response (see above)
|
||||||
|
if(chunk === 0 || parent.uploadData.key === 0) { |
||||||
|
parent.uploadData.key = response.key; |
||||||
|
} |
||||||
|
|
||||||
|
//If the file isn't done uploading, update the progress bar and run this.sendFile again for the next chunk
|
||||||
|
if(chunk < parent.uploadData.numberOfChunks) { |
||||||
|
parent.progressUpdate(chunk + 1); |
||||||
|
parent.sendFile(chunk + 1); |
||||||
|
} |
||||||
|
//If the file is complete uploaded, instantiate the finalizing method
|
||||||
|
else { |
||||||
|
parent.sendFileData(); |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
//Send the file chunk
|
||||||
|
xhr.send(blob); |
||||||
|
}; |
||||||
|
|
||||||
|
//Slice the file into the desired chunk
|
||||||
|
//This is the core of the script. Everything else is just fluff.
|
||||||
|
var blob = this.uploadData.file.slice(start, stop); |
||||||
|
reader.readAsBinaryString(blob); |
||||||
|
}; |
||||||
|
|
||||||
|
//This method is for whatever housekeeping work needs to be completed after the file is finished uploading.
|
||||||
|
//As it's setup now, it passes along the original filename to the server and the server renames the file and removes it form the temp directory.
|
||||||
|
//This function could also pass things like this.uploadData.file.type for the mime-type (although it would be more accurate to use php for that)
|
||||||
|
//Or it could pass along user information or something like that, depending on the context of the application.
|
||||||
|
this.sendFileData = function() { |
||||||
|
var data = 'key=' + this.uploadData.key + '&name=' + this.uploadData.file.name + '&scormid=' + this.scormid; |
||||||
|
xhr = new XMLHttpRequest(); |
||||||
|
xhr.open("POST", parent.settings.scriptPath + '?action=finish', true); |
||||||
|
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); |
||||||
|
|
||||||
|
xhr.onreadystatechange = function() { |
||||||
|
if(xhr.readyState == 4) { |
||||||
|
|
||||||
|
var response = JSON.parse(xhr.response); |
||||||
|
|
||||||
|
//If there's an error, call the error method
|
||||||
|
if(response.errorStatus !== 0 || xhr.status != 200) { |
||||||
|
parent.printResponse(response.errorText, true); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
//Reset the upload-specific data so we can process another upload
|
||||||
|
parent.resetKey(); |
||||||
|
|
||||||
|
//Change the submit button text so it's ready for another upload and spit out a sucess message
|
||||||
|
parent.$(parent.settings.submitButton).value = 'Start Upload'; |
||||||
|
//response.errorText = 'VOTRE CODE : ' + this.scormid;
|
||||||
|
var mess = 'CODEisOK'; |
||||||
|
parent.printResponse(mess, false); |
||||||
|
|
||||||
|
$('#finalNameSrc').html(response.finalName); |
||||||
|
|
||||||
|
parent.success(response); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
//Send the reques
|
||||||
|
xhr.send(data); |
||||||
|
}; |
||||||
|
|
||||||
|
//This method cancels the upload of a file.
|
||||||
|
//It sets this.uploadData.aborted to true, which stops the recursive upload script.
|
||||||
|
//The server then removes the incomplete file from the temp directory, and the html displays an error message.
|
||||||
|
this.abortFileUpload = function() { |
||||||
|
this.uploadData.aborted = true; |
||||||
|
var data = 'key=' + this.uploadData.key; |
||||||
|
xhr = new XMLHttpRequest(); |
||||||
|
xhr.open("POST", this.settings.scriptPath + '?action=abort', true); |
||||||
|
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); |
||||||
|
|
||||||
|
xhr.onreadystatechange = function() { |
||||||
|
if(xhr.readyState == 4) { |
||||||
|
var response = JSON.parse(xhr.response); |
||||||
|
|
||||||
|
//If there's an error, call the error method.
|
||||||
|
if(response.errorStatus !== 0 || xhr.status != 200) { |
||||||
|
parent.printResponse(response.errorText, true); |
||||||
|
return; |
||||||
|
} |
||||||
|
parent.printResponse('File upload was cancelled.', true); |
||||||
|
} |
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
//Send the request
|
||||||
|
xhr.send(data); |
||||||
|
}; |
||||||
|
|
||||||
|
//Pause the upload
|
||||||
|
//Sets this.uploadData.paused to true, which breaks the upload loop.
|
||||||
|
//The current chunk is still stored in this.uploadData.pauseChunk, so the upload can later be resumed.
|
||||||
|
//In a production environment, you might want to have a cron job to clean up files that have been paused and never resumed,
|
||||||
|
//because this method won't delete the file from the temp directory if the user pauses and then leaves the page.
|
||||||
|
this.pauseUpload = function() { |
||||||
|
this.uploadData.paused = true; |
||||||
|
this.printResponse('', false); |
||||||
|
this.$(this.settings.submitButton).value = 'Resume'; |
||||||
|
}; |
||||||
|
|
||||||
|
//Resume the upload
|
||||||
|
//Undoes the doings of this.pauseUpload and then re-enters the loop at the last chunk uploaded
|
||||||
|
this.resumeUpload = function() { |
||||||
|
this.uploadData.paused = false; |
||||||
|
this.$(this.settings.submitButton).value = 'Pause'; |
||||||
|
this.sendFile(this.uploadData.pauseChunk); |
||||||
|
}; |
||||||
|
|
||||||
|
//This method updates a simple progress bar by calculating the percentage of chunks uploaded.
|
||||||
|
//Also includes a method to calculate the time remaining by taking the average time to upload individual chunks
|
||||||
|
//and multiplying it by the number of chunks remaining.
|
||||||
|
this.progressUpdate = function(progress) { |
||||||
|
|
||||||
|
var percent = Math.ceil((progress / this.uploadData.numberOfChunks) * 100); |
||||||
|
this.$(this.settings.progressBarField).style.width = percent + '%'; |
||||||
|
this.$(this.settings.progressBarField).textContent = percent + '%'; |
||||||
|
|
||||||
|
//Calculate the estimated time remaining
|
||||||
|
//Only run this every five chunks, otherwise the time remaining jumps all over the place (see: http://xkcd.com/612/)
|
||||||
|
if(progress % 5 === 0) { |
||||||
|
|
||||||
|
//Calculate the total time for all of the chunks uploaded so far
|
||||||
|
this.uploadData.totalTime += (new Date().getTime() - this.uploadData.timeStart); |
||||||
|
console.log(this.uploadData.totalTime); |
||||||
|
|
||||||
|
//Estimate the time remaining by finding the average time per chunk upload and
|
||||||
|
//multiplying it by the number of chunks remaining, then convert into seconds
|
||||||
|
var timeLeft = Math.ceil((this.uploadData.totalTime / progress) * (this.uploadData.numberOfChunks - progress) / 100); |
||||||
|
console.log(Math.ceil(((this.uploadData.totalTime / progress) * this.settings.chunkSize) / 1024) + 'kb/s'); |
||||||
|
|
||||||
|
//Update this.settings.timeRemainingField with the estimated time remaining
|
||||||
|
this.$(this.settings.timeRemainingField).textContent = timeLeft + ' seconds remaining'; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
//Simple response/error handler
|
||||||
|
this.printResponse = function(responseText, error) { |
||||||
|
this.$(this.settings.responseField).textContent = responseText; |
||||||
|
this.$(this.settings.timeRemainingField).textContent = ''; |
||||||
|
if(error === true) { |
||||||
|
this.$(this.settings.progressBarField).style.backgroundColor = this.settings.progressBarColorError; |
||||||
|
} |
||||||
|
}; |
||||||
|
} |
||||||
@ -0,0 +1,55 @@ |
|||||||
|
|
||||||
|
bigUpload = new bigUpload(); |
||||||
|
bigUpload.scormid = document.getElementById("scormid").value; |
||||||
|
|
||||||
|
function upload() { |
||||||
|
bigUpload.fire(); |
||||||
|
keepProgress(); |
||||||
|
$("#bigUploadSubmit").css('display','none'); |
||||||
|
$(".bigUploadAbort").css('display',''); |
||||||
|
} |
||||||
|
|
||||||
|
function abort() { |
||||||
|
bigUpload.abortFileUpload(); |
||||||
|
$("#bigUploadSubmit").css('display',''); |
||||||
|
$(".bigUploadAbort").css('display','none'); |
||||||
|
} |
||||||
|
|
||||||
|
var refreshCount = 0; |
||||||
|
var refreshpProgress = 1; |
||||||
|
|
||||||
|
function keepProgress(){ |
||||||
|
$("#bigUploadProgressBarFilled").html(refreshpProgress + '%'); |
||||||
|
$("#bigUploadProgressBarFilled").css("width",refreshpProgress + '%'); |
||||||
|
refreshpProgress++; |
||||||
|
if(refreshpProgress>91){ |
||||||
|
refreshpProgress = 80; |
||||||
|
} |
||||||
|
setTimeout('keepProgress()',2000); |
||||||
|
} |
||||||
|
|
||||||
|
function keepAlive(){ |
||||||
|
var kp = document.getElementById('kp'); |
||||||
|
kp.src = kp.src; |
||||||
|
setTimeout('keepAlive()',20000); |
||||||
|
refreshCount++; |
||||||
|
} |
||||||
|
keepAlive(); |
||||||
|
|
||||||
|
function controlAlive(){ |
||||||
|
|
||||||
|
var kp = document.getElementById('bigUploadResponse').innerHTML; |
||||||
|
if (kp.indexOf('CODEisOK')!=-1) { |
||||||
|
var nameSrc = document.getElementById('finalNameSrc').innerHTML; |
||||||
|
if (nameSrc!='') { |
||||||
|
document.getElementById('run').style.display = 'none'; |
||||||
|
document.getElementById('see').style.display = ''; |
||||||
|
var linkact = document.getElementById('linkact').innerHTML; |
||||||
|
window.location = linkact + "&namesrc=" + nameSrc; |
||||||
|
} |
||||||
|
} else { |
||||||
|
setTimeout('controlAlive()',250);
|
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
controlAlive(); |
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,30 @@ |
|||||||
|
|
||||||
|
function addLinkBigUpload(){ |
||||||
|
|
||||||
|
if (!document.getElementById("file_user_file_bu")){ |
||||||
|
|
||||||
|
var ludiiconplus = _p['web_plugin'] + 'chamilo_upload_large/css/import_scorm.png'; |
||||||
|
|
||||||
|
var lbu = $('#linkbu').html(); |
||||||
|
|
||||||
|
var h = '<a id="file_user_file_bu" href="'+lbu +'" '; |
||||||
|
h += ' style="cursor:pointer;" '; |
||||||
|
h += ' alt="large files" title="large files">'; |
||||||
|
h += '<img id="studioeltools" src="'+ ludiiconplus + '" '; |
||||||
|
h += ' alt="large files" title="large files" style="cursor:pointer;" /> '; |
||||||
|
h += '</a>'; |
||||||
|
|
||||||
|
var num = $("#toolbar-upload").length; |
||||||
|
if(num==1){ |
||||||
|
$('#toolbar-upload').find("div:first-child").find("div:first-child").append(h); |
||||||
|
} else { |
||||||
|
$('.actions').append(h); |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
setTimeout(function(){ |
||||||
|
addLinkBigUpload(); |
||||||
|
},300); |
||||||
Loading…
Reference in new issue