rst

image doesnt save

Recommended Posts

Hello,

I have repeater field with an image field as one of its fields. It works correctly on all but one templates. I added an image, it shows the image uploading, but then the image just disappears and it doesn't save. What could it be ?

 

Thanks

Share this post


Link to post
Share on other sites

not showing me any errors. also, i just tried adding the image field on its own, and uploading new images are not saving to it either.

 

Share this post


Link to post
Share on other sites

I enabled debugger, and now I see this error when I upload an image

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

parseJSON .../wire/modules/Jquery/JqueryCore/JqueryCore.js:2:13582
uploadFile/< .../wire/modules/Inputfield/InputfieldImage/InputfieldImage.js:1450:21

Share this post


Link to post
Share on other sites

Hmm that error means either pw returns empty json or you echo a string somewhere and json becomes invalid. 

On your developer console (F12) activate network tab then try adding an image, inspect the request and response values, check if something weird is going on

Share this post


Link to post
Share on other sites

thing is, it worked for all the other sections, and just today i added a new section and i am having this problem. i didnt change anything in the code

Share this post


Link to post
Share on other sites

similar problems were reported here:

google error-msg site:.processwire.com, e.g.

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data site:.processwire.com

Share this post


Link to post
Share on other sites

thank you. i looked through some of the similar posts before i posted, didnt help.

will try to google that error message, thanks

Share this post


Link to post
Share on other sites

seems the error is caused by this line, in InputfieldImage.js

var response = $.parseJSON(xhr.responseText),

Share this post


Link to post
Share on other sites

also, just noticed that this error is happening on every single image field now. i can't upload new images to the site.

i didn't make any edits to the server, so not sure why this is happening all of a sudden

Share this post


Link to post
Share on other sites

I've just checked the source for InputfieldImage and it definitely originates from the backend. Somehow along the way json gets corrupted/wrong data is returned. 

You need to check the server response using developer console to get an idea of what it really is. 

https://developers.google.com/web/tools/chrome-devtools/network-performance/reference

Just to cross it off the list, try downloading the latest source from GitHub and replacing /wire/ directory. 

Share this post


Link to post
Share on other sites

hmm, response i get is this

