Jump to content
Matt_P

Problems Uploading Images

Recommended Posts

Hi everyone,

I am new to Processwire and am hoping that you will be able to help me out.

I have currently taken over a website from one of my colleagues and have been asked to implement a gallery.  I have created the appropriate fields and code but have come across an issue when trying to upload images to the field.

Initially I uploaded multiple images of varying sizes and I found that the loading bar reaches the end very quickly then the loading icon/graphic just continues to spin, I waited for an hour or so for them to load but it never did, it just kept spinning. I then reloaded the page and the images were not shown in the field.

I decided to then upload one small image (roughly 200KB) and again it did the same as above. I left the site 24 hours to see if it would fix itself. However when that time had passed and I tried again it failed again.

I asked my colleague if he had any issues with uploading images but apparently it was fine when he was using it.

Does anyone know what is causing this and if there is a fix?

See attached image.

Thanks,

Matt

src_pr.png

Share this post


Link to post
Share on other sites

Hi gmclelland,

Thanks for your quick response.

After reading the article you linked I noticed that people have taken screenshots of the page in inspector. I also get similar looking errors and have attached my screenshots, the first one using Chrome and the second using Firefox.

I am looking into xdebug at the moment and am hoping that will resolve my issue.

Based on my screenshots do you think xdebug will resolve the issue?

Thanks,

Matt

scr_chr.png

scr_fir.png

Share this post


Link to post
Share on other sites

Few questions for you:

How did you install php on your setup?

What version of php are you running?

Is xdebug installed?

I installed php via homebrew on a mac using php 5.6.23.

Using always_populate_raw_post_data = -1 didn't work for me.

I had to update/reinstall php with 

brew unlink php56

brew unlink php56-mcrypt

brew unlink php56-xdebug

brew install php56

brew install php56-mcrypt

brew install php56-xdebug

restart apache and then it started working

Note: In the github issue I stated that it was only working with xdebug enabled, but now(after following the steps above) I can run it with xdebug disabled.

Hope that helps

  • Like 1

Share this post


Link to post
Share on other sites

Hi gmclelland, 

- It is not locally set up, instead It is set up in a dev hosting area. 

- It is using PHP Version 5.4.45.

- xdebug is not installed. 

The following is enabled:

" './configure' '--disable-fileinfo' '--enable-bcmath' '--enable-calendar' '--enable-exif' '--enable-ftp' '--enable-gd-native-ttf' '--enable-libxml' '--enable-mbstring' '--enable-pdo=shared' '--enable-sockets' '--enable-zip' '--prefix=/usr/local' '--with-apxs2=/usr/local/apache/bin/apxs' '--with-bz2' '--with-curl=/opt/curlssl/' '--with-freetype-dir=/usr' '--with-gd' '--with-gettext' '--with-imap=/opt/php_with_imap_client/' '--with-imap-ssl=/usr' '--with-jpeg-dir=/usr' '--with-kerberos' '--with-libdir=lib64' '--with-libxml-dir=/opt/xml2/' '--with-mcrypt=/opt/libmcrypt/' '--with-mysql=/usr' '--with-mysql-sock=/var/lib/mysql/mysql.sock' '--with-mysqli=/usr/bin/mysql_config' '--with-openssl=/usr' '--with-openssl-dir=/usr' '--with-pcre-regex=/opt/pcre' '--with-pdo-mysql=shared' '--with-pdo-sqlite=shared' '--with-pic' '--with-png-dir=/usr' '--with-pspell' '--with-xpm-dir=/usr' '--with-xsl=/opt/xslt/' '--with-zlib' '--with-zlib-dir=/usr' "

Thanks,

Matt

Share this post


Link to post
Share on other sites

Maybe you could try updating PHP to 5.6?  I think PHP 5.4 is unsupported now anyways?

Maybe also check your upload_tmp_dir = "/tmp" in php.ini is set to the correct location for your OS.

I'm not sure what else to try...:(

