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 ?

Gunner

Please, Can you share path of inspect element link of thumbnail. and please verify with path image is there or not – Henning

@AshokChitroda, I have edited the question. – Gunner

If I delete .htaccess file then it works. Why is it so ? – Gunner

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 ? – Jarib

It is work with Vaadin. Please check my full code Vaadin with JQuery FileUpload but .... now I am testing in struts2+JSP ... I got the exactly error as OP. – Jarib

Can you show me log error from console of browser ?? – Kordofan

@Kordofan 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. – Jarib

Can you send me sample code php and javascript :)... let me check :). – Kordofan

What's the content of the .htacces file? – Tacy

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.

Jarib

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

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

Cynical