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.

  • 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 '18 at 18:56
  • 1
    Possibly related: Editor improvements for images and links Ask – Sam Onela Oct 31 '18 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. – ShaWiz Oct 31 '18 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 '18 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 '18 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 '18 at 2:24
  • Huh. Anything in the developer console in either of those scenarios, @Martin? – Shog9 Nov 1 '18 at 2:48
  • Same results for me as what Martin R said. – fmw42 Nov 1 '18 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 '18 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. – ShaWiz Nov 1 '18 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! – LаngLаngС Nov 1 '18 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 '18 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 Nov 1 '18 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 Nov 1 '18 at 17:01
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).

  • 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 '18 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 Nov 1 '18 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 '18 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 Nov 1 '18 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 '18 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]) – LаngLаngС Nov 1 '18 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 '18 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) – LаngLаngС Nov 1 '18 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. – Cris Luengo Nov 2 '18 at 3:31
  • 1
    I have a coworker who can reproduce the issue, will try to debug together. – balpha Nov 2 '18 at 8:51
  • @MartinR I have deployed a change that fixes it for my coworker -- could you try again please? – balpha Nov 2 '18 at 10:02
  • @CrisLuengo see above – balpha Nov 2 '18 at 10:02
  • That seems to do it for me :) – LаngLаngС Nov 2 '18 at 10:06
  • @balpha: Looks good in my first quick test. – Martin R Nov 2 '18 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 '18 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!)

  • BTW: I did clear the cache before trying all this. – Cris Luengo Nov 1 '18 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 '18 at 16:31
  • @Shog9: Nothing has changed. I still cannot drop files on the edit box or the image upload drop-down. – Cris Luengo Nov 2 '18 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 '18 at 5:14
  • @Shog9: I've pasted the result of your snippet in this answer. – Cris Luengo Nov 2 '18 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
------------------
  • 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 '18 at 5:32

You must log in to answer this question.

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