You might list your Operating Systems as well in case others chime in here to help.... maybe upload your php.ini file?

  • Like 1

Share this post


Link to post
Share on other sites

Also... Before the changes, I was having this problem with 2.x and 3.x versions of Processwire.  Now both work.

  • Like 1

Share this post


Link to post
Share on other sites

Hi gmclelland,

It is using Linux CentOS.

Thanks for your continued support, I will have a look into that and I'll let you know the outcome.

Thanks,

Matt

Share this post


Link to post
Share on other sites

Hi its me again,

Unfortunately I have not had any luck with the suggestions so far. Does anyone have anymore suggestions?

Thanks,

Matt

Share this post


Link to post
Share on other sites

If you get an error json parse error, you need to check what data is returned from the server. You can see it with the network tab of e.g. Firefox. When selected the ajax call there, you have additional tabs from which one is called server answer or something that like. What does it contain?

Share this post


Link to post
Share on other sites

I had a similar problem in the past. Upload finished, but the image wasn't uploaded / saved. 
It was php-mbstring related, which I forgot to install...

Your problem looks different (mbstring is listed as enabled), but maybe it's also php module (json, ...) related too?

Did you check all the logs (apache / php and PW logs)? 

Share this post


Link to post
Share on other sites
On 7/25/2016 at 4:05 PM, fbg13 said:

Did you check the logs? What do they say?

See attached. 

The top half of the image is from the Processwire Error Logs and the second is from the Error logs on the server.

logs_scr.png

Share this post


Link to post
Share on other sites

Try using the native Image fields instead of ImageExtra which is an external module. Perhaps you could post your issues in the thread of ImageExtra.

  • Like 1

Share this post


Link to post
Share on other sites
8 minutes ago, arjen said:

Try using the native Image fields instead of ImageExtra which is an external module. Perhaps you could post your issues in the thread of ImageExtra.

I need the ImageExtra module for the gallery I am making. I have used ImageExtra on another website in the same dev area and that works fine. I think this is more of a server issue.

Share this post


Link to post
Share on other sites

Hi adrian,

Thank you very much that has solved my issue.

Thanks to everyone else as well.

Matt

  • Like 2

Share this post


Link to post
Share on other sites

Well crap, now for some reason I can't upload images or files on my mac.  Same problem, but I'm just using core image and file fields.  It was working, I'm not sure what changed?  This happens with PW2 and PW3 sites when I try to upload the files.

I've tried the same in firefox, chrome, and safari.
When I check my response in Chrome it shows the following:

