FeaturePanel: upload to WikimediaCommons 🎉

.env

@@ -19,3 +19,7 @@ NEXT_PUBLIC_API_KEY_GRAPHHOPPER=f189b841-6529-46c6-8a91-51f17477dcda
 # Umami anylytics is used to track server load only. We don't want to track clicks in browser.
 # optional, fill blank to disable
 UMAMI_WEBSITE_ID=5e4d4917-9031-42f1-a26a-e71d7ab8e3fe
+
+# Wikimedia Commons upload bot, experimental. Please leave blank.
+NEXT_PUBLIC_ENABLE_UPLOAD=
+OSMAPPBOT_PASSWORD=

package.json

@@ -42,6 +42,7 @@
     "dice-coefficient": "^2.1.1",
     "image-size": "^1.1.1",
     "isomorphic-unfetch": "^4.0.2",
+    "exifr": "^7.1.3",
     "isomorphic-xml2js": "^0.1.3",
     "js-cookie": "^3.0.5",
     "js-md5": "^0.8.3",

pages/api/_fixture.ts

@@ -0,0 +1,45 @@
+export const exampleUploadResponse = {
+  upload: {
+    filename: 'File_1.jpg',
+    result: 'Success',
+    imageinfo: {
+      url: 'https://upload.wikimedia.org/wikipedia/test/3/39/File_1.jpg',
+      html: '<p>A file with this name exists already, please check <strong><a class="mw-selflink selflink">File:File 1.jpg</a></strong> if you are not sure if you want to change it.\n</p>\n<div class="thumb tright"><div class="thumbinner" style="width:182px;"><a           href="/w/index.php?title=Special:Upload&amp;wpDestFile=File_1.jpg" class="new" title="File:File 1.jpg">File:File 1.jpg</a>  <div class="thumbcaption"></div></div></div>\n',
+      width: 474,
+      size: 26703,
+      bitdepth: 8,
+      mime: 'image/jpeg',
+      userid: 42588,
+      mediatype: 'BITMAP',
+      descriptionurl: 'https://test.wikipedia.org/wiki/File:File_1.jpg',
+      extmetadata: {
+        ObjectName: {
+          value: 'File 1',
+          hidden: '',
+          source: 'mediawiki-metadata',
+        },
+        DateTime: {
+          value: '2019-03-06 08:43:37',
+          hidden: '',
+          source: 'mediawiki-metadata',
+        },
+        // ...
+      },
+      comment: '',
+      commonmetadata: [],
+      descriptionshorturl: 'https://test.wikipedia.org/w/index.php?curid=0',
+      sha1: '2ffadd0da73fab31a50407671622fd6e5282d0cf',
+      parsedcomment: '',
+      metadata: [
+        {
+          name: 'MEDIAWIKI_EXIF_VERSION',
+          value: 2,
+        },
+      ],
+      canonicaltitle: 'File:File 1.jpg',
+      user: 'Mansi29ag',
+      timestamp: '2019-03-06T08:43:37Z',
+      height: 296,
+    },
+  },
+};

pages/api/upload.ts

@@ -0,0 +1,52 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { serverFetchOsmUser } from '../../src/server/osmApiAuthServer';
+import {
+  fetchFeatureWithCenter,
+  fetchParentFeatures,
+} from '../../src/services/osmApi';
+import { intl, setIntl } from '../../src/services/intl';
+import { getExifData } from '../../src/server/upload/getExifData';
+import { uploadToWikimediaCommons } from '../../src/server/upload/uploadToWikimediaCommons';
+import { getApiId } from '../../src/services/helpers';
+import { File } from '../../src/server/upload/types';
+import { setProjectForSSR } from '../../src/services/project';
+import { fetchToFile } from '../../src/server/upload/fetchToFile';
+import { OsmId } from '../../src/services/types';
+import { isClimbingRoute } from '../../src/utils';
+import { Feature } from '../../src/services/types';
+
+// inspiration: https://commons.wikimedia.org/wiki/File:Drive_approaching_the_Grecian_Lodges_-_geograph.org.uk_-_5765640.jpg
+// https://github.com/multichill/toollabs/blob/master/bot/commons/geograph_uploader.py
+// TODO https://commons.wikimedia.org/wiki/Template:Geograph_from_structured_data
+
+const getFeature = async (apiId: OsmId): Promise<Feature> => {
+  const feature = await fetchFeatureWithCenter(apiId);
+  if (isClimbingRoute(feature)) {
+    const parentFeatures = await fetchParentFeatures(feature.osmMeta);
+    return { ...feature, parentFeatures };
+  }
+  return feature;
+};
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  try {
+    const { shortId, lang, url, filename } = JSON.parse(req.body);
+    setIntl({ lang, messages: [] });
+    setProjectForSSR(req);
+
+    const apiId = getApiId(shortId);
+    const feature = await getFeature(apiId);
+    console.log('intl', intl); // eslint-disable-line no-console
+    const user = await serverFetchOsmUser(req.cookies.osmAccessToken);
+
+    const filepath = await fetchToFile(url);
+    const { location, date } = await getExifData(filepath);
+    const file: File = { filepath, filename, location, date };
+    const out = await uploadToWikimediaCommons(user, feature, file, lang);
+
+    res.status(200).json(out);
+  } catch (err) {
+    console.error(err); // eslint-disable-line no-console
+    res.status(err.code ?? 400).send(String(err));
+  }
+};

src/components/FeaturePanel/FeaturePanel.tsx

@@ -27,6 +27,7 @@ import { ClimbingStructuredData } from './Climbing/ClimbingStructuredData';
 import { isPublictransportRoute } from '../../utils';
 import { Sockets } from './Sockets/Sockets';
 import { ClimbingTypeBadge } from './Climbing/ClimbingTypeBadge';
