12

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.

15
  • 2
    I can confirm the issue. Drag&drop does not work on any site that I tried. Selecting an image via file browser works on some sites (e.g. on this site) but not on all (e.g. not on math.stackexchange.com)
    – Martin R
    Oct 31, 2018 at 18:56
  • 1
    Possibly related: Editor improvements for images and links Ask
    – Sam Onela
    Oct 31, 2018 at 19:03
  • They won't revert back, since you can still use third party image host i.e. it's not a show stopper. Oct 31, 2018 at 23:06
  • 1
    Well, then it would be nice if it was fixed for Safari. Most Mac users are on Safari, I expect. Perhaps it is an IMGUR issue and not these forums.
    – fmw42
    Oct 31, 2018 at 23:08
  • Mind posting a more detailed description of what you're observing (does the upload pane not accept drops/clicks, does it accept them but ignore them, etc)?
    – Shog9
    Nov 1, 2018 at 1:08
  • 2
    @Shog9: The upload pane does not accept drops (on any site that I tried). It accepts a click which opens the file browser, and I can select an image. But on some sites (e.g.math.stackexchange.com, codereview.stackexchange.com) nothing happens after selecting the image, no preview is shown and the “Add picture” button remains disabled.
    – Martin R
    Nov 1, 2018 at 2:24
  • Huh. Anything in the developer console in either of those scenarios, @Martin?
    – Shog9
    Nov 1, 2018 at 2:48
  • Same results for me as what Martin R said.
    – fmw42
    Nov 1, 2018 at 2:58
  • @Shog9: If you mean “Develop->Show JavaScript Console”: there is nothing. (There were some messages from my antivirus software, so I disabled that and restarted Safari. Now there are no console messages at all, and it still does not work.)
    – Martin R
    Nov 1, 2018 at 3:01
  • 2
    As usual, they probably use super modern CSS which is really cool and neat to write, but they keep forgetting it's NOT cross browser. That's really a pity. Public website with millions of viewers should really support more than just three browsers. Nov 1, 2018 at 7:18
  • And it's not buggy Safari 12 causing the issue, it's on v11 as well. Sometimes a few things work, sometimes they don't, and most don't work at all. I cannot drag&drop, cannot upload a file directly –– at all! This needs either serious work or a roll back! Nov 1, 2018 at 15:41
  • 1
    Based on the descriptions so far, I don't think this has anything to do with CSS, @ShadowWizard... My uninformed guess would be Safari is passing along file formats that we don't expect and can't handle, and the script is doing an insufficiently-thorough job of filtering them out. Need to put together a test for that. Also, blame Apple for making it a pain to test anything in Safari without dropping a few thousand $$$ on a Mac.
    – Shog9
    Nov 1, 2018 at 16:19
  • @MartinR I can't reproduce the issue with different behavior on math.se vs. other sites. Grateful for any additional info you can give there.
    – balpha StaffMod
    Nov 1, 2018 at 16:38
  • 1
    FWIW, sorry for not testing it as completely in Safari as I should have, especially knowing that it has a tendency to behave differently from other browsers. I just tested some things via BrowserStack (my MacBook was updating the OS at the time), and I should've been more thorough.
    – balpha StaffMod
    Nov 1, 2018 at 17:01

3 Answers 3

5

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).

15
  • 1
    Drag&drop still does not work for me (Safari 12 on macOS 10.14). Clicking into the field and selecting an image via file browser works on this site, but not on math.stackexchange.com. I have cleared the Safari history and cache, no change.
    – Martin R
    Nov 1, 2018 at 18:09
  • Weird, works great here with Safari 11 on 10.13. I'm afraid I'll need more details than "doesn't work" to debug this.
    – balpha StaffMod
    Nov 1, 2018 at 19:52
  • 1
    Interestingly, selection via file browser now works for me on math.stackexchange.com, but drag&drop still does not. – What details do you need?
    – Martin R
    Nov 1, 2018 at 19:56
  • 1
    @MartinR What are you dragging, from where? Into the image uploader or directly into the editor text box? Does the mouse cursor indicate (with a green plus) that dropping should be successful? What exactly happens when you drop?
    – balpha StaffMod
    Nov 1, 2018 at 19:58
  • 1
    For me on Mac OSX Sierra (10.12.6) and Safari Version 12.0.1, drag and drop from the desktop does not work. However, if I now click in the window and it opens a file browser, I can select the file and it does insert the preview and then when I click Add, it does add the image to the post.
    – fmw42
    Nov 1, 2018 at 20:00
  • Freshly restarted v11 on 10.12 still impossible: d&d from Finder window into editing this very answer: nothing happens (Firefox displays plus-sign and adds pic as expected, using the filepicker in Safari also works now [that had consistently a beachball earlier today]) Nov 1, 2018 at 20:05
  • 1
    @balpha: I open the image uploader by clicking on the image icon. I drag a png file from the desktop over the gray “Drag and drop or click here” area. The green plus sign disappears as soon as the cursor is over that area. When I release the mouse, nothing happens.
    – Martin R
    Nov 1, 2018 at 20:05
  • Also, if you leave the d&d area, the plus sign does appear. But the result of dropping it then is that Safari loads the picture directly (if you abandon the edit) Nov 1, 2018 at 20:34
  • 1
    I can confirm the reports of LangLangC and Martin R. What I wrote last night still applies, nothing has changed. I've tried with PNG files and a JPEG file. Nov 2, 2018 at 3:31
  • 1
    I have a coworker who can reproduce the issue, will try to debug together.
    – balpha StaffMod
    Nov 2, 2018 at 8:51
  • @MartinR I have deployed a change that fixes it for my coworker -- could you try again please?
    – balpha StaffMod
    Nov 2, 2018 at 10:02
  • @CrisLuengo see above
    – balpha StaffMod
    Nov 2, 2018 at 10:02
  • That seems to do it for me :) Nov 2, 2018 at 10:06
  • @balpha: Looks good in my first quick test.
    – Martin R
    Nov 2, 2018 at 10:06
  • 3
    @balpha:. OK, it now seems to work fine for me, also, with dragging and dropping in Mac Sierra Safari in stackoverflow. Thanks for the fix and your attention to this issue.
    – fmw42
    Nov 2, 2018 at 16:45
4

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!)

5
  • BTW: I did clear the cache before trying all this. Nov 1, 2018 at 14:48
  • balpha just rolled out a fix - it should resolve the issues with drag & drop; it might affect the behavior of your MATLAB pasting as well. Mind re-testing & letting us know what you observe?
    – Shog9
    Nov 1, 2018 at 16:31
  • @Shog9: Nothing has changed. I still cannot drop files on the edit box or the image upload drop-down. Nov 2, 2018 at 3:29
  • Ok. In the interest of not dragging this on longer than necessary, would you mind running the snippet in my answer below and include the results of dragging files into it?
    – Shog9
    Nov 2, 2018 at 5:14
  • @Shog9: I've pasted the result of your snippet in this answer. Nov 2, 2018 at 5:25
1

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
------------------
1
  • This is what I get from using Safari on Mac OSX Sierra in your code snipped window in this forum when dragging and dropping a 256x256 png of Lena. drop: 1 items: type: image/png, kind: file 1 types: Files 1 files: type: image/png, size: 118327 ------------------ dragover: 1 types: Files ------------------ dragenter: 1 types: Files ------------------ But dragging an dropping in stackoverflow still fails for me for both PNG and JPG. However, I can select from the menu and it works fine.
    – fmw42
    Nov 2, 2018 at 5:32

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .