Here is how the site looks like to give you an idea.
I would like to show the image he entered instantly after he clicked Bestand kiezen (= translates to chose file). How it works now is that it only shows the filename, how can I show a preview of the image instantly? The image and the other info is only inserted in the DB after clicking the add post button.
Is this supposed to be done with ajax?
The addpost.php code
<?php
include_once('classes/Post.class.php');
include_once('classes/User.class.php');
User::checklogin();
$post = Post::ShowPosts();
if(! empty($_POST)) {
$file = $_FILES['file'];
$fileName = $_FILES['file']['name'];
$fileTmpName = $_FILES['file']['tmp_name'];
$fileSize = $_FILES['file']['size'];
$fileError = $_FILES['file']['error'];
$fileType = $_FILES['file']['type'];
$fileExt = explode('.', $fileName);
$fileActualExt = strtolower(end($fileExt));
$allowed = array('jpg', 'jpeg', 'png');
if (in_array($fileActualExt, $allowed)){
if ($fileError === 0){
if ($fileSize < 10000000){
$fileNameNew = uniqid('', true).".".$fileActualExt;
$fileDestination = 'uploads/'.$fileNameNew;
print_r($fileDestination);
move_uploaded_file($fileTmpName, $fileDestination);
$feedback = "Post has been saved.";
$title = $_POST['title'];
$desc = $_POST['description'];
$filter = $_POST['filter'];
$date = date("Y-m-d H:i:s");
$location = "";
$userid = $_SESSION['userid'];
$newPost = new Post();
$newPost->setTitle($title);
$newPost->setPicture($fileDestination);
$newPost->setDescription($desc);
$newPost->setDate($date);
$newPost->setUserId($userid);
$newPost->setLocation($location);
$newPost->setFilter($filter);
$newPost->AddPost();
$postId = Post::getLastId();
$string = $_POST['tag'];
$tags = explode(',' , $string);
foreach($tags as $t) {
$newPost->setTag($t);
$newPost->AddTags($postId);
}
} else{
$feedback = "Your file is too big.";
}
} else{
$feedback = "There was an error uploading your file.";
}
} else{
$feedback = "You cannot upload files of this type.";
}
}
?><!DOCTYPE html>
<html lang="en">
<body>
<form action="" method="post" enctype="multipart/form-data">
<h1 form__title>Add post</h1>
<?php if(isset($feedback)): ?>
<div class="feedback">
<p><?php echo $feedback; ?></p>
</div>
<?php endif; ?>
<div class="form__field">
<label for="title" class="label">YOUR SHOT TITLE:</label> <br/>
<input class="form__input" type="text" name="title">
</div>
<div class="form__field">
<label for="file" class="label">UPLOAD PICTURE</label><br/>
<input class="form__input" type="file" name="file" class="fileToUpload">
</div>
<div class="form__field">
<label for="description" class="label">DESCRIPTION</label><br/>
<textarea name="description" cols="25" rows="5"></textarea>
</div>
<div class="form__field">
<label for="tag" class="label">ADD SOME TAGS TO YOUR SHOT (seperated with , )</label><br/>
<input class="form__input" type="text" name="tag">
</div>
<p>JPG, GIF or PNG. Snapshots are 400 × 300 pixels or 800 × 600 (for HiDPI displays). </p><br/><br/>
<div class="form__field">
<label for="tag" class="label">ADD ONE (Instagram) FILTER TO YOUR SHOT </label><br/>
<select name="filter">
<option value="_1977">1977</option>
<option value="aden">aden</option>
<option value="xpro2">xpro2</option>
</select>
</div>
<div class="form__field">
<input class="btn_style" type="submit" name="submit" value="Add post"">
</div>
</form>
</body>
</html>
The Addpost function
public function AddPost(){
$conn = db::getInstance();
$query = "insert into posts (post_title, picture, description, filter, location, user_id, post_date) values (:post_title, :picture, :description, :filter, :location, :user_id, :post_date)";
$statement = $conn->prepare($query);
$statement->bindValue(':post_title',$this->getTitle());
$statement->bindValue(':picture',$this->getPicture());
$statement->bindValue(':description',$this->getDescription());
$statement->bindValue(':filter', $this->getFilter());
$statement->bindValue(':location',$this->getLocation());
$statement->bindValue(':user_id',$this->getUserId());
$statement->bindValue(':post_date',$this->getDate());
$statement->execute();
$result = $statement->fetchAll(PDO::FETCH_ASSOC);
return $result;
}
