I am new to this trying to understand how to make these 3 spinning plates work together. Until this point I've been using only html and javascript beautifully, but now I believe I will have to use php.
My .html page has a form with text inputs and an image upload. The goal is, when submitted for the image to be uploaded to my server and my firebase realtime database to be uploaded with the information. All my other pages don't have an image upload, only text fields, so I've just been calling a javascript function addDeal() for the onclick event to my submit button. And it's worked updating my firebase db fine.
Now, if I'm understanding what google is telling me, to integrate the image upload I have an upload.php page for my form action instead that gets called on the submit button. I made the upload.php page and it works great uploading my image to the server. But now I don't know how to ALSO call my javascript function to then add the data to my firebase database.
Should I use the upload.php page to do the firebase update in php also? Or keep the update in javascript on my html page and do both somehow? Here is my code.
addDigital.html
<!DOCTYPE html>
<html>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
<div class="wholeOption">
<label for="descText">Text to display:
<textarea id="descText" name="descText" cols="80" rows="2"></textarea>
</label>
</div>
<div class="wholeOption">
<label for="fileToUpload">Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
</label>
</div>
<div class="processdeals">
<input type="submit" class="submit" value="ADD DIGITAL MATCHUP" name="submit">
</div>
</form>
<div class="results">
<h2>Results: </h2>
<p id="message" class="message"></p>
<p class="errors" id="errors"></p>
</div>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-analytics.js"></script>
<script>
var firebaseConfig = {
apiKey: "xxx",
authDomain: "xxx",
databaseURL: "xxx",
projectId: "xxx",
storageBucket: "xxx",
messagingSenderId: "xxx",
appId: "xxx",
measurementId: "xxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script>
firebase.auth().onAuthStateChanged((user) => {
if (user) {
var uid = user.uid;
} else {
// User is signed out
window.location = '../login.html';
}
});
// this is the function I want to ALSO happen when the form is submitted in addition to the upload.php action
function addDeal(){
let good = 1;
document.getElementById("errors").innerHTML = '';
let descText = document.getElementById("descText").value;
let imageUpload = document.getElementById("imageUpload").value;
let postDate=new Date().getTime();
if (descText == ''){
good = 0;
document.getElementById("errors").innerHTML += "Text to display cannot be blank!";
}
if (good){
// firebase.database().ref('digital/' + postDate).set({
// "desc" : descText,
// "imageUpload" : imageUpload,
// "postedDate" : postDate,
// })
// .then(()=>{
// document.getElementById("message").innerHTML = "added successfully!";
// clearDeal();
// })
// .catch((error)=>{
// document.getElementById("message").innerHTML = "Database error " + error;
// })
} else {
document.getElementById("message").innerHTML = "Digital Deal NOT added. See errors below.";
}
}
</script>
</body>
</html>
upload.php
<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check !== false) {
echo "File is an image - " . $check["mime"] . ".";
$uploadOk = 1;
} else {
echo "File is not an image.";
$uploadOk = 0;
}
}
// Check if file already exists
if (file_exists($target_file)) {
echo "Sorry, file already exists.";
$uploadOk = 0;
}
// Check file size
if ($_FILES["fileToUpload"]["size"] > 5000000) {
echo "Sorry, your file is too large.";
$uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
$uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
echo "The file ". htmlspecialchars( basename( $_FILES["fileToUpload"]["name"])). " has been uploaded.";
} else {
echo "Sorry, there was an error uploading your file.";
}
}
?>
