Jump to content
onjegolders

image upload gettings stuck on 100%

Recommended Posts

Hi guys, I've seen this has been an issue for others but it involved PHP safe_mode being on which isn't the case here.

I've just transferred a site from dev to live using the site export module and when I go to upload a new image, the bar goes all the way to 100% and then the image doesn't show.

Could anyone point me in the right direction? Am pretty sure assets is writable...

  • Like 1

Share this post


Link to post
Share on other sites

What does JS console say? PW error logs? Apache error logs?

Share this post


Link to post
Share on other sites

What does JS console say? PW error logs? Apache error logs?

Hi Apeisa, I'm getting the following JS errors:

Failed to load resource: the server responded with a status of 500 (Internal Server Error) http://mysite.com/processwire/page/edit/?id=1

Uncaught TypeError: Cannot read property 'error' of null http://mysite.com/wire/modules/Inputfield/InputfieldFile/InputfieldFile.js

and lots of:

Failed to load resource: the server responded with a status of 404 (Page Not Found) with links to the image file and timestamp on the end

Am thinking something must have gone wrong with the file transfer?

Share this post


Link to post
Share on other sites

Check the GD library, You can do it quickly like this:

<?php
if (extension_loaded('gd') && function_exists('gd_info')) {
echo "hm no, GD is not the problem...";
}else{
echo "ah! I think we found it ";
}
  • Like 1

Share this post


Link to post
Share on other sites

Had this issue just recently. This is something weird, I think Mac permission related (copied the files from an USB stick which was written by WIN). Some images work, some others don't. First I thought it has something to do with the size of the images, but that was not the case. What I did (also sounds weird): I used "Automator", a very useful app, to resize the images to a reasonable size (even if not needed). So just create a new workflow with 1. "Get specified Finder items" and 2. "Scale images". Drag your files into the upper window and enter the size in the second window to 1600 or whatever. The images get rescaled and rewritten. After that the permissions / files seem to be okay for drag&drop.

Share this post


Link to post
Share on other sites

Look into increasing the max file upload size in your php configuration file (php.ini).

I had the same problem and this helped after I increased it. Set it something like 100mb even if you know you won't need that much.

Share this post


Link to post
Share on other sites

Thanks Made and Andrew, so you think it's a file size issue? Don't think the images were even that big, it feels more like that somewhere in the process of exporting my profile, something went wrong - though I have no idea what as I followed all the steps?

Check the GD library, You can do it quickly like this:

<?php
if (extension_loaded('gd') && function_exists('gd_info')) {
echo "hm no, GD is not the problem...";
}else{
echo "ah! I think we found it ";
}

I've since deleted off the server and seeing as it takes about 367889999967 years for me to upload via FTP will try again later when I have another profile site to upload :) Will let you know, thanks!

Share this post


Link to post
Share on other sites

you can test it in any php file, dosen't have to be inside PW

Share this post


Link to post
Share on other sites

you can test it in any php file, dosen't have to be inside PW

Ok great thanks, I'll upload it to the same server

Edit: hm no, GD is not the problem...

:)

Share this post


Link to post
Share on other sites

EDIT - I'm a dummy who should learn to check his code before saying silly things.

Crop module is working fine, still don't know what's wrong with my dev to live import/export process

Share this post


Link to post
Share on other sites

Working on a Mac using Safari and Firefox, I recently had exactly the same problem after moving a website from developing server to live server (from another provider). After that I could only upload images with a file size of max. 200 KB, while max upload file size set by the provider was 16 MB.

In Internet Explorer 8 I had no problems uploading larger files. In that browser the AJAX-uploader (with drag-and-drop functionality) isn't supported, instead the 'classic' uploader is used. So I thought the AJAX-uploader should be the problem. I solved the problem after editing line 296 of InputfieldFIle.js (wire/modules/Inputfield/InputfieldFile/) from:

InitHTML5(); 

into:

InitOldSchool();

Strange thing is that this problem only shows up at some providers...

  • Like 3

