Implementing Dropzone - Error on replacing initial image

[dbashby]

I have had this working previously but I am unsure what has happened.

I have gone through the steps in the tutorials to implement DropZone, everything is working apart from the dropzone image. The image is not showing on the page and all I have is the screenshot.

I saw in the video that there was an initial problem downloading the image so I have also tried the download from GitHub https://raw.githubusercontent.com/thedigicraft/Atom.CMS/master/admin/images/spritemap.png

This has not made any difference

The 2 files that are used to get this running

dropzone.css which is in the css file within the admin folder and dropzone.js which is in the js folder within the admin folder

To show that everything is where it is meant to be here are the screenshots to demonstrate.

https://drive.google.com/folderview?id=0BxaNFThi3E8PTTRFU3hMa0RvQWs&usp=sharing

[dbashby]

I have just gone into the site where I implemented it via the tutorials a year ago and although the image showed at the time it no longer shows. All I get is the box, I am looking at the site now but have the scripts been superseded?

As you can see from the image the .js file and the css file are being located as the box is the css and the text in the middle of the box is the .js

I have searched through both scripts taken from Dropzonejs.com and cannot find any link to the image so could it be that the link/path to the image calls the image from dropzonejs.com rather than letting us control it?

[dbashby]

I have got to the end of part 79 and no matter what, the initial upload of an image to myself being logged into the admin uploads.

The initial image is displayed and in firebug the $id is shown however when I go to replace the image I get an error and no image shows and in firebug there is no id shown at the end https://drive.google.com/file/d/0BxaNFThi3E8PY1RUeWJRQm5pTGM/view?usp=sharing. Once I refresh the image shows in the form as per the tutorial.

I have tried amending the php below the form tag as this posed an issue earlier in the project. The code that is in the tutorial <?php if($opened['avatar'] != ''){ ?> What I have tried if (isset($opened['avatar']) && $opened['avatar'] != '') { as well as if (isset($opened['avatar']) && $opened['avatar'] != 'null') {

but nothing has fixed the error, I still am not getting the id when replacing an image.

When I initially did this project a year ago Dropzone was fully functional but even copying the code that I had working in the initial project does not make a difference.

Has anyone else come across this issue?

Code:

users.php http://pastebin.com/NTQFXQhD

Ajax/pages.php http://pastebin.com/GJQ6nF2d

uploads.php http://pastebin.com/2v5BibiD

avatar.php http://pastebin.com/zaFyV8vU

[dbashby]

Screenshots of all code and output -

Image 1 uploaded to page - https://drive.google.com/file/d/0BxaNFThi3E8Pb2ZIY0dPYmVxcTg/view?usp=sharing

Image 2 showing $id sent to user 5 in DB - https://drive.google.com/file/d/0BxaNFThi3E8POVJ1aFFGVVlaZlE/view?usp=sharing

Image 3 - Error message shown after replacing an image - https://drive.google.com/file/d/0BxaNFThi3E8PaUNlNG5ZeFZTeWs/view?usp=sharing

Image 4 - Showing id number collected in url - https://drive.google.com/file/d/0BxaNFThi3E8PSnZoZUlWZmZzbHc/view?usp=sharing

Image 5 - avatar.php code - https://drive.google.com/file/d/0BxaNFThi3E8PRFVuTHozVDFlVnc/view?usp=sharing

Image 6 - Firebug Results - https://drive.google.com/file/d/0BxaNFThi3E8PdlNaODZKeDlzXzg/view?usp=sharing

[creptor]

Oh, please try to separate the problem of the image for the Dropzone Js and the upload problem... I'll continue this issue has the upload problem, which seems to be something more important.

[creptor]

Easy pizzi... in line 12 of your users.php file you have something...?id=<?php $opened['id']; ?>. And you forgot the echo.

code:

<?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 }?>

I just like that format for code :3

[dbashby]

Thanks Creptor.... I realise the image is not that important but as I say even when I completed this a year ago the image worked and I was wondering more than anything if dropzone had diverted the path to collect the image from their server rather than us holding the image from the tutorial in our images folder.

Thanks again!

[creptor]

I'll check the files, and let you know :3

[creptor]

No, the image is fetch from your files. In the CSS line 164 (and so on) of the dropzone.css, the image is declared as a partial path (basically it's fetch from your system).

And because of the background-image: url("../images/spritemap.png"); I suppose, the image should be placed inside of a folder called images on the directory of the CSS file.

Example:

www/admin/css/dropzone.css
www/admin/images/spritemap.png

-> note that they share the same directory.
-> note that changing the image name, will result on a 404 html error (not found)

[dbashby]

That is exactly where the spritemap.png is.

[creptor]

please upload a photo of you spritemap.png with the dropzone.css, that way I can visualize the structure.

[dbashby]

My dropzone.css file http://pastebin.com/6pFQXB7e

spritemap.png

[dbashby]

Thanks for looking at this again Creptor, I should have you on retainer!

[creptor]

It appears that you have another version of the dropzone.css stylesheet, because I found no background image attach to anything... try to get the CSS from the code in this repository.

The file.

[dbashby]

Thanks, worked like a charm, I don't even remember where I got that css from, could have been the dropzone site but the image is displayed on the page now. Thanks again Creptor.