Jump to content

Problem uploading images


Michal Gancarski
 Share

Recommended Posts

Hi!

I have finally managed to start my first project in ProcessWire. Loving the simplicity and flexibility but I have stumbled upon a problem with Image field. It just does not upload anything. What happens is:

  1. Upload progress bar is going up to 100%.
  2. Folders in assets/files are properly created, with permissions set to 777.
  3. Unfortunately, no image is being uploaded as there are no files in created folders.
  4. Nothing shows in Javascript console (Chrome and Firefox), so it is not a front-end problem.

I have been searching for solution on this problem but what I have found was not helpful. I have safe_mode in PHP turned off.

The issue persists for File fields as well.

Thanks!

Link to comment
Share on other sites

Do you have debug turned on in the config.php file?

Also, add this to end of your body - at the end of your foot.inc file if that is how you have things set up:

<?php if($config->debug && $this->user->isSuperuser()) include($config->paths->adminTemplates . "debug.inc"); ?>
 

Let us know if those together produce any errors.

Link to comment
Share on other sites

Hi, Adrian!

Thanks for your reply. I have turned debugging on and added the line to my templates. I am not sure which information would be useful but I have noticed that if debug is on, uploading stops at less than 100% (depending on the size of an image). I don't think it is about the allowed sizes for file uploads - uploading stops at what seems the last step in the process.

Link to comment
Share on other sites

This could be a server-side problem.

Check the response of the ajax request sent. If you have enabled debug mode, maybe you can see the error that was throwed.

Try with smaller files or increase the following php settings:

  • post_max_size,
  • upload_max_filesize,
  • max_execution_time,
  • max_input_time,
  • memory_limit
Link to comment
Share on other sites

Just realized you already checked the js console so this probably won't help you. Anyway it might help some one else with a similar problem.

Here's a screen image of the problem i encountered and it gave the hoster a clue what caused the problem:
According to the hosting provider it was because of the mod_security setting but they couldn't be more specific than that.
Hope you get it working.
Link to comment
Share on other sites

OK, I have talked with my hosting provider, they have also read this thread. We worked a bit to solve the issue and at the moment we come up with an error generated during upload, possibly at the very end of the process:

PHP Warning: file_put_contents() [<a href='function.file-put-contents'>function.file-put-contents</a>]: Filename cannot be empty in /wire/core/Upload.php on line 128

I guess this is why progress bars stop just before the process finishes. I checked the line in Upload.php. I am unable to understand exactly what is what there but I am guessing this may be a problem with temporary folder. I have checked where the folder should be present (by printing $config->paths->tmp) and the path it showed me was /site/assets/tmp/. This folder did not exist. I have created it, switched permissions to 777 but it did not help.

Link to comment
Share on other sites

I have figured it out. Following the advice from here:

http://processwire.com/talk/topic/1002-cant-upload-imagefiles-problem/

I have added uploadTmpDir which was apparently not set in /site/config.php. Now everything works.

Taking advantage from this opportunity, I have a suggestion. Maybe ProcessWire should have this directory set by default? Is there any disadvantage to that?

  • Like 1
Link to comment
Share on other sites

Glad you figured it out. We give first choice to $config->uploadTmpDir (if set), but prefer to use PHP's 'upload_tmp_dir' setting since this will presumably be somewhere outside the web accessible structure. It sounds like in your case, the server did not have PHP's 'upload_tmp_dir' setting defined. Now we could have uploadTmpDir set to something like /site/assets/uploads/ by default. But that's under the htdocs structure (though we do block it in htaccess) and I think it's a little more secure to have the server tell us where these files should go… at least as a default.

Link to comment
Share on other sites

  • 3 years later...

when I upload images on admin area bar remain to 100%

error: on chrome console

VM797:1 Uncaught SyntaxError: Unexpected token < in JSON at position 0parseJSON @ JqueryCore.js?v=162:16(anonymous function) @ InputfieldFile.js:171

With debug true: no errors on php

I have not updated anything and even touched or database files, how can i resolve?

Thanks

Link to comment
Share on other sites

Try looking at the Network tab (make sure it is open before you upload the image). You should end up with a line that has an error - that will be the PHP error that will give you the info to figure out what is wrong. The error you are seeing in the console is a syntax error because the ajax call is returning the real error.

My initial guess would be file/folder permissions, but if you let us know the error, we should be able to figure things out.

  • Like 3
