I have a client website that has the mime type support for SVG's added in the functions file. We've been uploading svg's for over a year. Suddenly it stopped working and is showing the "for security reasons this file is not allowed" - I'm stumped on what to check next to try and debug it.
-
3Possible duplicate of SVG files not uploading since most recent WP update– GchtrJan 12, 2017 at 19:07
2 Answers
By default, WP does not allow SVG uploads, and you should get that error. Preventing SVG uploads is a security feature (which I explain below). I can't help you debug your function, because that is beyond my expertise, but I can suggest a work around.
You can use a plugin like SafeSVG (https://wordpress.org/plugins/safe-svg/) to enable SVG, but use caution: it exposes you to risks. SVG files can be used as a way of taking over control of your site. If you install the plugin and enable SVG upload you should be able to restore your ability to upload the SVGs. However, I recommend, for security reasons you restrict access to the plugin to the administrator in your functions.php file. If you have users that have upload capacities, they could hack/corrupt/compromise your site with SVGS, so be careful!
UPDATE 1: Because of your question, I just discovered that even safeSVG (which I had been using) stopped working. It seems that SVG upload (an maybe even upload of some other file types) has been broken by the recent WP 4.7.1 update. There is a discussion about it here: https://wordpress.org/support/topic/wp-4-7-1-kills-svg/
There are a number of solutions in that discussion, and some appear to be safer than others. I haven't tested them though. It is a start. I'm glad I ran across your question. Thanks!
UPDATE 2: Here is a plugin that a commenter below suggested to temporarily allow this, but I cannot vouch for the safety: https://wordpress.org/plugins/disable-real-mime-check/
-
1this is a 4.7.1 bug that is not related to your answer (what you write is correct, just not being the issue here) Jan 12, 2017 at 16:15
-
i provide a workaround for him or anyone else who is stuck, even though it is not an exact answer, it could be helpful, should I move the info to a comment? Jan 12, 2017 at 16:16
-
1
-
Lol, actually, I just tried and it failed. What did WP do? It looks like they closed some door that developers had been using. Now I want someone else to answer this so I can resume uploading SVGs. btw how to i get my points back, should I delete this answer? Jan 12, 2017 at 16:22
-
1There’s now a plugin that you can use as a workaround until this issue is resolved: wordpress.org/plugins/disable-real-mime-check. Maybe you want to add that as an update to your answer.– GchtrJan 12, 2017 at 19:08
In your theme functions.php file :
/**
* Add svg MIME type support
*
* @param $mimes
*
* @author fadupla
* @return mixed
*/
function fadupla_mime_types( $mimes ) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter( 'upload_mimes', 'fadupla_mime_types' );
/**
* Enqueue SVG javascript and stylesheet in admin
* @author fadupla
*/
function fadupla_svg_enqueue_scripts( $hook ) {
wp_enqueue_style( 'fadupla-svg-style', get_theme_file_uri( '/assets/css/svg.css' ) );
wp_enqueue_script( 'fadupla-svg-script', get_theme_file_uri( '/assets/js/svg.js' ), 'jquery' );
wp_localize_script( 'fadupla-svg-script', 'script_vars',
array( 'AJAXurl' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'admin_enqueue_scripts', 'fadupla_svg_enqueue_scripts' );
/**
* Ajax get_attachment_url_media_library
* @author fadupla
*/
function fadupla_get_attachment_url_media_library() {
$url = '';
$attachmentID = isset( $_REQUEST['attachmentID'] ) ? $_REQUEST['attachmentID'] : '';
if ( $attachmentID ) {
$url = wp_get_attachment_url( $attachmentID );
}
echo $url;
die();
}
add_action( 'wp_ajax_svg_get_attachment_url', 'fadupla_get_attachment_url_media_library' );
the assets/js/svg.js file :
var mediaGridObserver = new MutationObserver(function (mutations) {
for (var i = 0; i < mutations.length; i++)
{
for (var j = 0; j < mutations[i].addedNodes.length; j++)
{
element = $(mutations[i].addedNodes[j]);
if (element.attr('class'))
{
elementClass = element.attr('class');
if (element.attr('class').indexOf('attachment') != -1)
{
attachmentPreview = element.children('.attachment-preview');
if (attachmentPreview.length != 0)
{
if (attachmentPreview.attr('class').indexOf('subtype-svg+xml') != -1)
{
var handler = function (element) {
jQuery.ajax({
url: script_vars.AJAXurl,
type: "POST",
dataType: 'html',
data: {
'action': 'svg_get_attachment_url',
'attachmentID': element.attr('data-id')
},
success: function (data) {
if (data)
{
element.find('img').attr('src', data);
element.find('.filename').text('SVG Image');
}
}
});
}(element);
}
}
}
}
}
}
});
var attachmentPreviewObserver = new MutationObserver(function (mutations) {
for (var i = 0; i < mutations.length; i++)
{
for (var j = 0; j < mutations[i].addedNodes.length; j++)
{
var element = $(mutations[i].addedNodes[j]);
var onAttachmentPage = false;
if ((element.hasClass('attachment-details')) || element.find('.attachment-details').length != 0)
{
onAttachmentPage = true;
}
if (onAttachmentPage == true)
{
var urlLabel = element.find('label[data-setting="url"]');
if (urlLabel.length != 0)
{
var value = urlLabel.find('input').val();
element.find('.details-image').attr('src', value);
}
}
}
}
});
$(document).ready(function () {
mediaGridObserver.observe(document.body, {
childList: true,
subtree: true
});
attachmentPreviewObserver.observe(document.body, {
childList: true,
subtree: true
});
});
the assets/css/svg.css file :
img[src*='.svg'] {
width: 100%;
height: auto;
}