blueimp jQuery-File-Upload not displaying thumbnail after uploading the image

Question

I have downloaded latest plugin and dependencies from here version 9.12.1.

I copied the downloaded files in my wamp server and accessed it from localhost/jQuery-File-Upload-9.12.1/index.html .

After selecting image file, a preview of image is displayed before uploading. But once image is uploaded the thumbnail is not getting displayed.

However in Inspect Element the link of thumbnail is present in image src.

File is uploaded in server folder and thumbnail is created.

Name and size of image is getting displayed.

What am I doing wrong ?

Answer 1

Making with dirty tricks ... loop until the image is ready before showing preview image.
See jQuery: Check if image exists . In my case I use before the image tag as ...

            while(urlExists(file.path) != 200) {
                   console.log("still loading image");
            }
            <img src="=file.path" width="100px">

The problem is writing image is a little late than response to client. So , 404 error for this image after rendering to html. But image is actually exist when I checked. As above snippet ,I am trying to wait for loading image after server has successfully created image. I know it is not a good way but it works. I believe this error will not happen at production mode and I am trying to fix for running at localhost.

Answer 2

As per your question and comments, check for two things:

First, the thumbnail image downloaded has status 200 or 404 in network tab of developer window. If its 200, issue is something else.

If it is 404: Check in your .htaccess file for this content:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?yourdomain.com/.*$ [NC]
RewriteRule \.(gif|jpg|css)$ - [F]

The above lines tell the Apache Web Server to block all links to '.gif', '.jpg' and '.css' files which are not from the domain name ' http://www.yourdomain.com/ '. Before uploading your .htaccess file ensure you replace 'yourdomain.com' with the appropriate web site address.

See if the url in .htaccess is properly set to your domain (ie, localhost).

Reference: http://www.htaccess-guide.com/hot-link-prevention-techniques/