Link to comment
Share on other sites

Try looking at the Network tab (make sure it is open before you upload the image). You should end up with a line that has an error - that will be the PHP error that will give you the info to figure out what is wrong. The error you are seeing in the console is a syntax error because the ajax call is returning the real error.

My initial guess would be file/folder permissions, but if you let us know the error, we should be able to figure things out.

Hi, thank u for your help.

I've opened Chrome Network tab, I don't see any PHP error (debug true)

I see on network tab

removeClass@JqueryCore.js?v=162:16removeClass@JqueryUI.js?v=180:587(anonymous function)@main.js?v=2:31handle@JqueryCore.js?v=162:17F@JqueryCore.js?v=162:17handle@JqueryCore.js?v=162:17k@JqueryCore.js?v=162:16

and Chrome console

VM770:1 Uncaught SyntaxError: Unexpected token < in JSON at position 0parseJSON @ JqueryCore.js?v=162:16(anonymous function) @ InputfieldFile.js:171
JqueryCore.js?v=162:18 'webkitRequestAnimationFrame' is vendor-specific. Please use the standard 'requestAnimationFrame' instead.
 
What can I do? And the right write permission on what folder?
 
Thanks.
Link to comment
Share on other sites

do you see any notice / hint in the PW logs?

  • site/assets/logs/errors.txt
  • site/assets/logs/exceptions.txt
  • site/assets/logs/warnings.txt

errors.txt

Error Exception: Method JqueryCore::addComponents does not exist or is not callable in this context (in /home/rvocsizt/public_html/wire/core/Wire.php line 232)  #0 /home/rvocsizt/public_html/wire/modules/Jquery/JqueryCore/JqueryCore.module(39): Wire->__call('addComponents', Array) #1 /home/rvocsizt/public_html/wire/modules/Jquery/JqueryCore/JqueryCore.module(39): JqueryCore->addComponents(Array) #2 /home/rvocsizt/public_html/wire/core/Modules.php(327): JqueryCore->__construct() #3 /home/rvocsizt/public_html/wire/core/admin.php(15): Modules->get('JqueryCore') #4 /home/rvocsizt/public_html/site/templates-admin/controller.php(13): require('/home/rvocsizt/...') #5 /home/rvocsizt/public_html/site/templates/admin.php(13): require('/home/rvocsizt/...') #6 /home/rvocsizt/public_html/wire/core/TemplateFile.php(92): require('/home/rvocsizt/...') #7 [internal function]: TemplateFile->___render() #8 /home/rvocsizt/public_html/wire/core/Wire.php(271): call_user_func_array(Array, Array) #9 /home/rvocsizt/public_html/wire/core/Wi
2016-04-30 08:39:04 Error Exception: Method JqueryCore::addComponents does not exist or is not callable in this context (in /home/rvocsizt/public_html/wire/core/Wire.php line 232)  #0 /home/rvocsizt/public_html/wire/modules/Jquery/JqueryCore/JqueryCore.module(39): Wire->__call('addComponents', Array) #1 /home/rvocsizt/public_html/wire/modules/Jquery/JqueryCore/JqueryCore.module(39): JqueryCore->addComponents(Array) #2 /home/rvocsizt/public_html/wire/core/Modules.php(327): JqueryCore->__construct() #3 /home/rvocsizt/public_html/wire/core/admin.php(15): Modules->get('JqueryCore') #4 /home/rvocsizt/public_html/site/templates-admin/controller.php(13): require('/home/rvocsizt/...') #5 /home/rvocsizt/public_html/site/templates/admin.php(13): require('/home/rvocsizt/...') #6 /home/rvocsizt/public_html/wire/core/TemplateFile.php(92): require('/home/rvocsizt/...') #7 [internal function]: TemplateFile->___render() #8 /home/rvocsizt/public_html/wire/core/Wire.php(271): call_user_func_array(Array, Array) #9 /home/rvocsizt/public_html/wire/core/Wi
 
thanks
Link to comment
Share on other sites

  • 2 weeks later...

I have a image upload problem!

The ajax gif is turning and not stopping...
The image and the resized image appears in the assets/file/xxx folder...

The image-sizer.txt log file says it has resized the image (I switched debug on)

the ajax gif is still turning

