I am creating simple CMS for uploading AR Vuforia Markers for my mobile app. I have working php form that is:
- Uploading one image (target) to server
- That target sending to Vuforia Cloud
- Uploading data from form to database
- Uploading other files to server
So everything is working correctly, but now I am trying to display popup after clicking submit with status informations.
Simple popup with text:
- Uploading target to server
- Sending target to Vuforia Cloud
- Uploading data from form to database
- Uploading other files to server
after every step is completed text is just colouring in green (in error case on red) and at the end unlocking OK button. I trying different solutions from here with progress bar i.e. Display progress bar while the php script is running through ajax in spite of various attempts, I am still doing something wrong. I know that jquery is not my strong side.
form file (insert_gallery.php) is:
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex">
<meta name="googlebot" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../fontawesome-free-5.13.0-web/css/all.css" />
<link rel="stylesheet" href="../css/main.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.progress {
display: block;
text-align: center;
width: 0;
height: 3px;
background: red;
transition: width .3s;
}
.progress.hide {
opacity: 0;
transition: opacity 1.3s;
}
</style>
</head>
<body>
<div class="progress">
<div class="progress-bar" role="progressbar"></div>
</div>
<div class="col" id="config_main_window">
<form method="post" class="form-horizontal" enctype="multipart/form-data" action="vuforia/upload_gallery.php" id="upload_target">
<div class="title">TARGET</div>
<div class = "row" id="markerRow" >
<div class="form-group" style="display: flex; float: left">
<label for="markerfile" class="media-desc"><span style="color: red">* </span>target (.jpg)</label>
<input name="markerfile" id="markerfile" type="file" class="form-control" onchange="targetAdded()" style="border: none;" required>
<canvas id="markerCanvas" style="max-width: 100px; max-height: 100px"></canvas>
</div>
<div class="form-group" style="display: inline-block; float: right">
<label for="category" class="media-desc"><span style="color: red">* </span>category:</label>
<select id="category" name="category" size="1" class="custom-select">
<option value="education">Education</option>
<option value="entertainment">Entertainment</option>
<option value="shopping"> Shopping </option>
<option value="contests"> Contests </option>
<option value="games"> Games </option>
</select>
</div>
<div class="form-group" style="display: inline-block; margin-right: 50px; float: right">
<label for="for_adults" class="media-desc"><input type="checkbox" class="form-control" id="for_adults" name="for_adults" style="margin-right: 5px">+18</label>
</div>
<div class="form-group" style="display: inline-block; margin-right: 50px; float: right">
<label for="is_active" class="media-desc"><input type="checkbox" class="custom-checkbox" id="is_active" name="is_active" style="margin-right: 5px">active</label>
</div>
</div>
<div class = "row" style="height: 40px">
<div class="form-group">
<input name="target_name" id="target_name" type="text" class="form-control-input" placeholder="Title..." required>
<input name="target_client" id="target_client" type="text" class="form-control-input" style="margin-left: 6px;" placeholder="Client..." required>
</div>
</div>
<div class = "row" style="padding-bottom: 25px">
<div class="form-group">
<textarea name="target_desc" id="target_desc" class="form-control-textarea" style="resize: none;" placeholder="Opis..." required></textarea>
</div>
</div>
<div class = "row" style="height: 30px">
<div class="form-group" style="display: flex; float: left">
<label for="mediafile1" class="media-desc"><span style="color: red">* </span>photo 1 (.jpg or .png)</label>
<input name="mediafile1" id="mediafile1" type="file" class="form-control" onchange="targetAdded()" style="border: none;">
</div>
<div class="form-group" style="display: flex; float: left">
<label for="mediafile2" class="media-desc"> photo 2 (.jpg or .png)</label>
<input name="mediafile2" id="mediafile2" type="file" class="form-control" onchange="targetAdded()" style="border: none;">
</div>
</div>
<div class = "row" style="margin-left: 9px; height: 30px">
<div class="form-group" style="display: flex; float: left">
<label for="mediafile3" class="media-desc"> photo 3 (.jpg or .png)</label>
<input name="mediafile3" id="mediafile3" type="file" class="form-control" onchange="targetAdded()" style="border: none;">
<canvas id="markerCanvas" style="max-width: 100px; max-height: 100px"></canvas>
</div>
<div class="form-group" style="display: flex; float: left">
<label for="mediafile4" class="media-desc"> photo 4 (.jpg or .png)</label>
<input name="mediafile4" id="mediafile4" type="file" class="form-control" onchange="targetAdded()" style="border: none;">
</div>
</div>
<div class = "row" style="margin-left: 9px; height: 30px">
<div class="form-group" style="display: flex; float: left">
<label for="mediafile5" class="media-desc"> photo 5 (.jpg or .png)</label>
<input name="mediafile5" id="mediafile5" type="file" class="form-control" onchange="targetAdded()" style="border: none;">
</div>
<div class="form-group" style="display: flex; float: left">
<label for="mediafile6" class="media-desc"> photo 6 (.jpg or .png)</label>
<input name="mediafile6" id="mediafile6" type="file" class="form-control" onchange="targetAdded()" style="border: none;">
</div>
</div>
<div class = "row" style="margin-left: 9px; height: 30px">
<div class="form-group" style="display: flex; float: left">
<label for="mediafile7" class="media-desc"> photo 7 (.jpg or .png)</label>
<input name="mediafile7" id="mediafile7" type="file" class="form-control" onchange="targetAdded()" style="border: none;">
</div>
<div class="form-group" style="display: flex; float: left">
<label for="mediafile8" class="media-desc"> photo 8 (.jpg or .png)</label>
<input name="mediafile8" id="mediafile8" type="file" class="form-control" onchange="targetAdded()" style="border: none;">
</div>
</div>
<div class = "row" style="margin-left: 9px; height: 30px">
<div class="form-group" style="display: flex; float: left">
<label for="mediafile9" class="media-desc"> photo 9 (.jpg or .png)</label>
<input name="mediafile9" id="mediafile9" type="file" class="form-control" onchange="targetAdded()" style="border: none;">
</div>
<div class="form-group" style="display: flex; float: left">
<label for="mediafile10" class="media-desc"> photo 10 (.jpg or .png)</label>
<input name="mediafile10" id="mediafile10" type="file" class="form-control" onchange="targetAdded()" style="border: none;">
</div>
</div>
<br><br>
<div class="title">NEWSFEED</div>
<div class="form-group" style="display: inline-block; margin-right: 50px;">
<label for="newsfeed" class="media-desc"><input type="checkbox" class="form-control" id="newsfeed" name="newsfeed" style="margin-right: 5px">show in newsfeed</label>
</div>
<div class="form-group" style="display: inline-block; margin-right: 50px;">
<label for="time_campaign" class="media-desc"><input type="checkbox" class="form-control" id="time_campaign" name="time_campaign" style="margin-right: 5px">time campaign</label>
</div>
<div class = "row" style="margin-left: 9px; height: 30px; padding-top:20px">
<div class="form-group" style="display: flex; float: left">
<label for="main_photo" class="media-desc">photo (newsfeed) (.jpg lub .png)</label>
<input name="main_photo" id="main_photo" type="file" class="form-control" onchange="targetAdded()" style="border: none;">
</div>
<div class="form-group" style="display: flex; float: left">
<label for="main_video" class="media-desc">video (newsfeed) (.mp4)</label>
<input name="main_video" id="main_video" type="file" class="form-control" onchange="targetAdded()" style="border: none;">
</div>
</div>
<div class = "row" style="padding-bottom: 5px">
<div class="form-group">
<textarea name="short_desc" id="short_desc" class="form-control-textarea" style="resize: none;" maxlength="80" placeholder="Short description..." required></textarea>
</div>
</div>
<div class = "row" style="padding-bottom: 25px">
<div class="form-group">
<textarea name="long_desc" class="form-control-textarea" style="resize: none;" placeholder="Long description..." required></textarea>
</div>
</div>
<div class="form-group">
<input type="button" id="submit" value="Submit">
</div>
</form>
</div>
</div>
</div>
<script>
$(function() {
// Set onclick
let markerfile = $('#markerfile');
let category = $('#category');
let for_adults = $('#for_adults');
let is_active = $('#is_active');
let target_name = $('#target_name');
let target_client = $('#target_client');
let target_desc = $('#target_desc');
let mediafile1 = $('#mediafile1');
let mediafile2 = $('#mediafile2');
let mediafile3 = $('#mediafile3');
let mediafile4 = $('#mediafile4');
let mediafile5 = $('#mediafile5');
let mediafile6 = $('#mediafile6');
let mediafile7 = $('#mediafile7');
let mediafile8 = $('#mediafile8');
let mediafile9 = $('#mediafile9');
let mediafile10 = $('#mediafile10');
let newsfeed = $('#newsfeed');
let time_campaign = $('#time_campaign');
let main_photo = $('#main_photo');
let main_video = $('#main_video');
let short_desc = $('#short_desc');
let long_desc = $('#long_desc');
let dataString = 'markerfile='+ markerfile + '&category=' + category + '&for_adults=' + for_adults + '&is_active=' + is_active + '&target_name=' + target_name + '&target_client=' + target_client + '&target_desc=' + target_desc + '&newsfeed=' + newsfeed + '&time_campaign=' + time_campaign + '&short_desc=' + short_desc + '&long_desc=' + long_desc;
$('#submit').click(function(){
// Ajax call
$.ajax({
xhr: function () {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
$('.progress').css({
width: percentComplete * 100 + '%'
});
if (percentComplete === 1) {
$('.progress').addClass('hide');
}
}
}
}, false);
xhr.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
$('.progress').css({
width: percentComplete * 100 + '%'
});
}
}, false);
return xhr;
},
type: 'POST',
url: "/admin/vuforia/upload_gallery.php",
data: dataString,
success: function (data) {
}
});
return false;
});
});
</script>
</body>
</html>
and upload_gallery.php:
<?php
if(isset($_POST['submit'])){
require '../../misc/db_connection.php';
require '../../misc/ftp_connection.php';
include 'vuforiaclient.php';
if(isset($_POST['for_adults'])){$for_adults = 1;} else {$for_adults = 0;}
if(isset($_POST['is_active'])){$is_active = 1;} else {$is_active = 0;}
if(isset($_POST['newsfeed'])){$newsfeed = 1;} else {$newsfeed = 0;}
if(isset($_POST['time_campaign'])){$time_campaign = 1;} else {$time_campaign = 0;}
$db = getConnection();
$next_id = "SELECT `AUTO_INCREMENT` FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_SCHEMA = 'vuforia' AND TABLE_NAME = 'targets'";
$stmt = $db->prepare($next_id);
$stmt->execute();
$target_next_id = $stmt->fetchColumn();
$target_category = trim(htmlspecialchars($_POST['category']));
$target_type = 'gallery';
$markerfile = $_FILES['markerfile']['name'];
$imageFileType = strtolower(pathinfo($markerfile,PATHINFO_EXTENSION));
$uploadOk = 1;
if ($_FILES["fileToUpload"]["size"] > 2000000) {
echo "To big file.";
$uploadOk = 0;
}
if($imageFileType != "jpg") {
echo "Only JPG";
$uploadOk = 0;
}
$conn_id = ftp_connect($ftp_server);
if (!ftp_login($conn_id, $ftp_user_name, $ftp_user_pass)) {
exit('FTP Login Failed');
}
ftp_pasv($conn_id, true);
if ($uploadOk == 1) {
$renamedFile = $target_next_id."_".$target_category."_".$target_type;
$remote_marker_path = "/storage_gallery/targets/".$renamedFile;
$marker_upload = ftp_put($conn_id, $remote_marker_path.'.jpg', $_FILES["markerfile"]["tmp_name"], FTP_BINARY);
}
ftp_close($conn_id);
if($marker_upload){
$imagePath = 'https://....../storage_gallery/targets/';
$imageName = $renamedFile.'.jpg';
$client = new VuforiaClient();
// add a target to vuforia.
$vuforiaTargetID = $client->addTarget($imagePath,$imageName,$target_category,$target_next_id,$target_type);
if ($vuforiaTargetID){
$data = [
'target_type' => 'gallery',
'target_id' => trim(htmlspecialchars($vuforiaTargetID)),
'target_category' => trim(htmlspecialchars($_POST['category'])),
'target_status' => 'Processing',
'target_image' => 'https://....../storage_gallery/targets/'.$renamedFile.'.jpg',
'for_adults' => trim(htmlspecialchars($for_adults)),
'is_active' => trim(htmlspecialchars($is_active)),
'target_name' => trim(htmlspecialchars($_POST['target_name'])),
'target_client' => trim(htmlspecialchars($_POST['target_client'])),
'target_desc' => trim(htmlspecialchars($_POST['target_desc'])),
'newsfeed' => trim(htmlspecialchars($newsfeed)),
'time_campaign' => trim(htmlspecialchars($time_campaign)),
'short_desc' => trim(htmlspecialchars($_POST['short_desc'])),
'long_desc' => trim(htmlspecialchars($_POST['long_desc'])),
'is_deleted' => '0',
];
$insert_marker = "INSERT INTO `targets`
(`created_at`, `target_type`, `target_id`, `target_category`, `target_status`, `target_image`, `for_adult`, `is_active`, `target_name`, `target_client`, `target_desc`, `newsfeed`, `time_campaign`, `short_desc`, `long_desc`, `is_deleted`)
VALUES
(NOW(), :target_type, :target_id, :target_category, :target_status, :target_image, :for_adults, :is_active, :target_name, :target_client, :target_desc, :newsfeed, :time_campaign, :short_desc, :long_desc, :is_deleted)";
$db = getConnection();
$stmt = $db->prepare($insert_marker);
$run_gallery = $stmt->execute($data);
}
}
if($run_gallery){
echo "<script>alert('Target added')</script>";
echo "<script>window.open('../?'.$target_category,'_self')</script>";
}
}
