So I am trying to learn PHP and JS and wanted to build a file uploader for my home router running OpenWRT. I followed a lot of guides and built one that worked satisfactorily. However, when I started using bigger files (> 5mb) the router itself began to crash. When uploading an 11MB files, the router could crash anywhere between 30%-75% uploaded. I have edited php.ini like suggested by other posts on this site to support larger files and longer php script run times. I also have began to research chunking for file upload, but wanted to confirm where my problem was first. I apologize if my code is sloppy, I am still trying to figure everything out.
function _(el) {
return document.getElementById(el);
}
function uploadFile() {
document.getElementById('progressBar').style.display = "block";
var file = _("file1").files[0];
if(_("file1").files[0] == null){
_("status").innerHTML = "You Must Select a File";
}
else{
// alert(file.name+" | "+file.size+" | "+file.type);
var formdata = new FormData();
formdata.append("file1", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "UPLOADER.php");
ajax.send(formdata);
}
} <form id="upload_form" enctype="multipart/form-data" method="post">
<input type="file" name="file1" id="file1" class="inputfile" data-multiple-caption="{count} files selected" multiple />
<button onclick="uploadFile()" class="buttonUpload">Upload</button>
</form> And my PHP is
<?php
ini_set('upload_max_filesize', '40M');
ini_set('post_max_size', '40M');
ini_set('max_input_time', 300);
ini_set('max_execution_time', 300);
$fileName = $_FILES["file1"]["name"]; // The file name
$fileTmpLoc = $_FILES["file1"]["tmp_name"]; // File in the PHP tmp folder
$fileType = $_FILES["file1"]["type"]; // The type of file it is
$fileSize = $_FILES["file1"]["size"]; // File size in bytes
$fileErrorMsg = $_FILES["file1"]["error"]; // 0 for false... and 1 for true
if (!$fileTmpLoc) { // if file not chosen
echo "ERROR: Please browse for a file before clicking the upload button.";
exit();
}
if(move_uploaded_file($fileTmpLoc, "Home/$fileName")){
echo "$fileName upload is complete";
} else {
echo "move_uploaded_file function failed";
}
?>
So it looks like my problem is that I need to perform the upload using chunking. I have seen all of the plugins such as resumable.js and plupload, but I would really like to understand how to do this within the context of the code I already have. Is that possible?
</div>
