Click here to Skip to main content
14,661,175 members
Rate this:
Please Sign up or sign in to vote.
See more:
What I need is that the images will be uploaded to a specific "user_id" found in the "userprofile" table. I have a bunch of codes taken from the other online source. Here are the following codes:

index.php

<?php
session_start();
include('database/dbconfig.php');
?>

<html>  
    <head>  
        <title>Make Price Range Slider using JQuery with PHP Ajax</title>  
		
		<script src="jquery.min.js"></script>  
		<script src="bootstrap.min.js"></script>
		<script src="croppie.js"></script>
		<link rel="stylesheet" href="bootstrap.min.css" />
		<link rel="stylesheet" href="croppie.css" />

<style>
.navbar-custom {
    color: #FFFFFF;
    background-color: #B7E772;
}
.navbar .navbar-toggler .icon-bar {
  background: black !important;
}
.shadw {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
</style>
    </head>  
    <body>
    
    <div class="container-fluid" style="margin-top:-31px;background-color:#E8FFC7;">
        <div class="container">
        <div class="jumbotron jumbotron-fluid" style="margin-bottom:-31px;background-color:#E8FFC7;">
            <img class="img-fluid img-responsive" src="../images/LRrepository-header-banner.png" alt="">
        </div>
    </div>
    </div>


<nav class="navbar navbar-custom shadw">
  <div class="container-fluid">
      <button type="button" class="navbar-toggle navbar-toggler  navbar-toggler-right" data-toggle="collapse" data-target="#myNavbar">
        <span class="navbar-toggler-icon icon-bar"></span>
        <span class="navbar-toggler-icon icon-bar"></span>
        <span class="navbar-toggler-icon icon-bar"></span>                        
      </button>
    <div class="container">
    <div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav navbar-nav">
      <li><a href="../index.php"><span style="color:#000000;">HOME</span></a></li>
      <li><a href="#"><span style="color:#000000;">Update Profile Photo</span></a></li>
    </ul>

    </div>
  </div>
</div>
</nav>


                        </div>
                    </li>
                </ul>
                <!-- <a><img src="images/no-image2.png" class="rounded-circle" width="32px"></a>
                <span class="justify-content-end navbar-text text-white dragright"><small>Profile</small></span> -->
            </div>
        </div>


    </nav>


        <div class="container">
        <a href="../profile.php"><button type="button" class="btn btn-success">PROFILE</button></a>
          <br />
      <!-- <h3 align="center"></h3> -->
      <br />
      <br />
			<div class="panel panel-default">
  				<div class="panel-heading">Select Profile Photo</div>
  				<div class="panel-body" align="center">
  					<input type="file" name="upload_image" id="upload_image" />
  					<br />
  					<div id="uploaded_image"></div>
  				</div>
  			</div>
  		</div>
    </body>  
</html>

<?php

$query = "SELECT * FROM `userprofile` WHERE `user__email` = '".$_SESSION['username']."' ";
$query_run = mysqli_query($connection,$query);

if(mysqli_num_rows($query_run))
{
    while($row = mysqli_fetch_array($query_run))
    {
?>
<div id="uploadimageModal" class="modal" role="dialog">
	<div class="modal-dialog">
		<div class="modal-content">
      		<div class="modal-header">
        		<button type="button" class="close" data-dismiss="modal">×</button>
        		<h4 class="modal-title">Upload & Crop Image</h4>
      		</div>
      		<div class="modal-body">
        		<div class="row">
  					<div class="col-md-8 text-center">
						  <div id="image_demo" style="width:350px; margin-top:30px"></div>
  					</div>
  					<div class="col-md-4" style="padding-top:30px;">
              <!-- <form action="" method="POST"> -->
              <input type="hidden" name="profile_id" value="<?php echo $row['user_id']?>">
						    <button name="upload_photo" class="btn btn-primary crop_image">Crop & Upload Image</button>
                
              <!-- </form> -->
					</div>
				</div>
      		</div>
      		<div class="modal-footer">
        		<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      		</div>

          <?php
                                    }
                                    
                                }
                                else
                                {
                                    $_SESSION ['status'] = "Not Yet Logged In!";
                                    session_destroy();
                                    $_SESSION = array();
                                    header("location:login.php");
                                }
                            ?>

    	</div>
    </div>
</div>

<script>  
$(document).ready(function(){

	$image_crop = $('#image_demo').croppie({
    enableExif: true,
    viewport: {
      width:200,
      height:200,
      type:'circle' //square
    },
    boundary:{
      width:300,
      height:300
    }
  });

  $('#upload_image').on('change', function(){
    var reader = new FileReader();
    reader.onload = function (event) {
      $image_crop.croppie('bind', {
        url: event.target.result
      }).then(function(){
        console.log('jQuery bind complete');
      });
    }
    reader.readAsDataURL(this.files[0]);
    $('#uploadimageModal').modal('show');
  });

  $('.crop_image').click(function(event){
    $image_crop.croppie('result', {
      type: 'canvas',
      size: 'viewport'
    }).then(function(response){
      $.ajax({
        url:"upload.php",
        type: "POST",
        data:{"image": response},
        success:function(data)
        {
          $('#uploadimageModal').modal('hide');
          $('#uploaded_image').html(data);
        }
      });
    })
  });

});  
</script>


And the codes inside upload.php

<?php
session_start();
include('database/dbconfig.php');
//upload.php

if(isset($_POST["image"]))
{
	$data = $_POST["image"];

	$query = "UPDATE `userprofile` SET `user_photo`='$data'";
    $query_run = mysqli_query($connection, $query);
	

	$image_array_1 = explode(";", $data);

	$image_array_2 = explode(",", $image_array_1[1]);

	$data = base64_decode($image_array_2[1]);

	$imageName = time() . '.png';

	file_put_contents($imageName, $data);

	echo '<img src="'.$imageName.'" class="img-thumbnail"/>';

}

?>


What I have tried:

I can't find the perfect solution to this problem. I hope that you could help me with this. Thanks!
Posted
Comments
Richard MacCutchan 4-Sep-20 8:38am
   
"I have a bunch of codes taken from the other online source"
That is probably a mistake, unless you fully understand what the code does. Also, you have not actually asked a question.
Richard Deeming 4-Sep-20 9:27am
   
$query = "UPDATE `userprofile` SET `user_photo`='$data'";

Your code is vulnerable to SQL Injection[^]. NEVER use string concatenation to build a SQL query. ALWAYS use a parameterized query.

PHP: SQL Injection - Manual[^]
W Balboos, GHB 4-Sep-20 10:25am
   
So, for lack of more information, it sounds like you copied a lot of code from online sources and want one of us to assemble it for you into a working project ?

Start here: https://www.w3schools.com/php/default.asp . Everything you need to know is there. With examples. If you need their SQL/MySQL tutorial, as well, it's there.

Post back with real problems based upon your own work (copy/paste from online sources does not count as work or a "what you tried".)
Gerry Schmitz 4-Sep-20 14:38pm
   
Since you did not find the "perfect" solution, you must have found "a" solution. But you want us to make it "perfect"? How will you tell?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100