Stack Overflow's new image uploader does not work on Mac Safari

Question

Stack Overflow's new image uploader does not work on Mac Safari Version 12.0.1 (12606.2.104.1.2). I cannot drag and drop nor select from a list. It works fine using Firefox, Chrome and Opera. This just started today 10/31/2018 when I notice that there is a new interface for the image upload using IMGUR.

Please look into this and fix for Safari if possible or revert back to the old interface.

Answer 1

The Safari drag and drop issue is fixed now (Safari doesn't disclose the file type during dragging, so the code was assuming whatever you were dragging was not an image and thus didn't allow dropping – after this change, we just assume it's an image if we don't know).

Answer 2

I can add some information to this report. I'm using MacOS 10.13.6, with Safari 12.0.1.

In this edit box I'm able to attach an image by clicking the image button, then clicking on the drop-down and selecting an image file. I am also able to copy an image from Preview and paste it directly in the edit box (⌘+V) or in the drop-down image uploader.

But neither the edit box nor the image drop-down accept a PNG file dropped onto it. The JavaScrip console remains empty. The web browser window does accept a file dropped outside the edit box, loading the image in place of this web site. When hovering the file over the edit box or the pull-down, the green plus symbol on the mouse cursor disappears.

I tried also on math.stackexchange.com and codereview.stackexchange.com, and the results there were the same as here.

---

This might or might not be related to the issue:

When I copy an image from a MATLAB figure window, the pasting does not work. In Preview, I can select "File"->"New From Clipboard", then copy the new figure created and paste it here. So the MATLAB figure is in the clipboard. But it seems to be in a different format from what this edit box accepts.

---

Results for Shog9's snippet:

1. Dropping a JPEG and PNG files:

   drop:
   1 items:
    type: image/jpeg, kind: file
   1 types:
    Files
   1 files:
    type: image/jpeg, size: 865931
   ------------------
   
   dragover:
   1 types:
    Files
   ------------------
   
   dragenter:
   1 types:
    Files
   ------------------
   

   drop:
   1 items:
    type: image/png, kind: file
   1 types:
    Files
   1 files:
    type: image/png, size: 47164
   ------------------
   
   dragover:
   1 types:
    Files
   ------------------
   
   dragenter:
   1 types:
    Files
   ------------------
   

2. Pasting a PNG from Preview:

   paste:
   1 items:
    type: image/png, kind: file
   1 types:
    Files
   1 files:
    type: image/png, size: 61381
   ------------------
   

3. Pasting a figure from MATLAB:

   paste:
   
   ------------------
   

(I guess there's no hope here!)

Answer 3

Let's collect some data... If dragging a file, or pasting an image isn't working for you, run the snippet below - then drag or paste the image that is giving you trouble into the textarea, copy the log text that appears below it, and post it here somewhere.

var dragoverLog = "";
var dragenterLog = "";

$("#droppastetarget").on("dragenter dragover", function (e) 
{
   e.originalEvent.dataTransfer.dropEffect = "copy";
   if (e.type=='dragenter')
      dragenterLog = dumpEvent(e);
   else
      dragoverLog = dumpEvent(e);
   return false;
}).on("drop", function (e) 
{
   var desc = dumpEvent(e);
   Log("drop", desc, dragoverLog, dragenterLog);
   return false;
});
$(document).on("paste", function (e) 
{
   if (!$(e.target).add(":focus").closest($("#droppastetarget")).length) return;
   
   var desc = dumpEvent(e);
   Log("paste", desc);
   return false;
});

function dumpEvent(event)
{
   if (!event) {
      return null;
   }

   event = event.originalEvent || event;
   var dt;

   try {
      switch (event.type) {
          case "paste":
              dt = event.clipboardData; break;
          case "drop":
          case "dragover":
          case "dragenter":
              dt = event.dataTransfer; break;
      }
   } catch(ex) {}
   
   if ( !dt ) return null;
   
   var description = [];
   
   if (dt.items && dt.items.length) 
   {
      description.push(dt.items.length  + " items:");
      for (var i = 0; i < dt.items.length; i++) 
      {
         description.push(" type: " + dt.items[i].type + ", kind: " + dt.items[i].kind);
      }
   }
   
   if ( dt.types && dt.types.length )
   {
      description.push(dt.types.length  + " types:");
      for (var i = 0; i < dt.types.length; i++) 
      {
         description.push(" " + dt.types[i]);
      }
   }
   
   if ( dt.files && dt.files.length )
   {
      description.push(dt.files.length  + " files:");
      for (var i = 0; i < dt.files.length; i++) 
      {
         description.push(" type: " + dt.files[i].type + ", size: " + dt.files[i].size);
      }
   }
   
   return description.join("\n");
}

function Log(eventType, description, dragoverLog, dragenterLog)
{
   $("#log").html(eventType + ":\n"
      + description + "\n------------------\n\n"
      + (dragoverLog 
            ? "dragover:\n" + dragoverLog + "\n------------------\n\n"
            : "")
      + (dragenterLog 
            ? "dragenter:\n" + dragenterLog + "\n------------------\n\n"
            : "")
   );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<textarea id='droppastetarget'>
Drop or paste some sort of image here
</textarea>
<pre id="log"></pre>

Example log output (from Chrome on Windows):

drop:
1 items:
 type: image/png, kind: file
1 types:
 Files
1 files:
 type: image/png, size: 18822
------------------

dragenter:
1 items:
 type: image/png, kind: file
1 types:
 Files
------------------