+import { UploadDialog } from './UploadDialog/UploadDialog';
 
 const Flex = styled.div`
   flex: 1;
@@ -80,6 +81,12 @@ export const FeaturePanel = ({ headingRef }: FeaturePanelProps) => {
               </PanelSidePadding>
 
               <Box mb={2}>
+                {process.env.NEXT_PUBLIC_ENABLE_UPLOAD && (
+                  <PanelSidePadding>
+                    <UploadDialog />
+                  </PanelSidePadding>
+                )}
+
                 <FeatureImages />
               </Box>
 

src/components/FeaturePanel/UploadDialog/UploadDialog.tsx

@@ -0,0 +1,168 @@
+import React, { ChangeEvent, useState } from 'react';
+import { Button, CircularProgress } from '@mui/material';
+import { fetchJson, fetchText } from '../../../services/fetch';
+import { useFeatureContext } from '../../utils/FeatureContext';
+import { getShortId } from '../../../services/helpers';
+import {
+  editOsmFeature,
+  loginAndfetchOsmUser,
+} from '../../../services/osmApiAuth';
+import { intl } from '../../../services/intl';
+import { Feature } from '../../../services/types';
+import { clearFeatureCache, quickFetchFeature } from '../../../services/osmApi';
+import {
+  getNextWikimediaCommonsIndex,
+  getWikimediaCommonsKey,
+} from '../Climbing/utils/photo';
+import { useSnackbar } from '../../utils/SnackbarContext';
+import { useRouter } from 'next/navigation';
+
+const WIKIPEDIA_LIMIT = 100 * 1024 * 1024;
+const BUCKET_URL = 'https://osmapp-upload-tmp.s3.amazonaws.com/';
+
+// Vercel has limit 4.5 MB on payload size, so we have to upload to S3 first
+const uploadToS3 = async (file: File) => {
+  const key = `${Math.random()}/${file.name}`;
+
+  const body = new FormData();
+  body.append('key', key);
+  body.append('file', file);
+
+  await fetchText(BUCKET_URL, { method: 'POST', body });
+
+  return `${BUCKET_URL}${key}`;
+};
+
+const submitToWikimediaCommons = async (
+  url: string,
+  filename: string,
+  feature: Feature,
+) => {
+  const shortId = getShortId(feature.osmMeta);
+
+  return await fetchJson('/api/upload', {
+    method: 'POST',
+    body: JSON.stringify({ url, filename, shortId, lang: intl.lang }),
+  });
+};
+
+const performUploadWithLogin = async (
+  url: string,
+  filename: string,
+  feature: Feature,
+) => {
+  try {
+    return await submitToWikimediaCommons(url, filename, feature);
+  } catch (e) {
+    if (e.code === '401') {
+      await loginAndfetchOsmUser();
+      return await submitToWikimediaCommons(url, filename, feature);
+    }
+    throw e;
+  }
+};
+
+const submitToOsm = async (feature: Feature, fileTitle: string) => {
+  clearFeatureCache(feature.osmMeta);
+  const freshFeature = await quickFetchFeature(feature.osmMeta);
+  const newPhotoIndex = getNextWikimediaCommonsIndex(freshFeature.tags);
+  await editOsmFeature(
+    freshFeature,
+    `Upload image ${fileTitle}`,
+    {
+      ...freshFeature.tags,
+      [getWikimediaCommonsKey(newPhotoIndex)]: fileTitle,
+    },
+    false,
+  );
+
+  clearFeatureCache(feature.osmMeta);
+};
+
+const useGetHandleFileUpload = (
+  feature: Feature,
+  setUploading: React.Dispatch<React.SetStateAction<boolean>>,
+  setResetKey: React.Dispatch<React.SetStateAction<number>>,
+) => {
+  const { showToast } = useSnackbar();
+  const router = useRouter();
+
+  return async (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    const filename = file.name;
+
+    if (!file) {
+      return;
+    }
+
+    if (file.size > WIKIPEDIA_LIMIT) {
+      alert('Maximum file size for Wikipedia is 100 MB.'); // eslint-disable-line no-alert
+      return;
+    }
+
+    try {
+      setUploading(true);
+      const url = await uploadToS3(file);
+      const wikiResponse = await performUploadWithLogin(url, filename, feature);
+      const osmResponse = await submitToOsm(feature, wikiResponse.title);
+
+      showToast('Image uploaded successfully', 'success');
+      router.refresh();
+    } finally {
+      setUploading(false);
+      setResetKey((key) => key + 1);
+    }
+  };
+};
+
+const UploadButton = () => {
+  const { feature } = useFeatureContext();
+  const [uploading, setUploading] = useState<boolean>(false);
+  const [resetKey, setResetKey] = useState<number>(0);
+
+  const handleFileUpload = useGetHandleFileUpload(
+    feature,
+    setUploading,
+    setResetKey,
+  );
+
+  return (
+    <>
+      <Button
+        component="label"
+        variant="contained"
+        color="primary"
+        // startIcon={<UploadFileIcon />}
+        style={{ marginBottom: '1rem' }}
+        disabled={uploading}
+        key={resetKey}
+        endIcon={uploading ? <CircularProgress /> : undefined}
+      >
+        Upload image
+        <input
+          type="file"
+          // accept="image/*"
+          hidden
+          onChange={handleFileUpload}
+        />
+      </Button>
+    </>
+  );
+};
+
+export const UploadDialog = () => {
+  const { feature } = useFeatureContext();
+  const { osmMeta, skeleton } = feature;
+  const editEnabled = !skeleton;
+
+  return (
+    <>
+      {editEnabled && (
+        <>
+          <UploadButton />
+          <br />
+        </>
+      )}
+    </>
+  );
+};

src/helpers/featureLabel.ts

@@ -16,15 +16,16 @@ export const getTypeLabel = ({ layer, osmMeta, properties, schema }: Feature) =>
 const getRefLabel = (feature: Feature) =>
   feature.tags.ref ? `${getTypeLabel(feature)} ${feature.tags.ref}` : '';
 
-const getName = ({ tags }: Feature) => tags[`name:${intl.lang}`] || tags.name;
+export const getName = ({ tags }: Feature) =>
+  tags[`name:${intl.lang}`] || tags.name;
 
 export const hasName = (feature: Feature) =>
   feature.point || getName(feature) || getBuiltAddress(feature); // we dont want to show "No name" for point
 
 export const getHumanPoiType = (feature: Feature) =>
   hasName(feature) ? getTypeLabel(feature) : t('featurepanel.no_name');
 
-const getLabelWithoutFallback = (feature: Feature) => {
+export const getLabelWithoutFallback = (feature: Feature) => {
   const { point, roundedCenter } = feature;
   if (point) {
     return roundedToDeg(roundedCenter);