2

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.

2

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/

  • 1
    this is a 4.7.1 bug that is not related to your answer (what you write is correct, just not being the issue here) – Mark Kaplun Jan 12 '17 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? – CoderScissorhands Jan 12 '17 at 16:16
  • 1
    cool, have you tested it with 4.7.1? – Mark Kaplun Jan 12 '17 at 16:17
  • 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? – CoderScissorhands Jan 12 '17 at 16:22
  • 1
    There’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. – Gchtr Jan 12 '17 at 19:08
0

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;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.