SVG upload for logo, Issue 2513

ojsbsb · August 14, 2017, 11:09am

We are just setting up a new OJS 3 site and would like to start with SVG graphics in the header right away. To do this cleanly, I have tried to implement the changes from the relevant commits mentioned in issue 2513.

After that, select the SVG file from the “Select File…” window or by drag/drop works fine (this had previously lead to the error message “File extension error”).

But on clicking “OK” in the upload box, I’m getting the error message “No file uploaded or invalid file type!”. Uploading a PNG file works fine on the same install.

From the commits mentioned in Allow SVG in image uploads? · Issue #2513 · pkp/pkp-lib · GitHub, I have entered the changes for OJS and pkp-lib to my install, as we are not using the QuickSubmit plugin and neither OMP.

Any hint on what I’m missing would be very helpful!

asmecher · August 14, 2017, 4:18pm

Hi @ojsbsb,

Did you add the pkp-lib commits? Those will also be needed (in the lib/pkp subdirectory).

Regards,
Alec Smecher
Public Knowledge Project Team

ojsbsb · August 16, 2017, 8:31am

Thanks for your reply, @asmecher! For pkp-lib, I have added those changes that I found at pkp/pkp-lib#2513 Add svg upload image support by defstat · Pull Request #2666 · pkp/pkp-lib · GitHub, which was linked to that issue:

