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 ?

Please, Can you share path of inspect element link of thumbnail. and please verify with path image is there or not — Ashok Chitroda, Feb 29 '16 at 06:17
I also faced this problem for a long time. When I inspect with developer plugins .. this image is loaded and also succefully loaded to my directory. I amusing eclipse IDE and already set "Refresh on access". Has somebody experience with this problem ? — Cataclysm, Mar 02 '16 at 19:58
It is work with Vaadin. Please check my full code [Vaadin with JQuery FileUpload](http://stackoverflow.com/questions/24885689/vaadin-with-jquery-fileupload) but .... now I am testing in struts2+JSP ... I got the exactly error as OP. — Cataclysm, Mar 02 '16 at 20:02
@HoangHieu error is just simple 404. 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 my answer .... 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. — Cataclysm, Mar 03 '16 at 16:51
Can you send me sample code php and javascript :)... let me check :). — HoangHieu, Mar 04 '16 at 02:57

score 0 · Answer 1 · edited May 23 '17 at 12:07

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.

score 0 · Answer 2 · answered Mar 09 '16 at 07:50

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 (i.e., localhost).

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

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

2 Answers2