FeaturePanel: upload to WikimediaCommons 🎉

.env.local.example

@@ -0,0 +1 @@
+OSMAPPBOT_PASSWORD=

.gitignore

@@ -19,3 +19,4 @@ yarn-error.log*
 /public/workbox-*.js.map
 /.vercel
 .env.sentry-build-plugin
+/.env.local

package.json

@@ -39,6 +39,7 @@
     "date-fns": "^3.6.0",
     "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/_document.tsx

@@ -92,7 +92,7 @@ MyDocument.getInitialProps = async (
   // server intl is not available in App, only in this file (because we don't want to sent messages over and over again)
   const serverIntl = await getServerIntl(ctx);
   setIntl(serverIntl); // for ssr
-  setProjectForSSR(ctx);
+  setProjectForSSR(ctx.req);
 
   const initialProps = await documentGetInitialProps(ctx);
 

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));
+  }
+};

pages/api/token-login.ts → pages/api/user.ts

@@ -1,11 +1,10 @@
 import type { NextApiRequest, NextApiResponse } from 'next';
-import { serverFetchOsmUser } from '../../src/services/osmApiAuthServer';
+import { serverFetchOsmUser } from '../../src/server/osmApiAuthServer';
 
 // TODO upgrade Nextjs and use export async function POST(request: NextRequest) {
 export default async (req: NextApiRequest, res: NextApiResponse) => {
   try {
-    const { osmAccessToken } = req.cookies;
-    const user = await serverFetchOsmUser({ osmAccessToken });
+    const user = await serverFetchOsmUser(req.cookies.osmAccessToken);
 
     res.status(200).json({ user });
   } catch (err) {

src/components/FeaturePanel/Climbing/utils/photo.ts

@@ -45,7 +45,7 @@ export const getNextWikimediaCommonsIndex = (tags: FeatureTags) => {
       }
     }
     return max;
-  }, 0);
+  }, -1 /* so it will be 0 for the first tag*/);
 
   return maxKey + 1;
 };

src/components/FeaturePanel/FeaturePanel.tsx

@@ -23,6 +23,7 @@ import { FeaturePanelFooter } from './FeaturePanelFooter';
 import { ClimbingRouteGrade } from './ClimbingRouteGrade';
 import { Box } from '@mui/material';
 import { ClimbingGuideInfo } from './Climbing/ClimbingGuideInfo';
+import { UploadDialog } from './UploadDialog/UploadDialog';
 
 const Flex = styled.div`
   flex: 1;
@@ -73,6 +74,12 @@ export const FeaturePanel = ({ headingRef }: FeaturePanelProps) => {
               </PanelSidePadding>
 
               <Box mb={2}>
+                {advanced && (
+                  <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/components/Map/behaviour/maptilerFix.tsx

@@ -1,7 +1,6 @@
 import { Feature, OsmId } from '../../../services/types';
-import { FetchError, getShortId } from '../../../services/helpers';
-import { osmToFeature } from '../../../services/osmToFeature';
-import { fetchJson } from '../../../services/fetch';
+import { getShortId } from '../../../services/helpers';
+import { quickFetchFeature } from '../../../services/osmApi';
 
 const isFarAway = (feature, skeleton) =>
   feature.center &&
@@ -25,24 +24,6 @@ const isMaptilerCorruptedId = (feature: Feature, skeleton: Feature) => {
   return false;
 };
 
-const getQuickOsmPromise = async (apiId: OsmId) => {
-  const getOsmUrl = ({ type, id }) =>
-    `https://api.openstreetmap.org/api/0.6/${type}/${id}.json`;
-  const { elements } = await fetchJson(getOsmUrl(apiId)); // TODO 504 gateway busy
-  return elements?.[0];
-};
-
-const quickFetchFeature = async (apiId: OsmId) => {
-  try {
-    const element = await getQuickOsmPromise(apiId);
-    return osmToFeature(element);
-  } catch (e) {
-    return {
-      error: e instanceof FetchError ? e.code : 'unknown',
-    } as unknown as Feature;
-  }
-};
-
 // Maptiler is not encoding IDs correctly, sometimes type encoding is missing, sometimes the type is just wrong
 // This function tries to fix the ID by fetching possible variants and comparing them by name and distance
 // more in: https://github.com/openmaptiles/openmaptiles/issues/1587