I am very new in php and javascript.I need help by two code changing. I have a file uploading code with chunk option from Plupload. This code upload my file immediately after I choose the file. I need to change the code to upload my file manually with Send button. Next code changing, I need a progress bar to show me the rest time of uploading. This code gave me just a precent number of uploading. Thank you in advance for your help
Here is my index.php:
<!DOCTYPE html>
<html>
<head>
<title>Chunking Upload Demo</title>
<link rel="stylesheet" href="x-dummy.css">
</head>
<body>
<!-- (A) UPLOAD BUTTON & FILE LIST -->
<form>
<div id="list"></div>
<input type="button" id="pick" value="Upload">
</form>
<!-- (B) LOAD PLUPLOAD FROM CDN -->
<!-- https://cdnjs.com/libraries/plupload -->
<!-- https://www.plupload.com/ -->
<script src="js/plupload.full.min.js"></script>
<script>
// (C) INITIALIZE UPLOADER
window.onload = () => {
// (C1) GET HTML FILE LIST
var list = document.getElementById("list");
// (C2) INIT PLUPLOAD
var uploader = new plupload.Uploader({
runtimes: "html5",
browse_button: "pick",
url: "2b-chunk.php",
chunk_size: "10mb",
init: {
PostInit: () => list.innerHTML = "<div>Ready</div>",
FilesAdded: (up, files) => {
plupload.each(files, file => {
let row = document.createElement("div");
row.id = file.id;
row.innerHTML = `${file.name} (${plupload.formatSize(file.size)}) <strong></strong>`;
list.appendChild(row);
});
uploader.start();
},
UploadProgress: (up, file) => {
document.querySelector(`#${file.id} strong`).innerHTML = `${file.percent}%`;
},
Error: (up, err) => console.error(err)
}
});
uploader.init();
};
</script>
</body>
</html>
Here is my upload php code called 2b-chunk.php
<?php
// (A) HELPER FUNCTION - SERVER RESPONSE
function verbose ($ok=1, $info="") {
if ($ok==0) { http_response_code(400); }
exit(json_encode(["ok"=>$ok, "info"=>$info]));
}
// (B) INVALID UPLOAD
if (empty($_FILES) || $_FILES["file"]["error"]) {
verbose(0, "Failed to move uploaded file.");
}
// (C) UPLOAD DESTINATION - CHANGE FOLDER IF REQUIRED!
$filePath = __DIR__ . DIRECTORY_SEPARATOR . "uploads";
if (!file_exists($filePath)) { if (!mkdir($filePath, 0777, true)) {
verbose(0, "Failed to create $filePath");
}}
$fileName = isset($_REQUEST["name"]) ? $_REQUEST["name"] : $_FILES["file"]["name"];
$filePath = $filePath . DIRECTORY_SEPARATOR . $fileName;
// (D) DEAL WITH CHUNKS
$chunk = isset($_REQUEST["chunk"]) ? intval($_REQUEST["chunk"]) : 0;
$chunks = isset($_REQUEST["chunks"]) ? intval($_REQUEST["chunks"]) : 0;
$out = @fopen("{$filePath}.part", $chunk == 0 ? "wb" : "ab");
if ($out) {
$in = @fopen($_FILES["file"]["tmp_name"], "rb");
if ($in) { while ($buff = fread($in, 4096)) { fwrite($out, $buff); } }
else { verbose(0, "Failed to open input stream"); }
@fclose($in);
@fclose($out);
@unlink($_FILES["file"]["tmp_name"]);
} else { verbose(0, "Failed to open output stream"); }
// (E) CHECK IF FILE HAS BEEN UPLOADED
if (!$chunks || $chunk == $chunks - 1) { rename("{$filePath}.part", $filePath); }
verbose(1, "Upload OK");
?>
I tried to find a resolution in internet without any success. I will be happy if someone can give me some help.