When I click save... the image isn´t added to the page...
:-(

It´s an fresh pw installation...
And I tried it with several wamp servers (easynews, xampp)

Link to comment
Share on other sites

It´s an fresh pw installation...

And I tried it with several wamp servers (easynews, xampp)

  • Are you using ProcessWire 2.7.2, 2.7.3 or 3.0.17?
  • PHP Version?
  • List of any Third Party modules?
  • Example of any custom code you are using?
  • Like 1
Link to comment
Share on other sites

I have probably the same issue with an old PW 2.6 install on a shared hosting with PHP 5.5.32. The ajax upload completes with 100%, but I get Uncaught SyntaxError: Unexpected token < in the console. The problem is that the ajax request to admin/page/edit/?id=1067 ends with a 302 response code, therefore jQuery tries to parse the response of the root page, which obviously starts with <html>.

I have the directive always_populate_raw_post_data set to Off, so I think that the problem is not related to https://github.com/ryancramerdesign/ProcessWire/issues/1174 and 

The directive upload_tmp_dir is set to /tmp/ with 755 permissions.

No sign of errors in PW logs and messages.

Anyone has clues?

Link to comment
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
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By stanoliver
      Hello Community!
      I found quite a  few ways or tools to style the admin or build a dashboard:
      - the new way with the .less compilation (reno style, rock style)
      - dashboard modules or tutorials how to build your own
      - admin on stereoids
      Vocabulary: With "admin like user" I do not mean a full admin but an user with quite a lot of priviledges ...
      My problem is that I do want to change the admin template for every (admin like) user in a different way. Or if I would build a bigger dashboard certain functionlity should only be available for a few (admin like) users but not for everyone.
      I would need different versions of the admin theme or the built dashboards for different admin users
      To start with a very simple example:
      Let's say I wanna give one (admin like) user a different background color (with css). 
      Let's say I wanna have an extra button or tab for some (admin like) user which another (admin like) user should not have
      How can I take advantage of processwire roles in all these examples I mentioned in the beginning?
       
       
    • By eelkenet
      After enabling WebP support you may notice it can take a long time for ProcessWire to create WebP copies of all images and their variations.
      For instance, on a site I work on (with over 10k images), it was taking about 1 second per image, ie. more than 3 hours in total.. 🥱
      If you are comfortable around the command-line, you can use the cwebp program and this bash script to speed things up drastically.
      I have built upon this script and got things to work in combination with xargs and find, making it rather powerful for PW's purposes.
      1. Save this script as 'convert-webp.sh' (or download the Gist from Github), and follow instructions
      ######################################################################################################### # # Fast Recursive Images to WebP converter # Customized for ProcessWire CMS/CMF <https://www.processwire.com> # # Author: Eelke Feenstra <dev@eelke.net> # Version: 001 # Based upon: https://github.com/onadrog/bash-webp-converter # # Quick & dirty script to add webp versions to all PNG / JPG / JPEG files inside your PW assets folder # # 1. Set this script to executable: # $ chmod +x convert-webp.sh # # 2. Check if cwebp is installed: # $ cwebp -version # If it is not, install: # $ brew install webp # Or follow instructions https://developers.google.com/speed/webp/download # and change $executable to cwebp's full path # # 3. Run the script directly on a folder: # $ ./convert-webp.sh /path/to/your/folder # ######################################################################################################### # Configuration executable="cwebp" # update this to reflect your installation! quality=90 # change to desired WebP quality ######################################################################################################### converted=0 skipped=0 echo "Entering $1" for file in $1/* do name="${file%.*}" echo "FILE: $file" echo "NAME: $name" # Skip the folder itself.. if [ "$name" = "./." ]; then echo "SKIP: $name" continue; fi if [[ $(file --mime-type -b $name.webp) == image/webp ]]; then echo "FOUND: $name.webp, skipping.." skipped=$((skipped+1)) elif [[ $(file --mime-type -b $file) == image/*g ]]; then echo "NOT FOUND: $name.webp" newfile(){ echo "$file" | sed -r 's/(\.[a-z0-9]*$)/.webp/' } $executable -q $quality "$file" -short -o "$(newfile)" converted=$((converted+1)) fi done echo "Converted $converted, Skipped $skipped" 2. Run to create webp versions of all jpg/jpeg/png images in a given folder (for example the site's homepage)
      $ ./convert-webp.sh /path/to/processwire/site/assets/files/1 3. And in order to create WebP copies of ALL images inside the /site/assets/files folder, you can run this script. It searches for all directories inside the files directory, and passes these to the convert-webp.sh script using xargs.
      $ find /path/to/processwire/site/assets/files -maxdepth 2 -type d | xargs -I '{}' ./convert-webp.sh '{}'  
      Tested both on MacOS 12 and Debian
       
    • By quickjeff
      Hi Everyone, 
      As many of you know, iPhone photos save in .heic unless the user changes the settings in their phone. 
      We have built a web app on top of processwire in which a user can save images from their phone. 
      The issue we are having is that there seems to be an error when uploading and saving. 
      The .heic files won't save and processwire throws an error. The environment is LAMP (Bitnami and all libraries have been installed to support this.) 
      Checking to see if someone has also encountered this here and how they solved it.
      Thanks. 
    • By Robin S
      This module lets you add some custom menu items to the main admin menu, and you can set the dropdown links dynamically in a hook if needed.
      Sidenote: the module config uses some repeatable/sortable rows for the child link settings, similar to the ProFields Table interface. The data gets saved as JSON in a hidden textarea field. Might be interesting to other module developers?
      Custom Admin Menus
      Adds up to three custom menu items with optional dropdowns to the main admin menu.
      The menu items can link to admin pages, front-end pages, or pages on external websites.
      The links can be set to open in a new browser tab, and child links in the dropdown can be given an icon.
      Requires ProcessWire v3.0.178 or newer.
      Screenshots
      Example of menu items

      Module config for the menus

      Link list shown when parent menu item is not given a URL

      Advanced
      Setting child menu items dynamically
      If needed you can set the child menu items dynamically using a hook.
      Example:
      $wire->addHookAfter('CustomAdminMenus::getMenuChildren', function(HookEvent $event) { // The menu number is the first argument $menu_number = $event->arguments(0); if($menu_number === 1) { $colours = $event->wire()->pages->findRaw('template=colour', ['title', 'url', 'page_icon']); $children = []; foreach($colours as $colour) { // Each child item should be an array with the following keys $children[] = [ 'icon' => $colour['page_icon'], 'label' => $colour['title'], 'url' => $colour['url'], 'newtab' => false, ]; } $event->return = $children; } }); Create multiple levels of flyout menus
      It's also possible to create multiple levels of flyout submenus using a hook.

      For each level a submenu can be defined in a "children" item. Example:
      $wire->addHookAfter('CustomAdminMenus::getMenuChildren', function(HookEvent $event) { // The menu number is the first argument $menu_number = $event->arguments(0); if($menu_number === 1) { $children = [ [ 'icon' => 'adjust', 'label' => 'One', 'url' => '/one/', 'newtab' => false, ], [ 'icon' => 'anchor', 'label' => 'Two', 'url' => '/two/', 'newtab' => false, 'children' => [ [ 'icon' => 'child', 'label' => 'Red', 'url' => '/red/', 'newtab' => false, ], [ 'icon' => 'bullhorn', 'label' => 'Green', 'url' => '/green/', 'newtab' => false, 'children' => [ [ 'icon' => 'wifi', 'label' => 'Small', 'url' => '/small/', 'newtab' => true, ], [ 'icon' => 'codepen', 'label' => 'Medium', 'url' => '/medium/', 'newtab' => false, ], [ 'icon' => 'cogs', 'label' => 'Large', 'url' => '/large/', 'newtab' => false, ], ] ], [ 'icon' => 'futbol-o', 'label' => 'Blue', 'url' => '/blue/', 'newtab' => true, ], ] ], [ 'icon' => 'hand-o-left', 'label' => 'Three', 'url' => '/three/', 'newtab' => false, ], ]; $event->return = $children; } }); Showing/hiding menus according to user role
      You can determine which menu items can be seen by a role by checking the user's role in the hook.
      For example, if a user has or lacks a role you could include different child menu items in the hook return value. Or if you want to conditionally hide a custom menu altogether you can set the return value to false. Example:
      $wire->addHookAfter('CustomAdminMenus::getMenuChildren', function(HookEvent $event) { // The menu number is the first argument $menu_number = $event->arguments(0); $user = $event->wire()->user; // For custom menu number 1... if($menu_number === 1) { // ...if user does not have some particular role... if(!$user->hasRole('foo')) { // ...do not show the menu $event->return = false; } } });  
      https://github.com/Toutouwai/CustomAdminMenus
      https://processwire.com/modules/custom-admin-menus/
    • By Robin S
      Select Images
      An inputfield that allows the visual selection and sorting of images, intended for use with the FieldtypeDynamicOptions module. Together these modules can be used to create a kind of "image reference" field.

      Integration with FieldtypeDynamicOptions
      InputfieldSelectImages was developed to be used together with FieldtypeDynamicOptions (v0.1.3 or newer):
      Create a Dynamic Options field. Choose "Select Images" as the "Inputfield type". Select Images appears in the "Multiple item selection" category but you can set "Maximum number of items" to 1 if you want to use Select Images for single image selections. Define selectable options for the field via a FieldtypeDynamicOptions::getSelectableOptions hook. See some examples below. FieldtypeDynamicOptions is recommended but is not a strict requirement for installing InputfieldSelectImages in case you want to use an alternative way to store the field data.
      Selection of Pageimages
      In this example the field allows selection of Pageimages that are in the "images" field of the home page.
      The field will store URLs to the Pageimages so it works as a kind of "image reference" field. You can use the "Format as Pagefile/Pageimage object(s)" option for the Dynamic Options field to have the formatted value of the field be automatically converted from the stored Pageimage URLs to Pageimage objects.
      $wire->addHookAfter('FieldtypeDynamicOptions::getSelectableOptions', function(HookEvent $event) { // The page being edited $page = $event->arguments(0); // The Dynamic Options field $field = $event->arguments(1); // For a field named "select_images" if($field->name === 'select_images') { $options = []; // Get Pageimages within the "images" field on the home page foreach($event->wire()->pages(1)->images as $image) { // Add an option for each Pageimage // When the key is a Pageimage URL the inputfield will automatically create a thumbnail // In this example the label includes the basename and the filesize /** @var Pageimage $image */ $options[$image->url] = "{$image->basename}<br>{$image->filesizeStr}"; } $event->return = $options; } }); Selection of image files not associated with a Page
      When not working with Pageimages you must add a "data-thumb" attribute for each selectable option which contains a URL to a thumbnail/image.
      In this example the field allows selection of image files in a "/pics/" folder which is in the site root.
      $wire->addHookAfter('FieldtypeDynamicOptions::getSelectableOptions', function(HookEvent $event) { // The page being edited $page = $event->arguments(0); // The Dynamic Options field $field = $event->arguments(1); // For a field named "select_images" if($field->name === 'select_images') { $options = []; // Get files that are in the /pics/ folder $root = $event->wire()->config->paths->root; $path = $root . 'pics/'; $files = $event->wire()->files->find($path); // Add an option for each file foreach($files as $file) { $basename = str_replace($path, '', $file); $url = str_replace($root, '/', $file); // The value must be an array with the following structure... $options[$url] = [ // The label for the image 'label' => $basename, 'attributes' => [ // An image URL in the "data-thumb" attribute 'data-thumb' => $url, ], ]; } $event->return = $options; } }); The field values don't have to be image URLs
      The values stored by the Dynamic Options field don't have to be image URLs. For example, you could use the images to represent different layout options for a page, or to represent widgets that will be inserted on the page.
      Also, you can use external URLs for the thumbnails. In the example below the options "calm" and "crazy" are represented by thumbnails from placecage.com.
      $wire->addHookAfter('FieldtypeDynamicOptions::getSelectableOptions', function(HookEvent $event) { // The page being edited $page = $event->arguments(0); // The Dynamic Options field $field = $event->arguments(1); // For a field named "calm_or_crazy" if($field->name === 'calm_or_crazy') { $options = []; // Add options that are illustrated with thumbnails from placecage.com $options['calm'] = [ // The label for the option 'label' => 'Nicolas Cage is a calm man', 'attributes' => [ // An image URL in the "data-thumb" attribute 'data-thumb' => 'https://www.placecage.com/260/260', ] ]; $options['crazy'] = [ // The label for the option 'label' => 'Nicolas Cage is a crazy man', 'attributes' => [ // An image URL in the "data-thumb" attribute 'data-thumb' => 'https://www.placecage.com/c/260/260', ] ]; $event->return = $options; } }); Field configuration
      You can define labels for the button, notices, etc, that are used within the inputfield if the defaults don't suit.

       
      https://github.com/Toutouwai/InputfieldSelectImages
      https://processwire.com/modules/inputfield-select-images/
×
×
  • Create New...