error: false
message : AJAX Page not saved (no changes)

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 Peter Knight
      Is there a way to make JPGs progressive by default via the API?
      I've added the following to my site/config.php file but user-uploaded images are often displayed as non progressive.
      $config->imageSizerOptions = array( 'upscaling' => true, // upscale if necessary to reach target size? 'cropping' => true, // crop if necessary to reach target size? 'autoRotation' => true, // automatically correct orientation? 'interlace' => true, // use interlaced JPEGs by default? (recommended) 'sharpening' => 'soft', // sharpening: none | soft | medium | strong 'quality' => 95, // quality: 1-100 where higher is better but bigger 'hidpiQuality' => 60, // Same as above quality setting, but specific to hidpi images 'defaultGamma' => 0.5, // defaultGamma: 0.5 to 4.0 or -1 to disable gamma correction (default=2.0) ); Thanks
    • By cosmicsafari
      Hi all,
      Just wondering if someone with a bit more PW knowledge than me could give a run down of what this method actually does and how its achieved.
      I get that it rebuilds image variations but based on what settings?
      If I wanted to rebuild all the websites image variations but at say a reduced image quality can this be set somewhere globally that this method would take into account?
      For some context I have built a fairly simple module to delete all the image variations connected to any FieldtypeImage which is being used on the website, for the most part this works quite well. As I was quite happy with how that turned out I figured I would give the module another option to rebuild the images also. So there would be a 'Remove' and 'Rebuild' button on the modules config page.
      The idea being that I could use this tool to delete all the image variations, update some global settings then regenerate them all but currently it doesn't appear to do that.
      I assume this is either because my codes borked or im misunderstanding something fundamental about how rebuildVariations() works.
    • By gregory
      Hi guys.
      I would like to show only the first image as a preview of a slideshow. The code below shows the first image but is repeated. Do you know a solution? Thank you
      //Call image foreach($story->galleria as $img) { echo "<img src='{$story->galleria->first()->url}' alt='{$story->galleria->first()->description}'>"; }  
    • By Sergio
      Hi everyone,
      Yesterday I began working on a module to create a filesystem abstraction for files and images using the Flysytem library (http://flysystem.thephpleague.com), out of the necessity of having the images copied (and probably linked) on Amazon S3 and other places like Dropbox. There two reasons why I decided to tackle this:
      1 - When I work on the project in my machine, I need a way to automatically sync the images from the server and/or the external storage.
      When an image is added on the server and the database is imported on my local env, PW shows a blank thumbnail of it. The idea for the module if to check if the page image has a width == 0 and if it exists on the server, add it to the local filesystem.
      2 - In the past, I had to move a large website to a different server in a hurry and a lot of images were left behind (it was a mess). So I'm planning for a possible future worst-case scenario of the server exploding 🙂 
      The code I quickly wrote is below (please bear with me that it's pretty raw at the moment). One thing I had to figure it out is why PW fires the Pageimage::size hook wherever a page is loaded in the admin, even though the thumbnails are already created. I was planning to save the image variations on S3 as well. Can someone clarify?
      I know that @LostKobrakai was working on a similar project, and so I would like to ask him and everyone else if you think I (and who may help) should evolve this idea into a full-featured module where the user can select which server (adapter) to use (AWS, Digital Ocean spaces, Dropbox etc.)
      <?php namespace ProcessWire; use Aws\S3\S3Client; use League\Flysystem\AwsS3v3\AwsS3Adapter; use League\Flysystem\Filesystem; use League\Flysystem\Adapter\Local; use Spatie\Dropbox\Client; use Spatie\FlysystemDropbox\DropboxAdapter; class ProcessFly extends WireData implements Module, ConfigurableModule { public static function getModuleInfo() { return array( 'title' => 'ProcessWire Flysystem Integration', 'version' => 001, 'summary' => 'Synchronize all the page assets uploaded through PW to a specified bucket in Amazon S3 and...', 'author' => 'Sérgio Jardim', 'singular' => true, 'autoload' => true, 'icon' => 'image' ); } public function init() { $this->client = S3Client::factory([ 'credentials' => [ 'key' => '', 'secret' => '', ], 'region' => 'sa-east-1', 'version' => 'latest', ]); $this->bucket_name = ""; $this->dir_name = "images"; $this->s3_adapter = new AwsS3Adapter($this->client, $this->bucket_name, $this->dir_name); $this->s3_filesystem = new Filesystem($this->s3_adapter); // DROPBOX $this->authorizationToken = ""; $this->dropbox_client = new Client($this->authorizationToken); $this->adapter_dropbox = new DropboxAdapter($this->dropbox_client); $this->dropbox_filesystem = new Filesystem($this->adapter_dropbox); $this->addHookAfter('Pages::saved', $this, 'checkImageS3'); // Download images that are not in local filesystem for whatever reason but are available in the remove one. $this->addHookAfter('InputfieldFile::fileAdded', $this, 'uploadImageS3'); // Fired when a file/image is added to a page in the admin // $this->addHookAfter('Pageimage::size', $this, 'uploadImageS3'); // Fired when a file is resized via API. Note: this hook is also called when the page is loaded in Admin. Need to know why. $this->addHookAfter('Pageimage::url', $this, 'redirectImageURL'); //Replace image URL for the S3 path } public function redirectImageURL($event){ if($event->page->template == 'admin') return; else $event->return = "https://s3-sa-east-1.amazonaws.com/[bucket name]/images/" . $event->object->page . "/" . $event->object->name; } // UPLOAD public function uploadImageS3($event){ if(count($event->return)) { //if it is a image resize event get image variation data $file = $event->return; } else { $file = $event->arguments(0); } $filename = $file->name; $filename_original = $file->url; $pathToFile = $file->page . "/" . $filename; $system_path = $file->filename(); try{ $file_on_s3 = $this->s3_filesystem->has($pathToFile); //check if file exists on AWS if(!$file_on_s3) { $contents = file_get_contents($system_path); $this->s3_filesystem->put($pathToFile, $contents, array( 'visibility' => 'public', )); //upload file with the same folder structure as in assets/files: page_id/file_name //Also add a copy to Dropbox (OPTIONAL) $this->dropbox_filesystem->put($pathToFile, $contents); } } catch (Exception $e){ throw new WireException("Error: Image not Added to S3: {$e->getMessage()}"); } } public function checkImageS3($event){ $page = $event->arguments(0); if(count($page->images)) { foreach($page->images as $file) { if($file->width == 0) { return $this->downloadImageS3($page, $file); }; } } } public function downloadImageS3($page, $file){ $pathToFile = $page->id . "/" . $file->name; $file_on_s3 = $this->s3_filesystem->has($pathToFile); //check if file exists on AWS if($file_on_s3) { $image = "https://s3-sa-east-1.amazonaws.com/[bucket name]/images/" . $pathToFile; // $page->images->remove($image); $page->images->add($image); $page->save(); } else { throw new WireException("Error: Image not found on S3: {$file->name}"); } } }  
    • By humanafterall
      Hi,
      I'm using the on the fly image resizing in Processwire to create suitable image sizes for different viewports (using Foundation's Image Interchange).
      All seemed to be working fine but I'm having real trouble with the quality of the outputted image.
      This is the orginal image:

      This is an example of a resized image:

      It looks like it's losing colour information in the process of being resized.
      I've tried setting the default quality to 100% (in the wire/core/ImageSizer.php) but to no avail.
      Could anyone share any light on what might be happening here?