Share this post


Link to post
Share on other sites

I wonder if there is some mod_security setting that prevents HTML5 uploads from working at some providers. That's the only thing I can think of.

Share this post


Link to post
Share on other sites

I had the same issue when uploading images. Turned out that my storage space on the server was full. You probably already checked but wanted to mention it as a possible problem.

This also turned out to be a mod_security setting. Once changed everything started working as expected.

Share this post


Link to post
Share on other sites

I had the same issue right now for the first time.

It's my own server, so there are no restrictions through a provider. I have already installed several PW sites on this server and never had that problem before.

The error console says:

Failed to load resource: the server responded with a status of 500 (Internal Server Error)
JqueryCore.js:2SyntaxError: JSON Parse error: Unexpected identifier "Error"

I checked if maybe the storage space was full, but that was not the fact.

The main PHP version on the server is still 5.2.17 - i have decided to install PHP 5.3 additional because there are some websites running on my server who are not compatible to > PHP 5.2

On the webspace where i encountered that problem i had chosen PHP 5.3 through htaccess:

AddHandler application/x-httpd-php53 .php

When i remove that line so PHP 5.2.17 is used for this webspace again, everything works fine with the upload.

I am using the latest dev branch of PW.

So in this case it seems to be a PHP version problem - but of course it's strange that the problem appears under the additional installed 5.3, not under 5.2.17 

Share this post


Link to post
Share on other sites

Check your /site/assets/logs/errors.txt to see if you can get more details about the error that occurred. A PHP version change really shouldn't matter for this, but I'm wondering if the 5.3 and 5.2 are running from different php.ini files with different restrictions. 

Share this post


Link to post
Share on other sites

Hm, I now have the same 'it gets stuck' error with js error 'Unexpected "<" in JqueryCore.js'?

Share this post


Link to post
Share on other sites

You most likely ran out of memory. MAMP and other *AMP installs often come configured with 32 MB memory limit for PHP, which isn't enough to upload largish files via ajax. View your phpinfo to see where your php.ini file is located. Edit it, and change memory_limit to 256M. Also in php.ini, update post_max_size to be the same or larger. Restart server and double check that the changes took effect by finding memory_limit in your phpinfo output. 

  • Like 4

Share this post


Link to post
Share on other sites

I had this same problem uploading images on my localhost setup.

Increasing php.ini post_max_size and memory_limit to 256M did the trick, thanks!

Is there an upper limit for how high this can be increased? I plan to upload some large soundfiles in the future.

It's great to get back into ProcessWire after being busy with other things for a little while!

Share this post


Link to post
Share on other sites

Depends on the Hardware of your server. Most standard shared hosting don't allow setting to high values.

When uploading big files, you should also check out the settings "max_input_time" and "max_execution_time".

  • Like 1

Share this post


Link to post
Share on other sites

I've been having this problem again recently and I have no idea why but if I rename the file extensions from .jpg to .png they upload fine.

Strange.

Edit: Scratch that, they upload fine but then behave weirdly in the front end and don't seem to be cropped.

Share this post


Link to post
Share on other sites

I think it was as Ryan said a memory issue, I upped it to 256m and all seems well again. Mysteriously changing them to .png somehow got them uploaded but then they wouldn't get cropped in the front end.

Share this post


Link to post
Share on other sites

Sorry for bumping this old topic, but I still have this problem on my server. It happens to some images or files, regardless of the type, which exceed certain size (I think over 1MB, but not sure). I am not on Apache though, it is Nginx+PHP-FPM setup.

