Oddly enough if I use this code in a jsfiddle it works perfectly
var file = document.getElementById("file");
function CallAlert(){
alert(file.files[0].name);
}
<form method="post" enctype="multipart/form-data">
<div>
<label for="file">Choose file to upload</label>
<input type="file" id="file" name="file" onchange="CallAlert()">
</div>
<div>
<button>Submit</button>
</div>
</form>
The result of this is an alert with the name of the file
Now on to my issue using this same method in sorts in my case this returns Uncaught TypeError: Cannot read property '0' of undefined
function _(el) {
return document.getElementById(el);
}
function uploadFile() {
var file = _('file1').files[0];
if (typeof file === 'undefined') {
_('status').innerHTML = 'ERROR: Please browse for a file before clicking the upload button';
_('progressBar').value = 0;
} else {
$.get('https://outsource.technologyforthefuture.org/wp-content/plugins/video-contest/shortcodes/handles/upload_handle.php?getsize', function(sizelimit) {
if (sizelimit > file.size) {
var formdata = new FormData();
formdata.append('file1', file);
formdata.append('size', file.size);
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', 'https://outsource.technologyforthefuture.org/wp-content/plugins/video-contest/shortcodes/handles/upload_handle.php');
ajax.send(formdata);
} else {
var sizewarn = 'ERROR: The File is too big! The maximum file size is ';
sizewarn += sizelimit / (1024 * 1024);
sizewarn += 'MB';
_('status').innerHTML = sizewarn;
_('progressBar').value = 0;
}
});
}
}
function progressHandler(event) {
// _('loaded_n_total_bytes').innerHTML = event.loaded+'bytes/''+event.total+'bytes';
// _('loaded_n_total_kb').innerHTML = event.loaded/1024+'kb/''+event.total/1024+'kb';
_('loaded_n_total_mb').innerHTML = Math.round(event.loaded / 1024 / 1024) + 'mb/' + Math.round(event.total / 1024 / 1024) + 'mb';
var percent = (event.loaded / event.total) * 100;
_('progressBar').value = Math.round(percent);
_('percentage_loaded').innerHTML = Math.round(percent) + '%';
if (Math.round(percent) == 100) {
_('status').innerHTML = 'Generating Link Please Wait...';
} else {
_('status').innerHTML = 'uploading... please wait';
}
}
function completeHandler(event) {
_('status').innerHTML = event.target.responseText;
_('progressBar').value = 0;
}
function errorHandler(event) {
_('status').innerHTML = 'Upload Failed';
}
function abortHandler(event) {
_('status').innerHTML = 'Upload Aborted';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="upload_form" enctype="multipart/form-data" method="post">
<input type="file" name="file1" id="file1" onchange="uploadFile()"><br>
<progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
<p class="loading">
<pt id="percentage_loaded"></pt>|
<!--<pt id="loaded_n_total_bytes"></pt>|
<pt id="loaded_n_total_kb"></pt>|-->
<pt id="loaded_n_total_mb"></pt>|
<pt id="status"></pt>
</p>
</form>
What I am trying to do is when a file is selected it sends it as an ajax response to a script to put the file on our server. I dont see how this is producing an error when there is no difference in the example snippet vs my actual code other then the extra stuff around it but I dont see how that could be affecting it.
Perhaps someone smarter then me knows what the answer to this issue is.
instead of this
function uploadFile() {
var file = _('file1').files[0];
...
try this
function uploadFile(event){
var file=event.target.files[0];
...
and don't forget to change this
<input type="file" name="file1" id="file1" onchange="(event)=>uploadFile(event)"><br>
Related
I am making a upload feature for my website. The server runs on NodeJS and Express. The client side is based on EJS. So, there's a progress bar for showing how much of the file has been uploaded, but here's where the problem is, the percentage uploaded does not match the progress bar. The Maths turned out to be fine, I resolved the issue by adjusting the max value in the element from 100 to 150. (I don't know why this works, but it just does, please tell me that too if you know the reason)
Now, this only works on a 1920 x 1080 screen, and not on my phone's screen which is 720 x 480. Therefore, I was wondering how I can adjust the max value with CSS (if there is a way) on the basis of screen size with media queries. Here's my client side JavaScript:
//Upload Handlers and Functions
function _(el) {
return document.getElementById(el);
}
function uploadFile() {
var file = _("file").files[0];
var formdata = new FormData();
formdata.append("file", 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", "/uploadFile");
ajax.send(formdata);
}
//Conversion Functions
function convertInputBytes(input) {
if(input < 1000000) {
output = input / 1000
output = +output.toFixed(2);
output = output + " kilobytes out of "
return output;
} else if(input > 1000000 && input < 1000000000) {
output = input / 1000000
output = +output.toFixed(2);
output = output + " megabytes out of "
return output;
} else if(input > 1000000000 && input < 100000000000000) {
output = input / 1000000000
output = output.toFixed(2);
output = output + " gigabytes out of "
return output;
}
}
function convertOutputBytes(input) {
if(input < 1000000) {
output = input / 1000
output = +output.toFixed(2);
return output;
} else if(input > 1000000 && input < 1000000000) {
output = input / 1000000
output = +output.toFixed(2);
return output;
} else if(input > 1000000000 && input < 100000000000000) {
output = input / 1000000000
output = output.toFixed(2);
return output;
}
}
//Error and progress handlers
function progressHandler(event) {
_("loaded_n_total").innerHTML = "Uploaded " + convertInputBytes(event.loaded) + convertOutputBytes(event.total)
var percent = (event.loaded / event.total) * 100;
_("progressBar").value = percent;
_("status").innerHTML = Math.round(percent) + "% uploaded";
}
function completeHandler(event) {
_("status").innerHTML = event.target.responseText;
_("progressBar").value = 0;
document.getElementById("displayedFileName").innerHTML = "Choose another file"
}
function errorHandler(event) {
_("status").innerHTML = "Upload Failed";
}
function abortHandler(event) {
_("status").innerHTML = "Upload Aborted";
}
And my HTML for the upload form:
<form id="upload_form" enctype="multipart/form-data" method="post">
<ul class = "actions fit">
<li><label class = "button fit"><input type="file" name="file" style = "display:none;" id="file" onchange = "uploadFile()"><i id = "displayedFileName">Choose File</i></label><li>
</ul>
<progress id="progressBar" value="0" step = "0.001" max="112"></progress>
<h2 style = "text-align: center;" id="status"></h2>
<h3 style = "text-align: center;" id="loaded_n_total"></h3>
</form>
For a responsive design, use relative length units such as vw:
<progress id="progressBar" value="0" step = "0.001" max="100" style="width:80vw"></progress>
Basically i have to upload file by chunks as the file is very big,i tried using this solution uploading a file in chunks using html5 but the file is corrupt because the file reconstructed is not in order.
I tried to implement the answer given in the link but i really confused how can i implement it on my php page and my html page. If you guys could give me an advice or a way of doing it, that would be great. Thank you for your time.
The code :
upload.php
<?php
$target_path = "/home/imagesdcard/www/";
$tmp_name = $_FILES['fileToUpload']['tmp_name'];
$size = $_FILES['fileToUpload']['size'];
$name = $_FILES['fileToUpload']['name'];
$target_file = $target_path . basename($name);
$complete = "test.txt";
$com = fopen("/home/imagesdcard/www/".$complete, "ab");
error_log($target_path);
// Open temp file
$out = fopen($target_file, "wb");
if ( $out ) {
// Read binary input stream and append it to temp file
$in = fopen($tmp_name, "rb");
if ( $in ) {
while ( $buff = fread( $in, 1024) ) {
fwrite($out, $buff);
fwrite($com, $buff);
}
}
fclose($in);
fclose($out);
}
fclose($com);
?>
html
<!DOCTYPE html>
<html>
<head>
<title>Upload Files using XMLHttpRequest</title>
<script type="text/javascript">
window.BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder;
function sendRequest() {
var blob = document.getElementById('fileToUpload').files[0];
const BYTES_PER_CHUNK = 1048576; // 1MB chunk sizes.
const SIZE = blob.size;
var i=0;
var start = 0;
var end = BYTES_PER_CHUNK;
while( start < SIZE ) {
var chunk = blob.slice(start, end);
uploadFile(chunk,i);
i++;
start = end;
end = start + BYTES_PER_CHUNK;
}
}
function fileSelected() {
var file = document.getElementById('fileToUpload').files[0];
if (file) {
var fileSize = 0;
if (file.size > 1024 * 1024)
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
else
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
}
}
function uploadFile(blobFile,part) {
//var file = document.getElementById('fileToUpload').files[0];
var fd = new FormData();
fd.append("fileToUpload", blobFile);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", "upload.php?num="+part);
xhr.onload = function(e) {
alert("loaded!");
};
xhr.send(fd);
//alert("oen over");
}
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
}
else {
document.getElementById('progressNumber').innerHTML = 'unable to compute';
}
}
function uploadComplete(evt) {
/* This event is raised when the server send back a response */
alert(evt.target.responseText);
}
function uploadFailed(evt) {
alert("There was an error attempting to upload the file.");
}
function uploadCanceled(evt) {
xhr.abort();
xhr = null;
//alert("The upload has been canceled by the user or the browser dropped the connection.");
}
</script>
</head>
<body>
<form id="form1" enctype="multipart/form-data" method="post" action="upload.php">
<div class="row">
<label for="fileToUpload">Select a File to Upload</label><br />
<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>
<input type="button" value="cancel" onClick="uploadCanceled();"/>
</div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div class="row">
<input type="button" onclick="sendRequest();" value="Upload" />
</div>
<div id="progressNumber"></div>
</form>
</body>
</html>
Your script doesn't work because js is async.
You should change your code to:
xhr.open("POST", "upload.php?num="+part, false);
and file save fine.
My solution for upload big files by chunk.
upload.php (php part)
<?php
session_start();
if($_SERVER["REQUEST_METHOD"] == "POST")
{
$chunk = $_FILES["chunk"]["tmp_name"];
$filename = $_POST['filename'];
if(!isset($_SESSION[$filename]))
{
$_SESSION[$filename] = tempnam(sys_get_temp_dir(), 'upl');
}
$tmpfile = $_SESSION[$filename];
if(isset($chunk))
{
file_put_contents($tmpfile, file_get_contents($chunk), FILE_APPEND);
}
else
{
rename($tmpfile, $filename);
}
exit();
}
?>
upload.php (html\js part)
<!DOCTYPE html>
<html>
<head>
<title>Upload Files using XMLHttpRequest</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
function sendRequest() {
// 1MB chunk sizes.
var chunk_size = 1048570;
var file = document.getElementById('file').files[0];
var filesize = file.size;
var filename = file.name;
var pos = 0;
while(pos < filesize) {
let chunk = file.slice(pos, pos+chunk_size);
pos += chunk_size;
var data = new FormData();
data.append('chunk', chunk);
data.append('filename', filename);
$.ajax({url:'upload.php',type: 'post',async:false,data: data,processData: false,contentType: false});
let percentComplete = Math.round(pos * 100 / filesize);
document.getElementById('progressNumber').innerHTML = (percentComplete > 100 ? 100 : percentComplete) + '%';
}
$.post('upload.php',{filename:filename});
}
</script>
</head>
<body>
<form>
<div class="row">
<label for="file">Select a File to Upload</label><br />
<input type="file" name="file" id="file" onchange="sendRequest();"/>
</div>
<div id="progressNumber"></div>
</form>
</body>
</html>
but this code have one bug - progress bar don't work in chrome because sync request used, work only in firefox.
I'm trying to create a multi-file upload system, however the length property of the fileInput.files.length is undefined.
Uncaught TypeError: Cannot read property 'length' of undefined
I have tried adding and removing the square brackets from document.getElementById("file1[]")
Assigning fileInput.files to another variable and calling thatVariable.length
Both did not work.
Since this is a multi file upload system, I need it to be in an array.
HTML CODE:
<form action='/' method='post' enctype="multipart/form-data" id='file'>
<button type="button" onclick="document.getElementById('file1').click(); return false;" class="btn btn-primary" id='choosefile'><span class='glyphicon glyphicon-open-file'></span> Choose File</button><br>
<b id="filename"></b><br>
<input type="text" placeholder="New File Name" id="fileplaceholder">
<input type="file" id="file1" name="file1[]" style="visibility: hidden" onchange="filenameprint()" multiple>
<button type="button" onclick="uploadCloud()" class='btn btn-success' id='uploadfile'><span class="glyphicon glyphicon-upload"></span> Upload File</button><br>
<br>
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40"
aria-valuemin="0" aria-valuemax="1" style="width:0%" id='progress'>
<span id='uploadpercent'></span>
</div>
</div>
<span id='loaded'></span>
<script>
function filenameprint() {
var file1 = document.getElementById('file1').value;
if (!empty(file1)) {
document.getElementById('filename').innerHTML = file1;
} else {
document.getElementById('filename').innerHTML = "No File Chosen"
}
}
</script>
</form>
Javascript Code:
function uploadCloud() {
//Sets the Progress Bar to 0
_('progress').style.width = "0%";
//Get's the Upload File Button Object Reference
var fileInput = document.getElementsByName("file1[]");
var formData = false;
//Declares the Form Data Object
if (window.FormData) {
formData = new FormData();
}
var file, reader;
console.log((fileInput.files).length);
for (var i = 0; i < fileInput.files.length; i++) {//ERROR COMES FROM HERE!!!
file = fileInput.files[i];
if (window.FileReader) {
reader = new FileReader();
reader.onloaded = function (e) {
}
reader.readAsDataURL(file);
}
if (formData) {
formData.append('file1', file);
}
}
if (formData) {
$.ajax({
url: '/uploadCloud.php', //Server script to process data
type: 'POST',
// Form data
data: formData,
//Options to tell jQuery not to process data or worry about content-type.
cache: false,
contentType: false,
processData: false,
xhr: function () { // Custom XMLHttpRequest
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) { // Check if upload property exists
myXhr.upload.addEventListener('progress', progressHandlingFunction, false); // For handling the progress of the upload
}
console.log(myXhr);
return myXhr;
},
beforeSend: function () {
_('uploadfile').setAttribute('disabled', 'disabled');
_('choosefile').setAttribute('disabled', 'disabled');
},
//Ajax events
success: function (data) {
if (data == 0) {
_('loaded').innerHTML = "";
_('progress').style.width = "0%";
_('filename').innerHTML = "<b>No File</b>"
} else {
_("filename").innerHTML = data;
}
_('uploadpercent').innerHTML = "";
_('loaded').innerHTML = "";
_('uploadfile').removeAttribute('disabled');
_('choosefile').removeAttribute('disabled');
_('progress').style.width = "0%";
},
});
function progressHandlingFunction(e) {
if (e.lengthComputable) {
_('progress').style.width = (e.loaded / e.total) * 100 + "%";
_('uploadpercent').innerHTML = Math.round((e.loaded / e.total) * 100) + "% complete (" + _('filename').innerHTML + ")";
_('loaded').innerHTML = "Upload " + Math.round((e.loaded / e.total) * 100) + "% complete [" + e.loaded + " bytes loaded of " + e.total + " bytes total]";
}
}
} else {
_("filename").innerHTML = "<b>No File</b>"
}
}
Because
var fileInput = document.getElementsByName("file1[]");
is a collection and you act like it is a single element. You need to reference the individual elements.
fileInput[0].files
html code
<form method="post" name="file_upload" enctype="multipart/form-data" id="file_upload">
<input type="file" id="_file" name="_file"> <br>
<input type="button" id="button" value="upload"/> <br>
<progress id="p_bar" value="0" max="100" style="width:300px;"> </progress>
</form>
<p id="status"> </p>
<script src="final.js" > </script>
js
var sfile = document.getElementById('_file') ;
var btn = document.getElementById('button') ;
var f_upload= document.getElementById('file_upload') ;
var pbar = document.getElementById('p_bar') ;
var sbar = document.getElementById('status') ;
function upload () {
if(sfile.files.length==0) {
alert("files isn't select ") ;
}
var s_file = sfile.files[0] ;
var formdata = new FormData () ;
formdata.append( 'selected file ',s_file) ;
var ajax = new XMLHttpRequest () ;
ajax.upload.addEventListener("progress", progress , false ) ;
function progress (event) {
var percent = (event.loaded / event.total) * 100 ;
pbar.value = Math.round(percent) ;
sbar.innerHTML = Math.round(percent)+"%.........uploaded" ;
}
ajax.open("POST", "final.php") ;
ajax.send(formdata) ;
}
btn.addEventListener("click", upload , false ) ;`
PHP
<?php
$file_name = $_FILES['_file']['name'] ;
$file_temp = $_FILES['_file']['tmp_name'] ;
$file_size = $_FILES['_file']['size'] ;
$file_type = $_FILES['_file']['type'] ;
$file_error = $_FILES['_file']['size'] ;
$file_destination = "upload/".basename($file_name) ;
if( move_uploaded_file($file_temp, $file_destination) ) {
echo "file uploaded" ;
}
else {
echo " file is failed to upload " ;
}
In these no working on php . if i only put echo still not output in main page . also if in php we caught with name tag in html than why use of send function in ajax.like ajax.send(formdata)
the problem here is you are not looking for ajax response.try this:
<script>
var sfile = document.getElementById('_file');
var btn = document.getElementById('button');
var f_upload= document.getElementById('file_upload');
var pbar = document.getElementById('p_bar');
var sbar = document.getElementById('status');
var ajax = null;
function upload () {
if(sfile.files.length==0) {
alert("files isn't select ");
return;
}
var s_file = sfile.files[0];
var formdata = new FormData();
formdata.append('_file',s_file);//your key is _file
ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progress , false);
ajax.open("POST", "final.php");
ajax.onreadystatechange = OnStateChange;
ajax.send(formdata);
}
btn.addEventListener("click", upload , false);
function progress (event) {
var percent = (event.loaded / event.total) * 100;
pbar.value = Math.round(percent);
sbar.innerHTML = Math.round(percent)+"%.........uploaded";
}
function OnStateChange () {
if (ajax.readyState == 4 && ajax.status == 200) {
var resp = ajax.responseText;
alert(resp);
}
}
</script>
I am using javascript to check file size. If it is bigger than 1m it shows an alert and after that it redirect to index page.
I want know how to make it stay in the same page without redirect and without refresh and keep all page information inserted by user as it is.
This is the code:
if(fileInput.files[0].size > 1050000) {
alert('File size is bigger than 1Mb!');
return false;
}
the hole code:
var handleUpload = function(event){
event.preventDefault();
event.stopPropagation();
var fileInput = document.getElementById('file');
var data = new FormData();
data.append('javascript', true);
if(fileInput.files[0].size > 1050000) {
//document.getElementById("image_id").innerHTML = "Image too big (max 1Mb)";
alert('File bigger than 1Mb!');
//window.location="upload.php";
return false;
}
for (var i = 0; i < fileInput.files.length; ++i){
data.append('file[]', fileInput.files[i]);
}
var request = new XMLHttpRequest();
request.upload.addEventListener('progress', function(event){
if(event.lengthComputable){
var percent = event.loaded / event.total;
var progress = document.getElementById('upload_progress');
while (progress.hasChildNodes()){
progress.removeChild(progress.firstChild);
}
progress.appendChild(document.createTextNode(Math.round(percent * 100) +' %'));
document.getElementById("loading-progress-17").style.width= Math.round(percent * 100) +'%';
}
});
request.upload.addEventListener('load', function(event){
document.getElementById('upload_progress').style.display = 'none';
});
request.upload.addEventListener('error', function(event){
alert('Upload failed');
});
request.addEventListener('readystatechange', function(event){
if (this.readyState == 4){
if(this.status == 200){
var links = document.getElementById('uploaded');
var uploaded = eval(this.response);
var div, a;
for (var i = 0; i < uploaded.length; ++i){
div = document.createElement('div');
a = document.createElement('a');
a.setAttribute('href', 'files/' + uploaded[i]);
a.appendChild(document.createTextNode(uploaded[i]));
div.appendChild(a);
links.appendChild(div);
}
}else{
console.log('server replied with HTTP status ' + this.status);
}
}
});
request.open('POST', 'upload.php');
request.setRequestHeader('Cache-Control', 'no-cache');
document.getElementById('upload_progress').style.display = 'block';
request.send(data);
}
window.addEventListener('load', function(event){
var submit = document.getElementById('submit');
submit.addEventListener('click', handleUpload);
});
the upload.php code with the html
<?php
foreach($_FILES['file']['name'] as $key => $name){
if ($_FILES['file']['error'][$key] == 0 && move_uploaded_file($_FILES['file']['tmp_name'][$key], "files/{$name}")){
$uploaded[] = $name;
}
}
if(!empty($_POST['javascript'])){
die(json_encode($uploaded));
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="upload.js"></script>
</head>
<body>
<div id="uploaded">
<?php
if (!empty($uploaded)){
foreach ($uploaded as $name){
echo '<div>',$name,'</div>';
}
}
?>
</div>
<div id="upload_progress"></div>
<div>
<form action="" method="post" enctype="multipart/form-data">
<input type="file" id="file" name="file[]" />
<input type="submit" id="submit" value="upload" />
</form>
Thanks in advance
You may get rid of return it should work. Else, maybe you should try modals instead of alerts. They are more neat and pretty
Return false is preventing the redirect.
var val = $("#inputId").val();
if (val >= 0 || val <=9)
{
return true;
}
else
{
alert("Enter Digits Only");
return false;
}
```
Add event.preventDefault(); below the alert function.
This may help you to stay on the same page.