"No file uploaded or invalid file type!" when uploading css in OJS3

Software Support
1

I’m trying to upload a css file. I’ve successfully uploaded them before but for some reason, I’m getting a popup error that says “No file uploaded or invalid file type!”

This is my css

 .sidebar-widget-header {
  background-color: #37738b;
  padding: 5px;
  color: white;
  font-weight: bold;
}

/******************************************
 * home page
 ******************************************/

/********************
 * Articles section
 *********************/

section.current_issue section.section > .page-header {
  display: none;
}

/*
.media-list {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}
*/

.media {
  float: left;
  width: 50%;
}
2

It seems the problematic section of the css is

/*
.media-list {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}
*/

This is a valid comment as far as I know. I’ve validated the whole css file at W3C

3

Hi @inferlinkdev,

How have you narrowed it down to that section?

Regards,
Alec Smecher
Public Knowledge Project Team

4

Hi @asmecher,

I simply removed the offending section and uploaded the css. That upload and every subsequent one was successful.

5

Hi @inferlinkdev,

OJS relies on the system’s file type determination tools, and sometimes these guess wrong. OJS is looking for the system to report either a text/css or text/plain MIME type, and I suspect those comments were causing it to detect something else (perhaps C code). If you’re content to continue without those comments in place, then I’d suggest doing that.

Regards,
Alec Smecher
Public Knowledge Project Team

6

Hi @asmecher

Is there a OJS-sanctioned way of commenting out styles I may want to use later?
This would be helpful

7

Hi @inferlinkdev,

OJS uses file type identification tools built into your server, and I suspect these are misfiring. Try running file -m /path/to/myfile.css to see what it detects (if you’re on a *NIX-like system).

Regards,
Alec Smecher
Public Knowledge Project Team

8

Hi @asmecher

When I run “file jair.css” on my mac, I get

jair.css: ASCII test

Not too familiar the file command. Do I need some system-specific magic file from the ojs server for proper detection?

9

Hi @inferlinkdev,

Try…

file --mime-type /path/to/file

Regards,
Alec Smecher
Public Knowledge Project Team

10

Is your mac hosting OJS? Note that MIME type detection will vary from system to system.

11 
file --mime-type jair.css

returns

jair.css: text/plain

I’m not running this on the OJS machine though. I haven’t been given ssh access into it yet

12

Hi @inferlinkdev,

You’ll need to run this on the OJS machine for the result to be useful. Note that OJS may not use exactly the same toolset as the file tool – depending on your PHP configuration – but this will be a good starting point for further debugging.

Regards,
Alec Smecher
Public Knowledge Project Team

13

Hi all,

Since “mime_content_type” function in “PKPString.inc.php” uses PHP’s “finfo” function first if available (should be available in PHP >=5.3.0), falling back to the deprecated PHP function “mime_content_type” (confusingly of the same name) and then falling back to command line tool “file”. I’d suggest to check what “finfo” does with the file using the same magic database that is configured in config.inc.php at line 230 (by default commented out though).

You could just open PHP interactive shell with php -a and then run a test with entered line by line (or create a script and just run that):

$filename = "PATHTOYOURFILEINHERE";
$magic = "/etc/magic.mime";
$finfo = finfo_open(FILEINFO_MIME_TYPE, $magic);
echo finfo_file($finfo, $filename);
finfo_close($finfo);

If there’s no magic db configured in config.inc.php you can replace the 3rd line with:
$finfo = finfo_open(FILEINFO_MIME_TYPE);

Bear in mind: there’s no point in doing this check on any other system than your actual server as @asmecher already pointed out.

EDIT:
Oh, one more thing: it often works to compress the css file to avoid wrong mime type recognition.

14

Two more notes here:

  1. The PHP function mime_content_type is not actually deprecated. It was incorrectly marked deprecated in a couple of versions of the PHP documentation, however.

  2. OJS 3.x inherited a kludge I put into OJS 2.x which can help to disambiguate faulty MIME detection. See:

The general idea is: if we know what file extension we were given, and MIME detection returned an ambiguous result which doesn’t match the extension, change the MIME type to match the extension.

This really ought to be exposed in the UI and database, but it is stuck in the code for now.

15

Hi. I found this topic by googling.

I am having exactly the same problem, but not regarding comments (PS: read ps, problems too after all), it is regarding the “float” property: if I used float in my css, when I try to upload a stylesheet OJS says it is an invalid file type, but acpets it without a “float:right;” line. With this block it does not acept:

.pkp_site_name::after {
content: url('/xxx/xx.png');
float: right;
padding-top: 10px;
}

But if I change to this one it acepts:

.pkp_site_name::after {
content: url('/xxx/xxx.png');
padding-top: 10px;
}

I found it by try and error. Using the latedst OJS + Fedora + Negingx + Latest PHP + MariaDB

I share this if usefull for someone googlin in the future and for bug hunting.

PS: after all, comments give trouble too like the main question in this topic. Had to delete a comment so OJS could acept my css. If usefull for bug hunting, I post my original CSS file next (had to delet comments and the “float:right;” line for OJS to acept it) note: changed file names and directories by xxx:

.cmp_announcements {
width:100% !important;
}

.highlight_first {
width:100% !important;
}

.obj_announcement_summary {
width:100% !important;
}

.old_dia {
list-style-type:none;
}

.old_dia li {
display:inline-block;
background:#2B2B2B;
color:#FFFFFF;
padding:0px 5px 0px 5px;
text-align:center;
margin:7px;
}

.old_dia li p {
margin:2px 0px;
line-height:normal;
}

.old_dia li img:hover{
opacity:0.5;
}

#headerNavigationContainer {
background:#00746b url('bg-pattern.png') repeat;
}

#customblock-Indexation a:hover {
opacity:0.5;
}

.sponsors-logos img:hover {
opacity:0.5;
}

.pkp_site_name::after {
content: url('/xxx/xxx.png');
float:right;
padding-top:10px;
}

.pkp_site_name_wrapper img {

}

#navigationPrimary {

}

.pkp_site_name_wrapper a {
padding-top:0;
}

.pkp_site_name_wrapper a:hover {
opacity:0.5;
}

.pkp_navigation_primary_wrapper ul.pkp_navigation_primary > li > a {
font-weight:bold;
text-shadow:1px 1px #333;
border-bottom: 3px solid transparent;
}

.pkp_navigation_primary_wrapper ul.pkp_navigation_primary > li > ul a {
color:#333;
font-weight:bold;
}

.pkp_navigation_primary_wrapper ul.pkp_navigation_primary > li > ul a:hover {
border-color:#333;
}

.pkp_navigation_primary_wrapper ul.pkp_navigation_primary > li > a:hover {
/*border-bottom: 2px solid #333;
color:#333;*/
color:#000000;
border-bottom: 3px solid #000000;
text-shadow:1px 1px 1px #C3C3C3;
}

/*Logotipo colado ao topo da página
div.pkp_head_wrapper {
padding-top:0 !important;
}

.pkp_site_name_wrapper {
display:inline-block;
}

.pkp_site_name_wrapper a {
padding-top:0;
}

#navigationUserWrapper {
left:auto;
right:0;
display:inline-block;

float:right;
}

#navigationUserWrapper ul#navigationUser {
display:inline-block;
width:auto;
}
16

I found something weird. Which two folders were owned by root?!! These folder are under public
Capture