<br />
<b>Deprecated</b>:  Automatically populating $HTTP_RAW_POST_DATA is deprecated and will be removed in a future version. To avoid this warning set 'always_populate_raw_post_data' to '-1' in php.ini and use the php://input stream instead. in <b>Unknown</b> on line <b>0</b><br />
<br />
<b>Warning</b>:  Cannot modify header information - headers already sent in <b>Unknown</b> on line <b>0</b><br />
[{"error":false,"message":"Added file: globals.jpg","file":"\/site\/assets\/files\/1002\/globals.jpg","size":25337,"markup":"\n\t<li id='file_91ef455ec27970cb238861b2c8895d64' class='InputfieldFileItem InputfieldImage ui-widget'>\n\t\t<p class='InputfieldFileInfo InputfieldItemHeader ui-widget ui-widget-header ui-helper-clearfix'>\n\t\t\t<span class='HideIfSingle HideIfEmpty InputfieldFileDrag'><i class='fa fa-sort'><\/i> <\/span>\n\t\t\t<i class='fa fa-caret-right InputfieldFileDrag HideIfMultiple'><\/i> \n\t\t\t<label class='InputfieldFileDelete'><input type='checkbox' name='delete_images_91ef455ec27970cb238861b2c8895d64' value='1' title='Delete' \/><i class='fa fa-fw fa-trash'><\/i><\/label>\n\t\t\t<a class='InputfieldFileMove InputfieldFileMoveBottom' href='#' title='Move to bottom'><i class='fa fa-fw fa-angle-double-down'><\/i><\/a> \n\t\t\t<a class='InputfieldFileMove InputfieldFileMoveTop' href='#' title='Move to top'><i class='fa fa-fw fa-angle-double-up'><\/i><\/a> \n\t\t\t<a class='InputfieldFileName pw-modal pw-modal-large' title='globals.jpg: globals.jpg (281x386)' href='\/admin\/page\/image\/edit\/?id=1002&file=1002,globals.jpg&rte=0&field=images' data-buttons='#non_rte_dialog_buttons button' data-autoclose='1' data-close='#non_rte_cancel'>globals.jpg <i class='fa fa-pencil ui-priority-secondary'><\/i><\/a> \n\t\t\t<span class='InputfieldFileStats'>25 kB, 281x386  <\/span> \n\t\t<\/p>\n\t\t<div class='InputfieldFileData ui-widget ui-widget-content'>\n\t\t\t<div class='InputfieldImagePreview'>\n\t\t\t\t<a class='InputfieldFileLink' target='_blank' href='\/site\/assets\/files\/1002\/globals.jpg?nc=10'><img height=\"100\" src=\"\/site\/assets\/files\/1002\/globals.0x100.jpg?nc=1452724334\" alt=\"\" data-gridsize=\"100\"  \/><\/a>\n\t\t\t\t<div class='InputfieldImageActions'>\n\t\t\t\t\t<a title='globals.jpg (281x386)' href='\/admin\/page\/image\/edit\/?id=1002&file=1002,globals.jpg&rte=0&field=images' class='pw-modal pw-modal-large' data-buttons='#non_rte_dialog_buttons button' data-autoclose='1' data-close='#non_rte_cancel'><i class='fa fa-fw fa-crop'><\/i><\/a>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t<div class='InputfieldFileDescription'><label for='description_images_91ef455ec27970cb238861b2c8895d64' class='detail'>Description<\/label><input type='text' name='description_images_91ef455ec27970cb238861b2c8895d64' id='description_images_91ef455ec27970cb238861b2c8895d64' value='' \/><\/div>\n\t\t\t<input class='InputfieldFileSort' type='text' name='sort_images_91ef455ec27970cb238861b2c8895d64' value='0' \/>\n\t\t<\/div>\n\t<\/li>","replace":false,"overwrite":0}]

I tried disabling xdebug, turning off php error warnings, turning off debug mode in Processwire, always_populate_raw_post_data = -1 and 0 in my php.ini all while restarting apache between each change.

In my PHP error logs I get:

[Fri Jul 29 19:01:42.816150 2016] [:error] [pid 900] [client 127.0.0.1:50397] PHP Deprecated:  Automatically populating $HTTP_RAW_POST_DATA is deprecated and will be removed in a future version. To avoid this warning set 'always_populate_raw_post_data' to '-1' in php.ini and use the php://input stream instead. in Unknown on line 0, referer: http://pw3.dev/admin/page/edit/?id=1019
[Fri Jul 29 19:01:42.816467 2016] [:error] [pid 900] [client 127.0.0.1:50397] PHP Warning:  Cannot modify header information - headers already sent in Unknown on line 0, referer: http://pw3.dev/admin/page/edit/?id=1019

I'm running PHP 5.6.24 / Apache/2.4.18 on my mac installed with homebrew.

Any other help is appreciated

 

Share this post


Link to post
Share on other sites

Haven't you already solved this :)

 

Share this post


Link to post
Share on other sites

I thought so, but then out of the blue it just stopped working and I can't seem to figure out how to get it working again.

Share this post


Link to post
Share on other sites

I don't know homebrew, but to me it looks like the ini setting for "always_populate_raw_post_data" isn't (finally) set to -1. Have you checked it on runtime?

The issue simply is, that you get a PHP warning as return of an ajax request, what then breaks your app (PW), as it expects another return, (a json object, and not a PHP server warning).

