Part 80: Avatar will not show cropped after uploading a new image

[Fr0mi]

Hi everyone!

I have the following problem, with using AJAX to load the newly uploaded image. It worked perfectly until Video 79.

Once the image is uploaded, the old avatar will disapear and nothing will take its place but white space.

The quellcode at this point looks right though. The variable $opened['avatar'] outputs the correct image with extension.

Once the page is refreshed using F5 or whatever you want, the new image will load. Thus I strongly suppose the error is somewhere in the AJAX file..

Users.php

The Javascript to load the ajax file

<?php if(isset($opened['id'])) { ?>
    <script>

        $(document).ready(function() {

            Dropzone.autoDiscover = false;

            var myDropzone = new Dropzone("#avatar-dropzone");

            myDropzone.on("success", function(file) {

                $("#avatar").load("ajax/avatar.php?id=<?php echo $opened['id']; ?>");

            });

        });

    </script>
<?php } ?>

the place for the image

 <?php if($opened['avatar'] != '') { ?>

<div id="avatar">

    <div class="avatar-container" style="background-image: url('../uploads/<?php echo $opened['avatar']; ?>')"></div>

</div>

    <?php } ?>

avatar.php - The Ajax file

I guess the problem lies here some where..

<?php

include('../../config/connection.php');

$id = $_GET['id'];  

$q = "SELECT avatar FROM users WHERE id = $id";
$r = mysqli_query($dbc, $q);

$data = mysqli_fetch_assoc($r);

?><div class="avatar-container" style="background-image: url('../uploads/<?php echo $opened['avatar']; ?>')"></div>

I really don't see the error. I thought its probably just another typo somewhere, but I just can't find it. Thanks in advance for helping!!

[JasonMate]

This is just a guess. I don't know your file structure but it could be the relative url you have. Your jumping a folder.

you could try removing the ../ might want to make sure the image url's are making it to the db.

try this first:

On Sat, Sep 5, 2015 at 10:19 AM, Fr0mi notifications@github.com wrote:

Hi everyone!

I have the following problem, with using AJAX to load the newly uploaded image. It worked perfectly until Video 79, after changing the code to Users.php The Javascript to load the ajax file

<?php if(isset($opened['id'])) { ?> <?php } ?>

the place for the image

<?php if($opened['avatar'] != '') { ?>

<?php } ?>

avatar.php - The Ajax file

I guess the problem lies here some where..

<?phpinclude('../../config/connection.php');$id = $_GET['id']; $q = "SELECT avatar FROM users WHERE id = $id";$r = mysqli_query($dbc, $q);$data = mysqli_fetch_assoc($r);?>

I really don't see the error. I thought its probably just another typo somewhere, but I just can't find it. Thanks in advance for helping!!

— Reply to this email directly or view it on GitHub https://github.com/thedigicraft/Atom.CMS/issues/145.

[Fr0mi]

Hey, thanks for the answer! The folder structure is the same as in the video.

I have the uploads folder in the frontend of the cms. However I just tested it anyway, but it doesn't work.

What seemed to work though was changing the variable name to $data. I'd like to know though, why it worked with $opened in the video?!

[creptor]

It's impossible that it had worked with the $opened variable... because in hat code it doesn't exists. The Ajax is a new call to the server, and it does not include all the variables from the main pages (they're not stored in the browser) and just what's included in that file will work.

That's the reason why in the file you have to call the database connection data and make a new query to it, and by defining $data as the query result, you must use that variable to display data.

[Fr0mi]

Ok that makes sense! thank yo!

[creptor]

No problem. If you need more help just keep posting your doubts in here and I'll try to answer them as simple as possible