Use download.js to downlad images

Resize initial-setup.png

ui/package-lock.json

@@ -2972,6 +2972,11 @@
       "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-4.2.0.tgz",
       "integrity": "sha1-3vHxyl1gWdJKdm5YeULCEQbOEnU="
     },
+    "downloadjs": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npmjs.org/downloadjs/-/downloadjs-1.4.7.tgz",
+      "integrity": "sha1-9p+W+UDg0FU9rCkROYZaPNAQHjw="
+    },
     "duplexer2": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",

ui/package.json

@@ -14,6 +14,7 @@
     "apollo-link-ws": "^1.0.18",
     "babel-plugin-styled-components": "^1.10.6",
     "copy-to-clipboard": "^3.2.0",
+    "downloadjs": "^1.4.7",
     "graphql": "^14.5.0",
     "graphql-tag": "^2.10.1",
     "parcel-bundler": "^1.12.3",

ui/src/components/sidebar/SidebarDownload.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import { Menu, Dropdown, Button } from 'semantic-ui-react'
 import { Query } from 'react-apollo'
 import gql from 'graphql-tag'
+import download from 'downloadjs'
 
 const downloadQuery = gql`
   query sidebarDownloadQuery($photoId: ID!) {
@@ -24,12 +25,9 @@ const downloadPhoto = async url => {
   })
 
   const content = await request.blob()
-  const contentUrl = URL.createObjectURL(content)
+  const filename = url.match(/[^/]*$/)[0]
 
-  var downloadAnchor = document.createElement('a', contentUrl)
-  downloadAnchor.setAttribute('href', contentUrl)
-  downloadAnchor.setAttribute('download', url.match(/[^/]*$/)[0])
-  downloadAnchor.click()
+  download(content, filename)
 }
 
 const SidebarDownload = ({ photoId }) => {