Anyone who was able to overcome such problems is welcome to suggest something. Thanks!

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 Xonox
      Hi,
       
      I'm trying to upload images from a folder into a page. I need to replace the images instead of adding. The image field already has the replace existing images turned on, but it doesn't seem to be enough.
       
      My code:
      foreach($files as $file) { if(substr($file, 0, 1) != '.' && $file != '.' && $file != '..') { // Get SKU $file_sku = substr($file, 0, 9); // Check for book $book = $pages->get('sku=' . $file_sku); if(!$book->id) { // Book doesn't exist } else { // Upload image into book !!! THIS CODE ADDS FILE INSTEAD OF REPLACING. HOW CAN I REPLACE? $book->book_images->add($upload_directory . '/' . $file); // Delete file unlink($upload_directory . '/' . $file); } // Save book if($book->id) $book->save(); } }  
      What am I missing?
    • By Guy Incognito
      I'm trying to implement a front-end image upload form for user profile pictures, to a field called 'profile_picture'. The code is based on the various examples found around these forums but isn't yet 100% right.
      The form successfully submits the image to the server and updates the field in the dashboard. When you submit the firm, the page reloads and uploads the image but the template still loads the old image path (now broken path as the old image has been removed).
      I can only get the new image to show if I hit enter in the address bar forcing the page to reload.
      Any ideas? Is it a caching issue, or something to do with the order of the script? It makes no difference if I call the image after the upload form.
      <?php //Display current user image $userImg = $user->profile_picture->first(); echo '<img src="'.$userImg->url.'">'; $upload_path = $config->paths->assets . "files/avatar_uploads/"; $f = new WireUpload('userimage'); $f->setMaxFiles(1); $f->setMaxFileSize(1*1024*1024); $f->setOverwrite(true); $f->setDestinationPath($upload_path); $f->setValidExtensions(array('jpg', 'jpeg', 'png', 'gif')); if($input->post->form_submit) { if(!is_dir($upload_path)) { if(!wireMkdir($upload_path)) throw new WireException("No upload path!"); } $files = $f->execute(); if ($f->getErrors()) { foreach($files as $filename) @unlink($upload_path . $filename); foreach($f->getErrors() as $e) echo $e; } else { $user->of(false); $user->profile_picture->removeAll(); // wirearray (line added by @horst: explanation is three posts beneath) $user->profile_picture = $upload_path . $files[0]; $user->save(); $user->of(true); @unlink($upload_path . $files[0]); } } ?> <form class="forum-form" accept-charset="utf-8" action="./" method="post" enctype="multipart/form-data" > <input type="file" id="attach" name="userimage" accept="image/jpg,image/jpeg,image/gif,image/png" /> <input type="submit" name="form_submit" value="Submit"/> </form>
       
    • By bot19
      Hey guys,
      Today I was uploading images and ran into an image I couldn't upload. This has never happened before since I got images uploading working.
      I had a dig around the forum but couldn't find anything relevant.
      Initially I thought it was due to the size ~1.3mb, but I had uploaded something bigger after and it was fine (~1.7mb). There are no size or dimension restrictions on this image field.
      After looking at the image some more, I realised its dimensions was HUGE: ~5300px
      There must be some sort of limit somewhere throwing an error due to this dimension size? Because after I resized the image down to 2560px, it uploaded fine.
      What does everyone think? I kind of just want to know. See below for more info. Thanks!
      Uploading the smaller file, everything is fine. If you look at the response, you can see:
      [{"error":false,"message":"Added file: mock-email-marketing-and-newsletters-smaller.png","file":"\/procwire\/site\/assets\/files\/1189\/mock-email-marketing-and-newsletters-smaller.png","size":340797,"markup":"<li id='file_551ac1043f1cbbe0b909dab963a1f28c' class='ImageOuter gridImage ui-widget'><div class='gridImage__tooltip'><table><tr><th>Dimensions<\/th><td>2560x2560<\/td><\/tr><tr><th>Filesize<\/th><td>333&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=\"\/procwire\/site\/assets\/files\/1189\/mock-email-marketing-and-newsletters-smaller.0x260.png?nc=1512803364\" alt=\"\" data-w=\"2560\" data-h=\"2560\" data-original=\"\/procwire\/site\/assets\/files\/1189\/mock-email-marketing-and-newsletters-smaller.png?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_crm_feature_img_repeater1189_551ac1043f1cbbe0b909dab963a1f28c' 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'>mock-email-marketing-and-newsletters-smaller<\/span>.png<\/h2>\n\t\t\t\t\t<span class='InputfieldImageEdit__info'>333&nbsp;kB, 2560&times;2560 <\/span>\n\t\t\t\t\t<div class='InputfieldImageEdit__errors'><\/div>\n\t\t\t\t\t<div class='InputfieldImageEdit__buttons'><small><button type='button' data-href='\/procwire\/admin123\/page\/image\/edit\/?id=1189&file=1189,mock-email-marketing-and-newsletters-smaller.png&rte=0&field=crm_feature_img' 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'><span class='ui-button-text'><span class='fa fa-crop'><\/span> Crop<\/span><\/button><button type='button' data-href='\/procwire\/admin123\/page\/image\/variations\/?id=1189&file=mock-email-marketing-and-newsletters-smaller.png&modal=1&varcnt=varcnt_crm_feature_img_repeater1189_551ac1043f1cbbe0b909dab963a1f28c' class='ui-button ui-corner-all ui-state-default pw-modal-large pw-modal' data-buttons='button'><span class='ui-button-text'><span class='fa fa-files-o'><\/span> Variations <span class='ui-priority-secondary'>(0)<\/span><\/span><\/button><\/small><\/div>\n\t\t\t\t\t<div class='InputfieldImageEdit__core'><div class='InputfieldFileDescription'><label for='description_crm_feature_img_repeater1189_551ac1043f1cbbe0b909dab963a1f28c' class='detail'>Description<\/label><input type='text' name='description_crm_feature_img_repeater1189_551ac1043f1cbbe0b909dab963a1f28c' id='description_crm_feature_img_repeater1189_551ac1043f1cbbe0b909dab963a1f28c' 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_crm_feature_img_repeater1189_551ac1043f1cbbe0b909dab963a1f28c' value='2' \/>\n\t\t\t\t\t<input class='InputfieldFileReplace' type='hidden' name='replace_crm_feature_img_repeater1189_551ac1043f1cbbe0b909dab963a1f28c' \/>\n\t\t\t\t\t<input class='InputfieldFileRename' type='hidden' name='rename_crm_feature_img_repeater1189_551ac1043f1cbbe0b909dab963a1f28c' \/>\n\t\t\t\t<\/div>\n\t\t\t<\/li>","replace":true,"overwrite":0}]
      Uploading the original file, something happens and there is no response (see Content-Length: 0)

      Which in turn must trigger this issue in the JS.

      No response.

    • By gonzz
      Hi i'm having a recurrent problem I found on this forum: when using the image uploader I get the following error on console "Unexpected token < in JSON". But I couldn't solve it with any of the other proposed solutions:
      setting debug to true setting $config->uploadTmpDir = dirname(__FILE__) . '/assets/uploads/'; setting uploadTmpDir in php.ini  
      BUT This problem only appears for non superuser users (ie editors).
      Running on a Digitial Ocean Server with NGINX and PHP 7.1. Version is ProcessWire 3.0.62
      Note: Im using Fredi plugin, but i doubt that's the problem because I'm using it in other sites with no problem
       
      Any idea how i could solve this (even with non ajax image upload) I need to sort this as fast and simple as possible
      Thanks in advance
    • By Peter Troeger
      Hi
      I'm using a lightly modified Version of ProcessSlider on my PW page (3.0.42).
      But I'm having a problem with the file upload. It's using Ajax File upload to upload images, which is working fine at first, but the images are only uploaded temporarily (creation date 01.01.1970) when an image is uploaded and saved. When pressing the "save"-Button, this does not change. I'm guessing it's due to changes from PW 2 to 3?
      This is the js that is calling the iframe upload, I think
      I don't know what to do to amke it save correctly. Anybody who can give me a hint?
      /** * ProcessWire iFrameImagePicker plugin * * Light verision of InputfieldCKEditor/plugins/pwimage/plugin.js * * @return callback(src, width, height) * */ function loadIframeImagePicker(page_id, callback) { var page_id = page_id;//$("#Inputfield_id").val(); var edit_page_id = page_id; var file = ''; var imgWidth = 0; var imgHeight = 0; var imgDescription = ''; var imgLink = ''; var hidpi = false; var modalUri = config.urls.admin + 'page/image/'; var queryString = '?id=' + page_id + '&edit_page_id=' + edit_page_id + '&modal=1'; if(file.length) queryString += "&file=" + file; if(imgWidth) queryString += "&width=" + imgWidth; if(imgHeight) queryString += "&height=" + imgHeight; queryString += '&hidpi=' + (hidpi ? '1' : '0'); if(imgDescription && imgDescription.length) { queryString += "&description=" + encodeURIComponent(imgDescription); } if(imgLink && imgLink.length) queryString += "&link=" + encodeURIComponent(imgLink); queryString += ("&winwidth=" + ($(window).width() - 30)); // create iframe dialog box var modalSettings = { title: "<i class='fa fa-fw fa-folder-open'></i> " + "Select Image", open: function() { } }; var $iframe = pwModalWindow(modalUri + queryString, modalSettings, 'large'); $iframe.load(function() { // when iframe loads, pull the contents into $i var $i = $iframe.contents(); if($i.find("#selected_image").size() > 0) { // if there is a #selected_image element on the page... var buttons = [ { html: "<i class='fa fa-camera'></i> " + "Insert This Image", click: function() { var $i = $iframe.contents(); var $img = $("#selected_image", $i); $iframe.dialog("disable"); $iframe.setTitle("<i class='fa fa-fw fa-spin fa-spinner'></i> " + "Saving Image"); $img.removeClass("resized"); var width = $img.attr('width'); if(!width) width = $img.width(); var height = $img.attr('height'); if(!height) height = $img.height(); var file = $img.attr('src'); var page_id = $("#page_id", $i).val(); var hidpi = $("#selected_image_hidpi", $i).is(":checked") ? 1 : 0; var rotate = parseInt($("#selected_image_rotate", $i).val()); file = file.substring(file.lastIndexOf('/')+1); var resizeURL = modalUri + 'resize?id=' + page_id + '&file=' + file + '&width=' + width + '&height=' + height + '&hidpi=' + hidpi; if(rotate) resizeURL += '&rotate=' + rotate; if($img.hasClass('flip_horizontal')) resizeURL += '&flip=h'; else if($img.hasClass('flip_vertical')) resizeURL += '&flip=v'; $.get(resizeURL, function(data) { var $div = $("<div></div>").html(data); var src = $div.find('#selected_image').attr('src'); callback(src, width, height); $iframe.dialog("close"); }); } }, { html: "<i class='fa fa-folder-open'></i> " + "Select Another Image", 'class': 'ui-priority-secondary', click: function() { var $i = $iframe.contents(); var page_id = $("#page_id", $i).val(); $iframe.attr('src', modalUri + '?id=' + page_id + '&modal=1'); $iframe.setButtons({}); } }, { html: "<i class='fa fa-times-circle'></i> " + "Cancel", 'class': 'ui-priority-secondary', click: function() { $iframe.dialog("close"); } } ]; $iframe.setButtons(buttons); $iframe.setTitle("<i class='fa fa-fw fa-picture-o'></i> " + $i.find('title').html()); } else { var buttons = []; $("button.pw-modal-button, button[type=submit]:visible", $i).each(function() { var $button = $(this); var button = { html: $button.html(), click: function() { $button.click(); } } buttons.push(button); if(!$button.hasClass('pw-modal-button-visible')) $button.hide(); }); var cancelButton = { html: "<i class='fa fa-times-circle'></i> " + "Cancel", 'class': "ui-priority-secondary", click: function() { $iframe.dialog("close"); } }; buttons.push(cancelButton); $iframe.setButtons(buttons); } }); }  
×
×
  • Create New...