screenshot download button in import dialog box

frontend/src/Metamaps/GlobalUI/ImportDialog.js

@@ -24,7 +24,8 @@ const ImportDialog = {
     `))
     ReactDOM.render(React.createElement(ImportDialogBox, {
       onFileAdded: PasteInput.handleFile,
-      exampleImageUrl: serverData['import-example.png']
+      exampleImageUrl: serverData['import-example.png'],
+      downloadScreenshot: ImportDialog.downloadScreenshot
     }), $('.importDialogWrapper').get(0))
   },
   show: function() {
@@ -32,6 +33,10 @@ const ImportDialog = {
   },
   hide: function() {
     ImportDialog.closeLightbox('import-dialog')
+  },
+  downloadScreenshot: function() {
+    ImportDialog.hide()
+    Map.offerScreenshotDownload()
   }
 }
 

frontend/src/Metamaps/Map/index.js

@@ -251,19 +251,22 @@ const Map = {
     }
   },
   exportImage: function() {
+    Map.offerScreenshotDownload()
+    Map.uploadMapScreenshot()
+  },
+  offerScreenshotDownload: () => {
     const canvas = Map.getMapCanvasForScreenshots()
     const filename = Map.getMapScreenshotFilename(Active.Map)
 
-    Map.offerScreenshotDownload(canvas, filename)
-    Map.uploadMapScreenshot(canvas, filename)
-  },
-  offerScreenshotDownload: (canvas, filename) => {
     var downloadMessage = outdent`
       Captured map screenshot!
       <a href="${canvas.canvas.toDataURL()}" download="${filename}">DOWNLOAD</a>`
     GlobalUI.notifyUser(downloadMessage)
   },
-  uploadMapScreenshot: (canvas, filename) => {
+  uploadMapScreenshot: () => {
+    const canvas = Map.getMapCanvasForScreenshots()
+    const filename = Map.getMapScreenshotFilename(Active.Map)
+
     canvas.canvas.toBlob(imageBlob => {
       const formData = new window.FormData()
       formData.append('map[screenshot]', imageBlob, filename)

frontend/src/components/ImportDialogBox.js

@@ -27,6 +27,9 @@ class ImportDialogBox extends Component {
         <div className="import-blue-button" onClick={this.handleExport('json')}>
           Export as JSON
         </div>
+        <div className="import-blue-button" onClick={this.props.downloadScreenshot}>
+          Download screenshot of map
+        </div>
         <h3>IMPORT</h3>
         <p>To upload a file, drop it here:</p>
         <Dropzone onDropAccepted={this.handleFile}
@@ -42,7 +45,8 @@ class ImportDialogBox extends Component {
 
 ImportDialogBox.propTypes = {
   onFileAdded: PropTypes.func,
-  exampleImageUrl: PropTypes.string
+  exampleImageUrl: PropTypes.string,
+  downloadScreenshot: PropTypes.func
 }
 
 export default ImportDialogBox