While it works well in PHP,
I have created a JS file and run it and it does not work.
No error message is displayed.
upload.js
var dropArea = document.documentElement; // drop area zone JS object
var progress = document.getElementById('progress'); // text zone where informations about uploaded files are displayed
var list = []; // file list
var nbDone = 0; // initialisation of nb files already uploaded during the process.
var nb=null;
var nbUploaded = null;
var oldColor = null;
var uploadError = false;
// main initialization
(function(){
// init handlers
function initHandlers() {
dropArea.addEventListener('drop', handleDrop, false);
dropArea.addEventListener('dragover', handleDragOver, false);
}
// drag over
function handleDragOver(event) {
event.stopPropagation();
event.preventDefault();
oldColor = dropArea.style.color;
dropArea.style.color='red';
//dropArea.className = 'hover';
}
// drag drop
function handleDrop(event) {
dropArea.style.color=oldColor;
event.stopPropagation();
event.preventDefault();
processFiles(event.dataTransfer.files);
}
// process bunch of files
function processFiles(filelist) {
if (!filelist || !filelist.length || list.length) return;
for (var i = 0; i < filelist.length && i < 500; i++) { // limit is 500 files (only for not having an infinite loop)
nbUploaded=filelist.length;
list.push(filelist[i]);
}
uploadNext();
}
// upload file
function uploadFile(file, status) {
// prepare XMLHttpRequest
var xhr = new XMLHttpRequest();
xhr.open('POST', 'index.php?copy='+document.getElementById('upload-copy').value);
xhr.onload = function() {
uploadNext();
nbUploaded--;
};
var totalTmp = 0;
if ( xhr.upload ) {
xhr.upload.onprogress = function(e) {
var done = e.position || e.loaded, total = e.totalSize || e.total;
totalTmp = e.total;
var pourcentage = Math.floor(done/total*1000)/10;
var progressMessage = "File : " + file['name'] + " ("+file['type']+") progress : " + pourcentage + "%" + " ("+done+"/"+total+" octets)";
var fileDiv = document.getElementById('file_'+nbDone+'');
fileDiv.textContent = progressMessage;
};
}
xhr.onreadystatechange = function() {
if(xhr.readyState == 4){
console.log(xhr);
var progressMessage = "File : " + file['name'] + " ("+file['type']+") progress : 100%" + " (" + file['size'] + " octets) : ";
urlMessage = '<a href="index.php?f='+xhr.responseText+'">'+xhr.responseText+'</a>';
var fileDiv = document.getElementById('file_'+nbDone+'');
fileDiv.innerHTML = progressMessage + urlMessage;
console.log(nbUploaded);
if(nbUploaded==1){
dropArea.style.color='#000';
}
}
};
xhr.onerror = function() {
var progressMessage = "File : " + file['name'] + " ("+file['type']+") upload error";
var fileDiv = document.getElementById('file_'+nbDone+'');
fileDiv.textContent = progressMessage;
uploadNext();
nbUploaded--;
if(nbUploaded==1){
dropArea.style.color='#000';
}
};
// prepare and send FormData
var formData = new FormData();
formData.append('myfile', file);
xhr.send(formData);
}
// upload next file
function uploadNext() {
if (list.length) {
nb = list.length - 1;
nbDone +=1;
var strTemp = '<div id="file_'+nbDone+'"></div>';
progress.innerHTML += strTemp;
var nextFile = list.shift();
var sizeMax = <?php echo $upload_b;?>;
if (nextFile.size >= sizeMax) { // 20Mb = generally the max file size on PHP hosts
var progressMessage = "File : " + nextFile['name'] + " ("+nextFile['type']+") File Too big (" + nextFile['size'] + " > "+sizeMax+")";
var fileDiv = document.getElementById('file_'+nbDone+'');
fileDiv.textContent = progressMessage;
uploadError = true;
uploadNext();
nbUploaded--;
if(nbUploaded==1){
dropArea.style.color='#000';
}
} else {
uploadFile(nextFile, status);
}
}
}
initHandlers();
})();
index.php (There are not a few of PHP’s)
<?
$max_upload = (int)(ini_get('upload_max_filesize'));
$max_post = (int)(ini_get('post_max_size'));
$memory_limit = (int)(ini_get('memory_limit'));
$upload_mb = min($max_upload, $max_post, $memory_limit);
$upload_b = $upload_mb * 1024 * 1024;
?><!DOCTYPE html><html lang="fr">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Up</title><meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, user-scalable=yes">
<link rel="apple-touch-icon" href="favicon.png">
<link rel="shortcut icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<body>
<div id="content">
<section id="midle">
<div class="upload_form_cont">
<?php if(!empty($serverMsg)){?>
<div class="error"><?php echo $serverMsg;?></div>
<?php }else{?>
<div class="info">
<div id="upload-zone">Drop your files :-)</div>
</div>
<div>Number of available copies : <input type="text" id="upload-copy" value="1"></input></div>
<?php }?>
<div>Max upload size : <?php echo $upload_mb;?> Mb</div>
<div id="progress"></div>
</div>
</section>
<div class="progress"></div>
<script src="upload.js"></script>
</div>
</body>
</html>
It works fine in php, but it does not work if you create a separate file called js.
Advertisement
Answer
You have some PHP code left in your .js, in uploadNext():
var sizeMax = <?php echo $upload_b;?>;
Because this is detached from your file this sizeMax variable won’t get set. So you need another way to get sizeMax accessible by javascript.
I suggest you do the following, in index.php, in the <head> (by the way you are missing </head>:
<script type='text/javascript'>var maxUpload = <?php echo $upload_b; ?>;</script>
Then modify your js code sizeMax line
var sizeMax = maxUpload;