Cannot upload SVGs to image fields.

[Sean Johnson]

Issue description:

When uploading an SVG image file to a Kirki image field, when done selecting the image, scripts.js always tries to look for uploadedImage.toJSON().sizes.full.url which does not exist on SVG files that are uploaded. There should be a conditional checking if the image uploaded even has a sizes property, and if it does not, use the url property.

Version used:

(Did you try using the develop branch from github? There's a chance your issue has already been adressed there)
3.0.27

Using theme_mods or options?

Theme Mods

Code to reproduce the issue (config + field(s))

Kirki::add_field( TEXT_DOMAIN, array(
      'settings' => 'header_icon',
      'label' => __('Header Icon', TEXT_DOMAIN),
      'description' => __('This image is the logo that shows up in the header of your theme but only for mobile devices.', TEXT_DOMAIN),
      'section' => 'site_icons',
      'type' => 'image',
      'priority' => 40,
      'default' => null
));

After this field shows up, just upload an SVG file to it after allowing .svg extensions in Wordpress and watch the javascript stumble. /kirki/controls/js/script.js line 1944.

[Sean Johnson]

This got it working for me. Something like this would allow SVGs to be uploaded. This is my altered version of /controls/js/script.js from line 1943 to line 1967.

var uploadedImage = image.state().get( 'selection' ).first(),
	jsonImg = uploadedImage.toJSON(),
	previewImage  = jsonImg.url;

if (! _.isUndefined(jsonImg.sizes)) {
	previewImg = jsonImg.sizes.full.url;
	if ( ! _.isUndefined( jsonImg.sizes.medium ) ) {
		previewImage = jsonImg.sizes.medium.url;
	} else if ( ! _.isUndefined( jsonImg.sizes.thumbnail ) ) {
		previewImage = jsonImg.sizes.thumbnail.url;
	}
}



if ( 'array' === saveAs ) {
	control.saveValue( 'id', jsonImg.id );
	control.saveValue( 'url', jsonImg.sizes.full.url );
	control.saveValue( 'width', jsonImg.width );
	control.saveValue( 'height', jsonImg.height );
} else if ( 'id' === saveAs ) {
	control.saveValue( 'id', jsonImg.id );
} else {
	control.saveValue( 'url', ((! _.isUndefined(jsonImg.sizes)) ? jsonImg.sizes.full.url : jsonImg.url) );
}

[Ari Stathopoulos]

Thank you for reporting this!
Marked as a bug and I'll get it fixed in v3.0.28 as soon as I get some free time.

[Ari Stathopoulos]

I just tested this and pushed your code, seems to be working fine. 👍

[Sean Johnson]

Great! Thanks for getting to this so quickly.