Update front-end to upload, show reference images

Send data using FormData rather than JSON to include files.
Read the files from the response and add them to the map.

src/app/src/api/boundaries.js

@@ -49,7 +49,12 @@ const boundaryApi = api.injectEndpoints({
                     );
                 }
 
-                formData.append('reference_images_meta', referenceImagesMeta);
+                if (referenceImagesMeta.length > 0) {
+                    formData.append(
+                        'reference_images_meta',
+                        referenceImagesMeta
+                    );
+                }
 
                 if (shape) {
                     formData.append('shape', shape, shape.name);

src/app/src/api/referenceImages.js

@@ -6,11 +6,24 @@ import api from './api';
 const referenceImagesApi = api.injectEndpoints({
     endpoints: build => ({
         uploadReferenceImage: build.mutation({
-            query: ({ boundaryId, ...details }) => ({
-                url: `/boundaries/${boundaryId}/reference-images/`,
-                method: 'POST',
-                data: details,
-            }),
+            query: ({ boundaryId, file, ...details }) => {
+                const data = new FormData();
+
+                data.append('file', file, file.name);
+
+                for (const [key, value] of Object.entries(details)) {
+                    data.append(key, value);
+                }
+
+                return {
+                    url: `/boundaries/${boundaryId}/reference-images/`,
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'multipart/form-data',
+                    },
+                    data,
+                };
+            },
             onQueryStarted: async (
                 { boundaryId },
                 { dispatch, queryFulfilled }
@@ -33,7 +46,7 @@ const referenceImagesApi = api.injectEndpoints({
             },
         }),
         updateReferenceImage: build.mutation({
-            query: ({ boundaryId, id, ...details }) => ({
+            query: ({ boundaryId, id, file, ...details }) => ({
                 url: `/boundaries/${boundaryId}/reference-images/${id}/`,
                 method: 'PUT',
                 data: details,

src/app/src/components/Layers/ReferenceImageLayer.js

@@ -42,9 +42,8 @@ export default function ReferenceImageLayer() {
     );
 
     const createLayer = useCallback(
-        ({ id, corners, mode }) => {
-            // TODO use reference image url here
-            const layer = new L.distortableImageOverlay('', {
+        ({ id, corners, mode, file }) => {
+            const layer = new L.distortableImageOverlay(file, {
                 actions: [
                     L.DragAction,
                     L.ScaleAction,
@@ -112,12 +111,15 @@ export default function ReferenceImageLayer() {
         const imageShouldBeAdded = id => !(id in referenceImageLayers.current);
         const imageShouldBeHidden = id => !(id in visibleImages);
 
-        for (const { id, distortion, mode } of Object.values(visibleImages)) {
+        for (const { id, distortion, mode, file } of Object.values(
+            visibleImages
+        )) {
             if (imageShouldBeAdded(id)) {
                 referenceImageLayers.current[id] = createLayer({
                     id,
                     corners: distortion,
                     mode,
+                    file,
                 });
 
                 map.addLayer(referenceImageLayers.current[id]);

src/app/src/components/ModalSections/FileUpload.js

@@ -137,7 +137,7 @@ function UploadBox({ addFiles }) {
                 <Text color='gray.400'>
                     <Bold>Shapefiles:</Bold> .SHP, .SHX and .DBF
                     <br />
-                    <Bold>Other map files:</Bold> JPEG, PNG
+                    <Bold>Reference Images:</Bold> JPEG, PNG
                 </Text>
             </Flex>
         </Box>

src/app/src/components/Sidebar.js

@@ -68,6 +68,7 @@ function ReferenceLayers() {
             is_visible: true,
             distortion: null,
             opacity: 100,
+            file,
         });
     };