There is a photo upload code. It loads the client's photo into the database. But the problem is that it can only upload one photo. If you upload a second photo, it simply replaces it by removing the old photo.
Photo upload form display code
<div class="col-md-2" style="width: 223px; float: right; margin-top: -210px;">
<div class="x_panel">
<span class="input-text" style="margin-right: 5px;">Include Photo (+)</span>
<input contenteditable="true" onchange="saveUpdate('medsoft','Inst_Int','photos','<?=$row['Int_Int'];?>',this.value);" style="margin-left: 5px;width: 30px" type="1checkbox" class="1js-switch" name="photo" value="<?= $row['photos'];?>"><? //= ($row['photos']=='+' ? 'checked' : null);?>
<div class="x_contenti">
<br><br>
<span class="input-text " >Photo</span>
<!-- <a style="height: 26px; margin-left: 10px;" href="###/kont.php?action=new_kod&rowkod=<?//=$row['Sch_Row']?>" class="jsdelete btn btn-warning btn-sm" data-alert="Add photo ? ">Add</a> -->
<br><br>
<a style="cursor:pointer;border:1px solid;padding:3px;background: #eee; float: right; margin-top: -35px;" data-ch="<?=$row['Count_Row']?>" data-toggle="modal" data-target="#myModal">
Upload a photo
</a>
<!--
<a style="cursor:pointer;border:1px solid;padding:2px;background: red;color:#fff;" href="/medsoft.php?action=del_foto&rowfoto=<?//=$row['Sn_Row']?>" class="jsdelete btn btn-warning btn-sm" data-alert="Delete photo ?">Delete photo</a>
-->
<?php
if ($row['Photo_dev']=='+') {
?>
<div style="border: 0px solid; ">
<img id="ch-pers-img<?=$row['Ch_Rs']?>" src="/images/<?=$row['Chs_Rs']?>.jpg?t=<?=time ()?>" width="189">
</div>
<?php
}
?>
</div>
</div>
</div>
Photo Upload Processing Code
<div class="modal fade " id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Photo Upload</h4>
</div>
<div class="modal body">
<div>
<form action="upplo.php" method="post" name="uplod" id="uplod" enctype="multipart/form-data">
<input type="file" name="filename"><br>
<br>
<input id="submit-card" type="button" form="uplod" value="Upload">
</form>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
Photo upload code
<?php
mysql_set_charset('utf8',$db);
if($_FILES["filename"]["size"] > 2024*3*2024) {
echo ("File size exceeds three megabytes");
exit;
}
$success=[];
$errors=[];
foreach( $_FILES as $file ){
// Check if the file is loaded
if(is_uploaded_file($file["tmp_name"])) {
// If the file is uploaded successfully, move it
// from temporary directory to destination
if (move_uploaded_file($file["tmp_name"], "images/".intval($_GET['ch']).".jpg"))
$success[]=intval($_GET['ch']).".jpg"."?t=".time();
// $db = mysql_connect("localhost","armit_mit","oZ5hI7jID");
// mysql_select_db("armit_mit",$db);
$result_foto = mysql_query ("UPDATE `Persons` SET `Photos` = '+' where `Ch-Persons` = ".intval($_GET['ch'])."", $db);
} else {
$errors[] = "Error loading file ".intval($_GET['ch']).".jpg";
}
}
echo json_encode(['success'=>$success,'errors'=>$errors]);
?>
What needs to be done so that you can upload several photos at once.
The code also contains a code for displaying a photo, which is displayed when the + sign is specified in the database in the "fhotos" line.
You store all uploaded files under the same name:
if (move_uploaded_file($file["tmp_name"], "images/".intval($_GET['ch']).".jpg"))
If you want to use distinct names, you need to add something to the file name, like a unique ID or a counter, or any part from the original file name.
Related
I am trying to get bootstrap modal to work with my html/css slider, it is fetching the users previous purchases into the slider div and each order has an Ellipsis icon that brings up a modal with some options for that order, but in this case the modal is only popping up inside the <div class="slider">
but if I put the modal outside of the slider div then the modal doesn't show up at all, It seems to work fine on desktop but on mobile the modal will only open inside the slider,
I believe it's because my slider CSS is conflicting with my modal in some way, I'm assuming it's the display:flex;
So how can I work around this?
I tried messing with z-index to try and force the modal to the front regardless of device but it doesn't seem to work
I will include my CSS at the bottom of this question :)
UPDATE: I have created some images, This is the mobile version, you can see how the modal opens inside the div instead of outside of it.. https://ibb.co/Q639Zzy
Heres the desktop version working fine.. https://ibb.co/tb8Tc6S
<div class="slider">
<?php
$stmt = $dbh->prepare("SELECT * FROM `orders` WHERE `username` = '$userdetails' AND `confirmation` = 'Confirmed' ORDER BY `date` DESC");
$stmt->execute();
$fetchy = $stmt->fetchAll();
if (count($fetchy) == '0')
{
echo('<p>No previous orders..</p>');
}
else
{
foreach ($fetchy as $fetch) {
?>
<div class="slide" id="slide<?php echo $fetch['uid']; ?>">
<img src="/images/temp/<?php echo $fetch['prodimage']; ?>" style="width:80px;">
<!--- Button trigger modal --->
<i data-toggle="modal" data-target="#exampleModal<?php echo $fetch['uid']; ?>" class="fas fa-ellipsis-v"></i>
<!--- Modal --->
<div class="modal fade" id="exampleModal<?php echo $fetch['uid']; ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Order options</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
View Order
<br>
<form action="../../PHP/user_functions.php" method="POST">
<input type="hidden" value="<?php echo $_SESSION['usr_name']; ?>" name="username">
<input type="hidden" value="<?php echo $fetch['uid']; ?>" name="uid">
<input type="hidden" value="Cancelled" name="cancelopt">
<label style="cursor:pointer;text-decoration: underline;">
Cancel Order
<input type="submit" style="display:none;" name="cancel">
</label>
</form>
<form class="deleteorderchk" action="../PHP/user_functions.php" method="POST">
<input type="hidden" value="<?php echo $_SESSION['usr_name']; ?>" name="username">
<input type="hidden" value="<?php echo $fetch['uid']; ?>" name="uid">
<label style="cursor:pointer;text-decoration: underline;">
Delete from Recent Purchases
<input type="submit" style="display:none;" name="remove">
</label>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<?php
}}
?>
</div>
And here I have my CSS
<style type="text/css">
i.fa-ellipsis-v{
display: inline-block;
border-radius: 60px;
box-shadow: 0 0 2px #888;
padding: 0.5em 0.6em;
font-size: 14px;
}
.slider{
width:100%;
display:flex;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
scroll-snap-type:x mandatory;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.slider::-webkit-scrollbar {
display:none;
}
.slide{
width:120px;
flex-shrink:0;
height:100%;
}
.slider > div{
scroll-snap-align:start;
}
</style>
I tried multiple ways to do it. I have tech stack as bootstrap /php/ mysql. I need to store profile images of user in file system or database. Can anyone help me with a sample code?
I could bring myself to level that cropped file is generated and can be downloaded. But further I am stuck in saving them to file system or database.
<!-- Content -->
<!-- Default box -->
<div class="box collapsed-box">
<div class="box-header with-border">
<h3 class="box-title">Family Details</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="collapse" title="Collapse">
<i class="fa fa-plus"></i></button>
<!--<button type="button" class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
<i class="fa fa-times"></i></button>-->
</div>
</div>
<div class="box-body">
<div class="container">
<div class="row">
<div class="col-md-9">
<!-- <h3 class="page-header">Demo:</h3> -->
<div class="img-container">
<img id="image" src="" alt="Picture">
</div>
</div>
<div class="col-md-3">
<!-- <h3 class="page-header">Preview:</h3> -->
<div class="docs-preview clearfix">
<div class="img-preview preview-lg"></div>
</div>
<div class="docs-buttons">
<div class="btn-group">
<!-- upload -->
<label class="btn btn-primary btn-upload" for="inputImage" title="Upload image file">
<input type="file" class="sr-only" id="inputImage" name="file" accept="image/*">
<span class="docs-tooltip" data-toggle="tooltip" title="Import image with Blob URLs">
<span class="fa fa-upload"></span>
Browse Image
</span>
</label>
</div>
<div class="btn-group btn-group-crop">
<!-- <button type="button" class="btn btn-primary" data-method="getCroppedCanvas">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getCroppedCanvas")">
Get Cropped Canvas
</span>
</button>
<button type="button" class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ "width": 160, "height": 90 }">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getCroppedCanvas", { width: 160, height: 90 })">
160×90
</span>
</button>-->
<button type="button" class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ "width": 320, "height": 320 }">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getCroppedCanvas", { width: 320, height: 320 })">
Preview
</span>
</button>
<!-- Show the cropped image in modal -->
<div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="getCroppedCanvasTitle">Cropped</h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<a class="btn btn-primary" id="download" href="javascript:void(0);" download="cropped.jpg">Save</a>
</div>
</div>
</div>
</div><!-- /.modal -->
</div><!-- /.docs-buttons -->
</div>
</div>
</div>
<!-- add photo ends -->
==== PHP code
$target_dir = "../apppage/memImage/";
$target_file = $target_dir . basename($_FILES["fileToUpload"][$filename]);
$uploadOk = 1;
$imageFileType = 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;
}
}
?>
I displayed a html table within a php while loop extracting some data from a database and included an edit button in the rows of the table to edit the entries in that row (database finally). But , irrespective of on which edit button I click on , it is editing the first row elements only. How can I fix it?
<div class="col-md-8">
<?php
$test=1;
if(!empty($_SESSION['uid']))
{
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "Hostel";
$test++;
$flag=FALSE;
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error)
{
die("Connection failed: " . $conn->connect_error);
}
// $id=$_POST['complid'];
$c_name=$_SESSION['name'];
$c_usn=$_SESSION['uid'];
?>
<div class="container col-md-12" >
<h1 style="text-color:white;">The posts are listed below :</h1>
<hr style="box-shadow:1px 1px 1px black;">
<style>
h1
{
color: white;
}
</style>
<div class="table-responsive" style="border-radius:10px;border:2px solid gray;box-shadow:10px 10px 10px black;background-color:#d2d2d2;">
<table class="table table-bordered table-hover">
<tbody>
<tr>
<th>Post.No.</th>
<th>Date</th>
<th>Title</th>
<th>Operations</th>
</tr>
<?php
$query = "SELECT * FROM posts";
$result = mysqli_query($conn,$query);
while ($row=mysqli_fetch_array($result,MYSQLI_ASSOC))
{
?>
<tr>
<td><?php echo $row{'id'};?></td>
<td><?php echo $row{'date'};?></td>
<td><?php echo $row{'title'};?></td>
<td>
<b><button type="button" id="editbut" style="color:yellow;background-color:black;border:1px solid gray;border-radius:3px;" data-toggle="modal" data-target="#exampleModal">Edit</button> </b>
<b><button type="button" style="color:white;background-color:red;border:1px solid gray;border-radius:3px;" data-toggle="modal" data-target="#exampleModa2">Delete</button> </b>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">Edit your post here</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="message-text" class="control-label">Title :</label>
<textarea class="form-control" id="message-text"><?php echo $row['title']; ?></textarea>
<label for="message-text2" class="control-label">Matter :</label>
<textarea class="form-control" id="message-text"><?php echo $row['matter']; ?></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Edit Post</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
posttitle = "<?php echo $row{'title'}; ?>";
postid = "<?php echo $row{'id'}; ?>";
document.getElementById("deletebut").onclick = function () {
alert(postid);
//location.href = "deletepost.php?id="+postid;
};
</script>
<div class="modal fade" id="exampleModa2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">Confirm your delete request:</h4>
</div>
<div class="modal-body">
<label for="message-text" class="control-label">Are you sure, you want to delete this post?</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" id="deletebut" class="btn btn-danger">Delete post</button>
</div>
</div>
</div>
</div>
</td>
</tr>
<?php
}
}
else
{
echo "<script type='text/javascript'alert(\"Please Login.\");>window.location.href = 'sign.php';</script>";
exit();
}
?>
</tbody>
</table>
</div>
</div>
Your edit button is not contained in a form.
The form labelled "edit your post" does not contain the database ID of the post.
Your JavaScript handler for the delete button references an element ID which does not exist.
You have multiple form elements with the same ID and no name
I could go on, but this is pretty badly broken.
The code below shows the user's recent posts from the database, and a delete button if the user viewing the post
<div class="span12">
<?php
// get current user ID
$userid = $row['0'];
// get posts
$sql_posts = "SELECT * FROM posts WHERE ownerid='$userid' ORDER BY id DESC LIMIT 0,5";
$result_posts = mysql_query($sql_posts);
// for each post, show le post.
while($row_posts = mysql_fetch_assoc($result_posts)) {
?>
<div class="well">
<span class="label"><?php echo date('F j Y',strtotime($row_posts['time']));?></span>
at
<span class="label"><?php echo date('g:i a',strtotime($row_posts['time']));?></span>
<?php
if($player==$_SESSION['username']) {
?>
<a href="#deletepost" data-toggle="modal">
<span class="label label-important">Delete post</span>
</a>
<!-- delete post modal -->
<div id="deletepost" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close delete" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Delete post</h3>
</div>
<div class="modal-body">
Are you want to delete post #<?php echo $row_posts['id'];?>?
<p class="muted">
"<i><?php echo $row_posts['contents'];?></i>"
</p>
</div>
<div class="modal-footer">
<form class="pull-right form-inline" method="post" action="post_delete.php">
<input type="hidden" value="<?php echo $row_posts['id'];?>" name="postid">
<input type="hidden" value="<?php $filepath = $_SERVER["SCRIPT_NAME"]; echo basename($filepath);?>" name="currentpage">
<button type="button" class="btn" data-dismiss="modal" aria-hidden="true">Keep the post</button>
<button type="submit" class="btn btn-danger">I am sure. Delete the post!</button>
</form>
</div>
</div>
<!-- end modal -->
<?php
} // end delete post button
?>
<hr width="250px">
<img src="profilepic.php?player=<?php echo $player;?>&size=32" />
<?php echo $row_posts['contents'];?>
</div>
<?php
} // end post foreach
?>
</div>
For some reason, once the user hits the modal it shows the same post every time. For example, if the user hit delete on the first post and the post contents was hello, it would show hello in the modal. However, for all the rest of the posts in the loop if you hit Delete it will show the first post in every single modal.
Your href for your delete link is, #deletepost, and your modal ID is always the same.
Change it so it doesn't use ID's, or make each ID different.
Try this,
<div class="span12">
<?php
// get current user ID
$userid = $row['0'];
// get posts
$sql_posts = "SELECT * FROM posts WHERE ownerid='$userid' ORDER BY id DESC LIMIT 0,5";
$result_posts = mysql_query($sql_posts);
// for each post, show le post.
while($row_posts = mysql_fetch_assoc($result_posts)) {
?>
<div class="well">
<span class="label"><?php echo date('F j Y',strtotime($row_posts['time']));?></span>
at
<span class="label"><?php echo date('g:i a',strtotime($row_posts['time']));?></span>
<?php
if($player==$_SESSION['username']) {
?>
<a href="#deletepost-<?php echo $row_posts['id'];?>" data-toggle="modal">
<span class="label label-important">Delete post</span>
</a>
<!-- delete post modal -->
<div id="deletepost-<?php echo $row_posts['id'];?>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close delete" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Delete post</h3>
</div>
<div class="modal-body">
Are you want to delete post #<?php echo $row_posts['id'];?>?
<p class="muted">
"<i><?php echo $row_posts['contents'];?></i>"
</p>
</div>
<div class="modal-footer">
<form class="pull-right form-inline" method="post" action="post_delete.php">
<input type="hidden" value="<?php echo $row_posts['id'];?>" name="postid">
<input type="hidden" value="<?php $filepath = $_SERVER["SCRIPT_NAME"]; echo basename($filepath);?>" name="currentpage">
<button type="button" class="btn" data-dismiss="modal" aria-hidden="true">Keep the post</button>
<button type="submit" class="btn btn-danger">I am sure. Delete the post!</button>
</form>
</div>
</div>
<!-- end modal -->
<?php
} // end delete post button
?>
<hr width="250px">
<img src="profilepic.php?player=<?php echo $player;?>&size=32" />
<?php echo $row_posts['contents'];?>
</div>
<?php
} // end post foreach
?>
</div>
Use different model ID 's in each time when you call model,
<div class="modal fade" id="<?php echo $id; ?>" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Delete Product</h4>
</div>
<div class="modal-body">
<p>Are you sure, want to delete this?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<span class="btn btn-danger" >Delete</span>
</div>
</div>
</div>
</div>
So, i am using a bootstrap modal, and inside of the modal, i want to use image upload, but when an image is selected, nothing happens, i am asuming it is a javascript issue, the script and the css is included outside of the modal in the header.
http://jasny.github.com/bootstrap/javascript.html#fileupload
Any suggestions? I asume it is a javascript issue
<?php
if (isset($_SESSION['login']) and !empty($_SESSION['login']) and $_SESSION['rank'] == 3) {
echo '
<!-- Modal -->
<div id="insert_post_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Insert Post</h3>
</div>
<div class="modal-body">
<p>
<form action="insert_post_sql" method="post" enctype="multipart/form-data">
<table border="0">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail" style="width: 200px; height: 150px;"><img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" />
</div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;">
</div>
<div>
<span class="btn btn-file"><span class="fileupload-new">Select image</span>
<span class="fileupload-exists">Change</span><input type="file" /></span>
Remove
</div>
</div>
</table>
</form>
</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<input type="submit" button class="btn btn-primary" value="Submit Post">
</div>
</div>
</form>
';
}
?>
Try to use Document Ready function because the Script is loaded prior to the Modal HTML
$('document').ready(function(){
$('#insert_post_modal').on('shown', function(){
$('.fileupload').fileupload();
});
});
Try calling the fileupload on modal shown (i.e. when the user opens it):
$('#insert_post_modal').on('shown', function(){
$('.fileupload').fileupload();
});
Can't test it right now though, I'm sorry
$(document).ready(function(){
$image_crop = $('#image_demo').croppie({
enableExif: true,
viewport: {
width:300,
height:300,
type:'square' //circle
},
boundary:{
width:400,
height:400
}
});