You need to disable all php warning output, other then logfile, you need to check your ini settings for the mentioned setting on runtime, and / or you should set the mentioned setting on runtime too.

Sometimes there are multiple php.ini files on a system, and it isn't quite obvious which one(s) are involved. So, additionally you may scan your filesystem for all php.ini files and explicitly set "always_populate_raw_post_data" to -1 in every file, if the runtime check shows that it isn't set to this.

  • Like 2

Share this post


Link to post
Share on other sites

In addition to @horst's comments, in case you don't know, you can find out which php.ini file is being used from phpinfo() - if you have Tracy installed, turn on the PHP Info panel.

Otherwise you can get this info from php -i|more in your terminal.

Sorry if this is already basic knowledge for you!

  • Like 2

Share this post


Link to post
Share on other sites

I'm so confused.  Today it just started working.  I didn't even do anything.  Maybe opcache related?  Even tested on different PW2 and PW3 sites.

HI @adrian and @horst.  I tried Tracy debugger and here is what it shows (see attachment)

It also confirmed that I was editing the correct php.ini file.

Thank you both for your help.  I'm hoping it won't happen again :)

 

Test | My Processwire Site.jpg

  • Like 3

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By fruid
      I'm using custom fields for images (as mentioned here: processwire.com/blog/posts/pw-3.0.142) for a specific images-field, the images of which need to have an HTML-caption. It works fine so far. Now I'm trying to import pages that use this field. I first exported some pages of that kind to see what the spreadsheet would look like. It seems to not separate the captions for each images but instead put all images in one cell and all captions in another.
      How could I go about importing these pages and assign the captions to the images accordingly?
    • By longtom
      I'm creating this site where a 'motherpage' renders all subpages.  I switched on frontend editing to make editing as easy as possible to end-users. 
      I'm stuck on adding images to the subpages.  The frontend editor suggests to add images to the motherpage (that has no images field on it, nor should it), so it asks for another page to add the images to/from. 
      Is there a way to make the frontend-editor context aware so that it looks for images in the correct subpage? 
      I already tried the 'type C' approach and added <edit field="body" page="id">, but that doesn't seem to do the trick. 
    • By Rossie
      Hi Everyone,
      I wish to display a gallery of images from multiple pages on the site.  These images have custom fields created through page reference called 'furniture_list_type'.  Each image now has a radio button which has been selected.
      In  the example code below all images appear from the "gallery20", however the selector  "gallery20.furniture_list_type=3390" does not have any effect.  "3390" is the id of the page reference "chair" selected through the page reference.  I wish only images selected as chair to show.
      Hope someone can help with this.
       
      Thanks,
       
      Calum
       
      $imagePages = $pages->find("template=makers-child, gallery20.furniture_list_type=3390") ;                     foreach($imagePages as $p) {     echo "<ul>";     foreach($p->gallery20 as $image) {         echo "<li><img src='{$image->url}'>{$image->furniture_list_type}</li>";     }     echo "</ul>";      }
    • By daniel_puehringer
      Hey,

      so we all know about SEO and the importance of performance. Basically we do it, because if no one finds the website we just built, it´s frustrating. We all try to write clean markup, css and js code and most might have a webpack/gulp/whatever pipeline to minimize css&js.
      But when thinking about it, optimizing your pipeline might save you a few (hundreds) of kb, compared to loading an image with 1 mb that´s literally nothing and frankly just ridiculous.

      Don´t get me wrong, frontend pipelines are great and should be used, but let´s shift your "I will optimize the shit out of that 3 css lines" focus to something different: try to serve images as fast as possible, this is where the performance boost really happens.

      I´m no pro on processwire so far, but I built a very easy to use picture element, which some of you could find interesting:

      1. the picture comes with 3 different sizes: one for mobile (keep in mind the double dpi, therefore width of 828px), one for tablet and one for desktop
      2. the picture generates a webp version and the original file extension as a fallback
      3. the filesize of each element is rendered within the "data" attribute
      4. lazy loading(sooo important!!!) is done via the native 'loading="lazy"' attribute.


      Please try it out and see the difference 🙂

      I posted this so others can easily optimize their images, but I would also like to hear your suggestions in making it better. Maybe you could decrease the rendering time or maybe you have some easy improvements.

      Please let me know.

      Greetings from Austria!


       
      <picture> <source data="<?php echo($oElement->repeater_image->width(828)->webp->filesize);?>" media="(max-width: 414px)" srcset="<?php echo($oElement->repeater_image->width(828)->webp->url) ?> 2x" type="image/webp"> <source data="<?php echo($oElement->repeater_image->width(828)->filesize) ?>" media="(max-width: 414px)" srcset="<?php echo($oElement->repeater_image->width(828)->url) ?> 2x" type="image/<?php echo($oElement->repeater_image->ext)?>"> <source data="<?php echo($oElement->repeater_image->width(767)->webp->filesize) ?>" media="(min-width: 415) and (max-width: 767px)" srcset="<?php echo($oElement->repeater_image->width(767)->webp->url) ?> 2x" type="image/webp"> <source data="<?php echo($oElement->repeater_image->width(767)->filesize) ?>" media="(min-width: 415) and (max-width: 767px)" srcset="<?php echo($oElement->repeater_image->width(767)->url) ?> 2x" type="image/<?php echo($oElement->repeater_image->ext)?>"> <source data="<?php echo($oElement->repeater_image->webp->filesize) ?>" media="(min-width: 768px)" srcset="<?php echo($oElement->repeater_image->webp->url) ?>" type="image/webp"> <source data="<?php echo($oElement->repeater_image->filesize) ?>" media="(min-width: 768px)" srcset="<?php echo($oElement->repeater_image->url) ?>" type="image/<?php echo($oElement->repeater_image->ext)?>"> <img data="<?php echo($oElement->repeater_image->filesize) ?>" class="img-fluid" loading="lazy" src="<?php echo($oElement->repeater_image->url) ?>" alt="<?php echo($oElement->repeater_image->description) ?>" type="image/<?php echo($oElement->repeater_image->ext)?>"> </picture>
    • By picarica
      so hello i am trying to combine my whole ass gallery with custom created watermark, i wanted to combine my images with simple text little opaque but that seemed harder and i couldnt make it work, well i cant make this work either, how are you handling watermarks? i would prefer if it would be plain PHP no imagemagick or some custom plugins scripts, but if neccesary i wont deny.
      so here's my code
      $pa = $pages->find("template=basic-page|art_gallery, images.tags!=''"); /* $pa = $pages->find("has_parent!=2,id!=2|7,status<".Page::statusTrash.",include=all"); */ echo "<div BRUUH class='row gtr-50 gtr-uniform js-filter' id='gal' >"; foreach ($pa as $p) { foreach($p->images as $image) { $obrazok = $image->url; $image = imagecreatefromjpeg($obrazok); $frame = imagecreatefromjpeg($pages->get('/settings/')->watermark->url); /* echo $image; echo $frame; */ # If you know your originals are of type PNG. imagecopymerge($image, $frame, 0, 0, 0, 0, 50, 50, 100); # Output straight to the browser. $img = imagepng($image); $options = array('quality' => 70, 'upscaling' => true, 'cropping' => 'center', 'sharpening'=>'medium'); $thumb = $img->size(400, 300, $options); $large = $img->size(1200, 0, $options); echo "<div class='$image->tags' class='col-4'>"; echo "<span style='overflow:hidden;'class='image fit'>"; echo "<a href='$large->url'>"; echo "<img class='uk-transform-origin-top-right' uk-scrollspy='cls: uk-animation-fade; repeat: false' src='$thumb->url' alt='$image->tags'>"; echo "</a>"; echo "</span>"; echo "</div>"; } };  
×
×
  • Create New...