diff --git a/lib/pkp/classes/file/FileManager.inc.php b/lib/pkp/classes/file/FileManager.inc.php
index 0174fab..844dfa9 100644
--- a/lib/pkp/classes/file/FileManager.inc.php
+++ b/lib/pkp/classes/file/FileManager.inc.php
@@ -455,6 +455,8 @@ class FileManager {
                        case 'image/x-ico':
                        case 'image/ico':
                                return '.ico';
+                       case 'image/svg+xml':
+                               return '.svg';
                        case 'application/x-shockwave-flash':
                                return '.swf';
                        case 'video/x-flv':
diff --git a/lib/pkp/templates/controllers/tab/settings/form/newImageFileUploadForm.tpl b/lib/pkp/templates/controllers/tab/settings/form/newImageFileUploadForm.tpl
index 2161a6f..f94362f 100644
--- a/lib/pkp/templates/controllers/tab/settings/form/newImageFileUploadForm.tpl
+++ b/lib/pkp/templates/controllers/tab/settings/form/newImageFileUploadForm.tpl
@@ -20,7 +20,7 @@
                                        baseUrl: {$baseUrl|json_encode},
                                        filters: {ldelim}
                                                mime_types : [
-                                                       {ldelim} title : "Image files", extensions : "jpg,jpeg,png" {rdelim}
+                                                       {ldelim} title : "Image files", extensions : "jpg,jpeg,png,svg" {rdelim}
                                                ]
                                        {rdelim}
                                {rdelim}
diff --git a/lib/pkp/templates/user/publicProfileForm.tpl b/lib/pkp/templates/user/publicProfileForm.tpl
index ae6e5d1..2e74c06 100644
--- a/lib/pkp/templates/user/publicProfileForm.tpl
+++ b/lib/pkp/templates/user/publicProfileForm.tpl
@@ -23,7 +23,7 @@
                                        baseUrl: {$baseUrl|json_encode},
                                        filters: {ldelim}
                                                mime_types : [
-                                                       {ldelim} title : "Image files", extensions : "jpg,jpeg,png" {rdelim}
+                                                       {ldelim} title : "Image files", extensions : "jpg,jpeg,png,svg" {rdelim}
                                                ]
                                        {rdelim},
                                        resize: {ldelim}

Is there something else I have missed?

asmecher · August 16, 2017, 4:29pm

Hi @ojsbsb,

As far as I’m aware, that’s all you should need. Did those resolve the issue?

Regards,
Alec Smecher
Public Knowledge Project Team

ojsbsb · August 16, 2017, 4:47pm

Hi @asmecher,

unfortunately not. It is still possible to upload the file (at least the upload animation shows), but when clicking “OK” in the upload box, I’m getting the error message “No file uploaded or invalid file type!”.

I’m on OJS 3.0.2 with this problem, could there be other commits/issues that are required?

Thanks!

asmecher · August 16, 2017, 5:01pm

Hi @ojsbsb,

There are two likely causes:

The MIME type is not being correctly detected for the SVG files (it should be image/svg+xml). This is detected in the PKPString::mime_content_type function.
The area you’re uploading the image to still doesn’t permit SVG images. Where specifically are you uploading the file?

Regards,
Alec Smecher
Public Knowledge Project Team

ojsbsb · August 29, 2017, 10:56am

Hi @asmecher,

it seems like there is a problem with the mime type. As mime type, text/html is detected. Some web search results suggest that this is due to the Adobe software being used:

github.com/bolt/bolt

[Bug] Failed to parse SVG image with text/html mime type

opened 08:16AM - 16 Mar 17 UTC

closed 03:23PM - 27 Mar 17 UTC

tilllt

After updating Bolt to 3.2.9, the "Select from Server" function in the backend d…oes not work anymore, the dialog shows a spinning dotted disk and then fails with a reload symbol. This is likely to be a config specific error and not a general Bolt 3.2.9 error since other people (running 3.2.9) dont experience this behaviour. The same error occurs on the local staging server running php 5.6 / nginx and the "production" server running apache. i doublechecked file permissions and file / dir ownerships on both machines. As in the other referenced issue, "Upload File" and "Select from Stack" still works fine. Details ------- - Bolt 3.2.9 - Composer Install - PHP version: [ 5.6 & 7.0 ] - Used web server: [ Apache & Nginx ] nginx 1.11 - All Browsers Browser Console error: `Failed to load resource: the server responded with a status of 500 (Internal Server Error) ` Bolt system log ``` 47 Critical exception asyncbrowse An exception has been thrown during the rendering of a template ("Failed to get image data from file") in "@bolt/async/browse.twig" at line 123. URI: /async/browse/files?multiselect=true Source: /xyz.de/vendor/twig/twig/lib/Twig/Template.php :: 447 ``` Nginx Error Log: ``` *13 an upstream response is buffered to a temporary file /var/cache/nginx/fastcgi_temp/1/00/0000000001 while reading upstream, client: 192.168.1.200, server: xyz.de, request: "GET /async/browse/files?multiselect=true HTTP/1.1", upstream: "fastcgi://unix:/var/run/php5-fpm.sock:", host: xyz.de", referrer: "https://xyz.de/bolt/editcontent/projects/1" ``` probably unrelated since the same error happens with nginx and apache: http://serverfault.com/questions/587386/an-upstream-response-is-buffered-to-a-temporary-file maybe related but unlike in this issue, a different php version didnt solve the issue (tried on Apache with php 5.6 & php 7 - and on nginx with php 5.6) https://github.com/bolt/bolt/issues/4745 Still could be a rewrite issue, but the servers are using unmodified versions of the Nginx config example and the .htaccess file from the bolt distribution - so no idea how to fix this.

We will work on this further, as enabling upload for text/html is not an option for header graphics.

asmecher · August 29, 2017, 3:42pm

Hi @ojsbsb,

OJS identifies MIME types using a variety of tools, depending on which is supported on your server platform. See the PKPString::mime_content_type function for the implementation of this. It might be useful to check that code against your server config to find out which is being used, then identify how that method is looking at SVG files to determine whether a rule tweak or something will resolve the issue.

There’s also a few helpful exceptions listed in that function. It might be worth adding another for SVG if you think this is a common misdetection.

Regards,
Alec Smecher
Public Knowledge Project Team

ojsbsb · August 29, 2017, 4:52pm

Hi @asmecher,

yes, I have temporarily entered some PHP logging commands into that function to see which of the three cases of if (function_exists(' is used on our server, but it seems the problem is related to the software producing the SVG.

We have found reports like this one saying that Illustrator behaves strangely when exporting to SVG. Our files have been created using the same software, so probably that is the cause and the place to solve it for us.

In general, the mime type "text/html"which is the mime type produced in some cases, could well contain undesired elements for a page header (which is where we are trying to upload the file). So I’m not sure about adding that as an exception, unless the problem becomes more common.

Thanks for your help!