image upload gettings stuck on 100%

[encho]

To update, I have played with nginx.conf file and added some extra settings, which might have helped and first upload test was successful!

New/updated items that I've changed are below marked in red (code block resets it, but it is mostly gzip and mem settings), in case someone else is stuck with this. Not sure what helped, but there you go.

user nginx;
worker_processes 2;
pid /var/run/nginx.pid;

events {
	worker_connections 1024;
	use epoll;
}

http {

	##
	# Basic Settings
	##
        sendfile                        on;
        tcp_nopush                      on;
        tcp_nodelay                     on;
        client_header_timeout           1m;
        client_body_timeout             1m;
        client_header_buffer_size       2k;
        client_body_buffer_size         256k;
        client_max_body_size            100m;
        large_client_header_buffers     4   8k;
        send_timeout                    30;
        keepalive_timeout               60 60;
        reset_timedout_connection       on;
        server_tokens                   off;
        server_name_in_redirect         off;
        server_names_hash_max_size      512;
        server_names_hash_bucket_size   512;

	include /etc/nginx/mime.types;
	default_type application/octet-stream;

	##
	# Logging Settings
	##
	access_log /srv/www/log/nginx.access.log;
	error_log /srv/www/log/nginx.error.log;

        # Compression
        gzip                on;
        gzip_comp_level     9;
        gzip_min_length     512;
        gzip_buffers        8 64k;
        gzip_types          text/plain text/css text/javascript
                            application/x-javascript application/json application/javascript;
        gzip_proxied        any;

	##
	# Virtual Host Configs
	##

	include /etc/nginx/conf.d/*.conf;
	include /etc/nginx/sites-enabled/*.conf;
}

[adrian]

If anyone is getting this issue with images not properly uploading in PHP5.6, make sure to set: always_populate_raw_post_data to -1 in your php.ini file. The deprecated notice is causing header issues with the ajax uploader.

Hope that helps someone else out

[TLT]

Hello folks. I'm trying processwire for the fisrt time, here, and I must say it is very elegant. Love it.

However, I must say I encounter the same problem.

Image field working fine on my local server. (LAMP, debian stable), but getting stuck at 100% on my production server, with no image uploaded at all.

I've tried quite everything I could find on the forum, regarding images upload problems, but :

- I switched to php 5.5

- open_basedir has no value

- I have tried setting everything in /assets to 777. (but it shouldn't be a problem, since removing images works perfectly.)

- Even deleted : re-installed everything from scratch, using export-site-profile module. (nice one, BTW)

Still not working. This goes beyond my poor capacity.

It is definitely not a file size problem. I can't even upload a 60 kb file.

The only suspicious thing I get from my server log looks like this :

"POST /admin/page/edit/?id=1017 HTTP/1.1" 403 185 "http://mysite.com/admin/page/edit/?id=1017&s=1"

However, as I said, even 777 couldn't help.
 

I could try the always_populate_raw_post_data trick, however it has the same value on my local and distant server : Off.

(Moreover, the distant server is a shared server, so I couldn't change the php.ini anyway.)

He who finds the answer will definitely get my eternal gratitude, as it is definitely a problem.

And thanks again to the dev(s ?). This really is a nice CMS. It is exactly what I was looking for. (Coming from drupal, I nearly cry out of joy, every time I have a look at the database.)

(Not even mentionning the API.)

I love it. Will probably use it a lot in a near future.

(If I can get it to upload files, that is. )

[Martijn Geerts]

What are your memory settings ?

[Nico Knoll]

@TLT: have you tried: https://processwire.com/talk/topic/2357-image-upload-gettings-stuck-on-100/?p=22881 ?

[TLT]

@TLT: have you tried: https://processwire.com/talk/topic/2357-image-upload-gettings-stuck-on-100/?p=22881 ?

Well, I'll be damned. That worked.

(Although without any loading bar, obviously...)

I am a very surprised, since I use the very same browser for the local or distant sites (ff 35) and a solid fiber connection. (I'll ask the future webmaster to try with his own provider... We'll be sure.)

Anyway, it DOES work, you are my new hero, Nico Knoll.  Can't thank you enough for that.

[Nico Knoll]

I had the same problem, too, some time ago That's why I know

Btw.: I added this to the Troubleshooting guide: http://processwire.com/docs/tutorials/troubleshooting-guide/page4

[mrjasongorman]

Had the same problem, i increased the PHP memory in php.ini to 256MB. This works but it does take a good 5 seconds or so for large images to crunch down to the specified max image width (in my case 1000px).

The files i'm uploading are between 5 - 10MB.

[LostKobrakai]

There's not much to be done about this. Resizing images need processing power, so either the server does have the required power or the images need to be resized on the client. Either using something like this: https://processwire.com/talk/topic/9814-client-side-image-resizing/ or some image software.

[dlen]

Hi folks,

it showed up again with a shared hosting account at dogado.de.

I could remedy it by switching off html5 upload analog to the best answer at the top.

Only, in the meantime there has been built in an automatic switch between InitHTML5('') and InitOldSchool() at line 381 or so.

The code is

	if (window.File && window.FileList && window.FileReader 
		&& ($("#PageIDIndicator").length > 0 || $('.InputfieldAllowAjaxUpload').length > 0)) {  
		InitHTML5('');  
	} else {
		InitOldSchool();
	}

and this switch criterion fails in the case of said provider. I replaced it with the simple statement

		InitOldSchool();

which is kind of crude, but it works.

In case somebody else wants to do the trick: you have to replace the file InputfieldFile.min.js instead of InputfieldFile.js! So edit the latter, minify it and load it up to wire/modules/Inputfield/InputfieldFile/ .

I would consider this a bug, as the system installed without any warnings or error messages - and doesn't work.

cheerio

Dominik

[ali.donde]

Hello,

I switched off the html5 upload but I'm still having the same issue.
Upload gets stuck at 100% although I can view the image by clicking on it and I can view the thumbnail.
The image I'm uploading is 57kb.

InputfieldTextLength.js:52 Project 3
VM693:1 Uncaught SyntaxError: Unexpected token W in JSON at position 0
    at JSON.parse (<anonymous>)
    at Function.parseJSON (JqueryCore.js?v=1486380319:2)
    at XMLHttpRequest.<anonymous> (InputfieldImage.js?v=119-1486380291:1403)
parseJSON @ JqueryCore.js?v=1486380319:2
(anonymous) @ InputfieldImage.js?v=119-1486380291:1403

 

[adrian]

Hi @ali.donde - welcome to the forums. Sorry, I am in a rush right now, but to help more we will need to know the ajax error. If you click on the Network tab of you dev console and then the Response - have this open before you upload the image and tell us what you get. I expect it's a php Warning, hence the "W"

[ali.donde]

@adrian thanks for your response,

I hope this might help

Warning: set_time_limit(): Cannot set max execution time limit due to system policy in /customers/0/8/3/leenpersoons.be/httpd.www/wire/core/ImageSizerEngine.php on line 951
[{"error":false,"message":"Added file: thumb2.jpg","file":"\/site\/assets\/files\/1021\/thumb2.jpg","size":58386,"markup":"<li id='file_af653fac12475691aef8963cf2f9ee03' class='ImageOuter gridImage ui-widget'><div class='gridImage__tooltip'><table><tr><th>Dimensions<\/th><td>296x203<\/td><\/tr><tr><th>Filesize<\/th><td>57&nbsp;kB<\/td><\/tr><tr><th>Variations<\/th><td>0<\/td><\/tr><\/table><\/div>\n\t\t\t<div class='gridImage__overflow'>\n\t\t\t\t<img src=\"\/site\/assets\/files\/1021\/thumb2.260x0.jpg?nc=1487186841\" alt=\"\" data-original=\"\/site\/assets\/files\/1021\/thumb2.jpg?nc=10\"  \/>\n\t\t\t<\/div>\n\t\t\t\n\t\t\t\t<div class='gridImage__hover'>\n\t\t\t\t\t<div class='gridImage__inner'>\n\t\t\t\t\t\t<label for='' class='gridImage__trash'>\n\t\t\t\t\t\t\t<input class='gridImage__deletebox' type='checkbox' name='delete_project_thumbnail_af653fac12475691aef8963cf2f9ee03' value='1' title='Delete' \/>\n\t\t\t\t\t\t\t<span class='fa fa-trash-o'><\/span>\n\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t<a class='gridImage__edit'>\n\t\t\t\t\t\t\t<span>Edit<\/span>\n\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\t\t\t\t<div class='ImageData'>\n\t\t\t\t\t<h2 class='InputfieldImageEdit__name'><span contenteditable='true'>thumb2<\/span>.jpg<\/h2>\n\t\t\t\t\t<span class='InputfieldImageEdit__info'>57&nbsp;kB, 296&times;203 <\/span>\n\t\t\t\t\t<div class='InputfieldImageEdit__errors'><\/div>\n\t\t\t\t\t<div class='InputfieldImageEdit__buttons'><small>\n\t\t\t<button type='button' data-href='\/processwire\/page\/image\/edit\/?id=1021&file=1021,thumb2.jpg&rte=0&field=project_thumbnail' class='InputfieldImageButtonCrop ui-button ui-corner-all ui-state-default pw-modal-large pw-modal' data-buttons='#non_rte_dialog_buttons button' data-autoclose='1' data-close='#non_rte_cancel'>\n\t\t\t\t<span class='ui-button-text'>\n\t\t\t\t\t<span class='fa fa-crop'><\/span> Crop\n\t\t\t\t<\/span>\n\t\t\t<\/button>\n\t\t\t<button type='button' data-href='\/processwire\/page\/image\/variations\/?id=1021&file=thumb2.jpg&modal=1&varcnt=varcnt_project_thumbnail_af653fac12475691aef8963cf2f9ee03' class='ui-button ui-corner-all ui-state-default pw-modal-large pw-modal' data-buttons='button'>\n\t\t\t\t<span class='ui-button-text'>\n\t\t\t\t\t<span class='fa fa-files-o'><\/span> \n\t\t\t\t\tVariations\n\t\t\t\t\t<span class='ui-priority-secondary'>(0)<\/span>\n\t\t\t\t<\/span>\n\t\t\t<\/button>\n\t\t\t<\/small><\/div>\n\t\t\t\t\t<div class='InputfieldImageEdit__core'><div class='InputfieldFileDescription'><label for='description_project_thumbnail_af653fac12475691aef8963cf2f9ee03' class='detail'>Description<\/label><input type='text' name='description_project_thumbnail_af653fac12475691aef8963cf2f9ee03' id='description_project_thumbnail_af653fac12475691aef8963cf2f9ee03' value='' \/><\/div><\/div>\n\t\t\t\t\t<div class='InputfieldImageEdit__additional'><\/div>\n\t\t\t\t\t<input class='InputfieldFileSort' type='text' name='sort_project_thumbnail_af653fac12475691aef8963cf2f9ee03' value='0' \/>\n\t\t\t\t\t<input class='InputfieldFileReplace' type='hidden' name='replace_project_thumbnail_af653fac12475691aef8963cf2f9ee03' \/>\n\t\t\t\t\t<input class='InputfieldFileRename' type='hidden' name='rename_project_thumbnail_af653fac12475691aef8963cf2f9ee03' \/>\n\t\t\t\t<\/div>\n\t\t\t<\/li>","replace":false,"overwrite":0}]

 

[adrian]

1 minute ago, ali.donde said:

@adrian thanks for your response,

I hope this might help

Warning: set_time_limit(): Cannot set max execution time limit due to system policy in /customers/0/8/3/leenpersoons.be/httpd.www/wire/core/ImageSizerEngine.php on line 951
[{"error":false,"message":"Added file: thumb2.jpg","file":"\/site\/assets\/files\/1021\/thumb2.jpg","size":58386,"markup":"<li id='file_af653fac12475691aef8963cf2f9ee03' class='ImageOuter gridImage ui-widget'><div class='gridImage__tooltip'><table><tr><th>Dimensions<\/th><td>296x203<\/td><\/tr><tr><th>Filesize<\/th><td>57&nbsp;kB<\/td><\/tr><tr><th>Variations<\/th><td>0<\/td><\/tr><\/table><\/div>\n\t\t\t<div class='gridImage__overflow'>\n\t\t\t\t<img src=\"\/site\/assets\/files\/1021\/thumb2.260x0.jpg?nc=1487186841\" alt=\"\" data-original=\"\/site\/assets\/files\/1021\/thumb2.jpg?nc=10\"  \/>\n\t\t\t<\/div>\n\t\t\t\n\t\t\t\t<div class='gridImage__hover'>\n\t\t\t\t\t<div class='gridImage__inner'>\n\t\t\t\t\t\t<label for='' class='gridImage__trash'>\n\t\t\t\t\t\t\t<input class='gridImage__deletebox' type='checkbox' name='delete_project_thumbnail_af653fac12475691aef8963cf2f9ee03' value='1' title='Delete' \/>\n\t\t\t\t\t\t\t<span class='fa fa-trash-o'><\/span>\n\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t<a class='gridImage__edit'>\n\t\t\t\t\t\t\t<span>Edit<\/span>\n\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\t\t\t\t<div class='ImageData'>\n\t\t\t\t\t<h2 class='InputfieldImageEdit__name'><span contenteditable='true'>thumb2<\/span>.jpg<\/h2>\n\t\t\t\t\t<span class='InputfieldImageEdit__info'>57&nbsp;kB, 296&times;203 <\/span>\n\t\t\t\t\t<div class='InputfieldImageEdit__errors'><\/div>\n\t\t\t\t\t<div class='InputfieldImageEdit__buttons'><small>\n\t\t\t<button type='button' data-href='\/processwire\/page\/image\/edit\/?id=1021&file=1021,thumb2.jpg&rte=0&field=project_thumbnail' class='InputfieldImageButtonCrop ui-button ui-corner-all ui-state-default pw-modal-large pw-modal' data-buttons='#non_rte_dialog_buttons button' data-autoclose='1' data-close='#non_rte_cancel'>\n\t\t\t\t<span class='ui-button-text'>\n\t\t\t\t\t<span class='fa fa-crop'><\/span> Crop\n\t\t\t\t<\/span>\n\t\t\t<\/button>\n\t\t\t<button type='button' data-href='\/processwire\/page\/image\/variations\/?id=1021&file=thumb2.jpg&modal=1&varcnt=varcnt_project_thumbnail_af653fac12475691aef8963cf2f9ee03' class='ui-button ui-corner-all ui-state-default pw-modal-large pw-modal' data-buttons='button'>\n\t\t\t\t<span class='ui-button-text'>\n\t\t\t\t\t<span class='fa fa-files-o'><\/span> \n\t\t\t\t\tVariations\n\t\t\t\t\t<span class='ui-priority-secondary'>(0)<\/span>\n\t\t\t\t<\/span>\n\t\t\t<\/button>\n\t\t\t<\/small><\/div>\n\t\t\t\t\t<div class='InputfieldImageEdit__core'><div class='InputfieldFileDescription'><label for='description_project_thumbnail_af653fac12475691aef8963cf2f9ee03' class='detail'>Description<\/label><input type='text' name='description_project_thumbnail_af653fac12475691aef8963cf2f9ee03' id='description_project_thumbnail_af653fac12475691aef8963cf2f9ee03' value='' \/><\/div><\/div>\n\t\t\t\t\t<div class='InputfieldImageEdit__additional'><\/div>\n\t\t\t\t\t<input class='InputfieldFileSort' type='text' name='sort_project_thumbnail_af653fac12475691aef8963cf2f9ee03' value='0' \/>\n\t\t\t\t\t<input class='InputfieldFileReplace' type='hidden' name='replace_project_thumbnail_af653fac12475691aef8963cf2f9ee03' \/>\n\t\t\t\t\t<input class='InputfieldFileRename' type='hidden' name='rename_project_thumbnail_af653fac12475691aef8963cf2f9ee03' \/>\n\t\t\t\t<\/div>\n\t\t\t<\/li>","replace":false,"overwrite":0}]

 

Absolutely - you will need to forward this onto your hosting provider so that they can remove this restriction.

[ali.donde]

Ok, thank you very much!

[ali.donde]

Hi @adrian,

I took contact with my host (One.com)
and they gave me this answer:

Quote

This issue is due to a limitation in our servers. The PHP max_execution_time is only set to 50 seconds and unfortunately this value cannot be modified or increased in any way.

Can this be resolved any other way or do I have to migrate to another host?

 

[adrian]

Hi @ali.donde,

I think there might be a little bug in the PW core regarding this. The code is supposed to check the existing value and not try to set it if it's already above the requested value. Unless you are running the iMagick image engine (additional module), then it should only be trying to set it to 30 seconds. If your server is already set to 50, then it should not try to change it. You can see that logic here: 

https://github.com/processwire/processwire/blob/35df716082b779de0e53a3fcf7996403c49c9f8a/wire/core/ImageSizerEngine.php#L942-L948

I am going to ping in @horst here to see if I am missing something, but until he replies, you can probably get going by commenting out that line 951 that is producing the error. 

@horst - any thoughts on why this isn't working as expected. Have you ever come across a situation where ini_get('max_execution_time'); doesn't return the correct value?

The other possibility might be from this line:

https://github.com/processwire/processwire/blob/35df716082b779de0e53a3fcf7996403c49c9f8a/wire/core/ImageSizer.php#L328

It's a different version of the setTimeLimit function that tries to set it via the setOptions method, but that method doesn't actually include a "timeLimit" option in its switch logic: https://github.com/processwire/processwire/blob/35df716082b779de0e53a3fcf7996403c49c9f8a/wire/core/ImageSizerEngine.php#L1047-L1089

 

[ali.donde]

Hi @adrian,

 

commenting out line 951 indeed (temporary) solves the problem.
Thank you for your support so far!

[Dbum]

I have tried everything here and still having the same problem.... kind of....  When I access my server over the Internet it gives me the issue but when I VPN into my network and access it with my LAN and port address it works just fine.

Internet = Port 80 Nat'd to 9000 on LAN

VPN = just accessing the site from port 9000

Just thought I would throw that in just incase it helps???  This pretty much resolved my issue because as long as I can upload fast, I don't mind if I have to use VPN vs. public access.

[Autofahrn]

I'm struggling the same issue from time to time on a shared server (Strato) as well. One day image upload works nicely, next day not. I've just realized that they are running a "smart" filter and block suspicious traffic with a 503 (Service unavailable) response (to eliminate automated guestbook spam, they say). This 503 response obviously crashes the JSON parser so upload stuck at 100%. Disabling the server-side "smart" filter removed that issue for me.

Not sure if it is feasible, but can't the AJAX response be checked if it at least looks like a JSON packet or catch the JSON parser exception and display some useful popup?

Just in case, reply from server is:

Quote

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>503 Service Unavailable</title>
</head><body>
<h1>Service Unavailable</h1>
<p>The server is temporarily unable to service your
request due to maintenance downtime or capacity
problems. Please try again later.</p>
</body></html>

Stack trace is:

VM268:1 Uncaught SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) at Function.parseJSON (JqueryCore.js?v=1516377249:2) at XMLHttpRequest.<anonymous> (InputfieldImage.min.js?v=119-1516377246:1)

	parseJSON	@	JqueryCore.js?v=1516377249:2
	(anonymous)	@	InputfieldImage.min.js?v=119-1516377246:1