I’ve written a drag and drop webpage to upload XML files. It has HTML and JavaScript, jquery.js and jquery.form.js libraries on the client. Uses AJAX, processed by PHP in the server. I didn’t so much write it as piece it together from excerpts on Stack Overflow; I’m not a programmer.
The problem: when I wrote it 18 months ago, it worked perfectly, even on Netbeans IDE and localhost in WAMPserver.
Now it doesn’t work locally – when you try to upload an XML file it doesn’t upload in Netbeans, but the XML file opens in the browser. All browsers – Edge/Firefox/Chrome. The line "e.preventdDefault();" should not allow that?
The same code does still work on the live (internet) webpage, files upload correctly.
Questions:
- What am I doing wrong? Have I inadvertently changed a setting in Netbeans that breaks the code? Or making some basic, stupid mistake?
- Is it elsewhere e.g. AJAX, or the PHP file that processes the upload?
- Is it something else e.g. browsers have updated, breaking the code?
HTML
<!DOCTYPE html>
<html>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/bootstrap.min.css"/>
<body>
<h3>Upload a file in XML format</h3>
<p>
Either: upload one or multiple (up to 100) XML files by dragging and dropping anywhere on this page.
</p>
<p>
Or: press the <i>Choose File</i> button , browse to the XML file, then click <i>Upload</i>.
</p>
<form id="uploadForm" enctype="multipart/form-data" method="post">
<input type="hidden" name="MAX_FILE_SIZE" value="200000">
<input id="fileInput" name="uploadXMLs[]" type="file" accept=".xml" multiple="multiple">
<br>
<br>
<input type="submit" name="submit" value="Upload">
</form>
<!-- Display upload status -->
<div id="uploadStatus"></div>
<div class="progress">
<div class="progress-bar"></div>
</div>
<!-- List of uploaded files -->
<div id="uploadList"></div>
<script src="../js/jquery.js"></script>
<script src="../js/jquery.form.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/uploadFiles.js"></script>
<script src="../js/dragdropUpload.js"></script>
</body>
</html>
dragdropUpload.js
$
(document).on("dragover drop", function(e) {
e.preventDefault();
}).on("drop", function(e) {
$("input[type='file']")
.prop("files", e.originalEvent.dataTransfer.files)
.closest("#uploadForm")
.submit();
});
uploadFiles.js
$(document).ready(function(){
/* File upload via Ajax */
$("#uploadForm").on('submit', function(e){
e.preventDefault();
/* commented out line shows loading icon e.g. circle of dots... not yet included: $('#loader-icon').show(); */
$.ajax({
/* include bootstrap progress bar via xhr... no, me neither, code from stackoverflow */
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = ((evt.loaded / evt.total) * 100);
/* show status and progress bar with percentage written on it */
$(".progress").show();
$(".progress-bar").width(percentComplete + '%');
$(".progress-bar").html(percentComplete+'%');
}
}, false);
return xhr;
},
type: 'POST',
/* include debugging... for development, not in real life: url: '../php/submit_xml.php?XDEBUG_SESSION_START=netbeans-xdebug' */
url: '../php/submit_xml.php',
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
beforeSend: function(){
$('#uploadStatus').html('Uploading...');
$("#uploadStatus").show();
},
error:function(){
/* commented out line hides loading icon e.g. circle of dots... not yet included: $('#loader-icon').hide(); */
$('#uploadStatus').html('<span style="color:var(--acc_red);">Upload failed, please try again.<span>');
},
success: function(data){
/* commented out line hides loading icon e.g. circle of dots... not yet included: $('#loader-icon').hide(); */
$('#uploadForm')[0].reset();
/* php echos "0" if no files, maximum limit (5 or 100) if too many files, or string of file names in HTML list tags */
if (data === '0') {
$('#uploadStatus').html('<span style="color:var(--acc_red);">No file chosen<span>');
} else if ((data === '5') || (data == '100')) {
/* bad design... constants hard-coded, must match hard-coded constants in php */
$('#uploadStatus').html('<span style="color:var(--acc_red);">Too many files, maximum allowed is ' + data + '<span>');
} else {
/* match then strip off number of errors... last chars after </ul> tag */
var matches = data.match(/d+$/);
var badCount = parseInt(matches[0]);
var numDigits = matches[0].length;
data = data.slice (0, -numDigits);
/* display message */
if (badCount === 0) {
$('#uploadStatus').html('<span style="color:var(--acc_dark_green);">Files uploaded successfully, processed with 0 errors <span>');
} else {
$('#uploadStatus').html('<span style="color:var(--acc_red);">Files uploaded, processed with ' + badCount + ' errors <span>');
}
/* show uploaded file list */
$('#uploadList').html(data);
$('#uploadList').show();
}
}
});
});
});
I actually downloaded the files from the working, live webpage. They kdiff as identical text, (different line returns/carriage feeds – I’m on a windows PC). But still it doesn’t work.
I’m not really knowledgeable enough about Netbeans or JavaScript to even know where to begin looking for an answer. Hopefully someone can spot a simple mistake I’ve made.
Thanks in advance,
Rob
New contributor
rob79 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.