Resolve "Add user file upload docs to the generated API docs"

web-frontend/modules/database/components/docs/sections/APIDocsMenu.vue

@@ -125,6 +125,42 @@
           </li>
         </ul>
       </li>
+      <li>
+        <a
+          class="api-docs__nav-link"
+          @click.prevent="navigate('section-upload-file')"
+          >{{ $t('apiDocs.fileUploads') }}</a
+        >
+        <ul
+          class="api-docs__nav-sub"
+          :class="{
+            open:
+              navActive === 'section-upload-file' ||
+              navActive === 'section-upload-file-via-url',
+          }"
+        >
+          <li>
+            <a
+              class="api-docs__nav-link"
+              :class="{
+                active: navActive === 'section-upload-file',
+              }"
+              @click.prevent="navigate('section-upload-file')"
+              >{{ $t('apiDocs.uploadFile') }}</a
+            >
+          </li>
+          <li>
+            <a
+              class="api-docs__nav-link"
+              :class="{
+                active: navActive === 'section-upload-file-via-url',
+              }"
+              @click.prevent="navigate('section-upload-file-via-url')"
+              >{{ $t('apiDocs.uploadFileViaUrl') }}</a
+            >
+          </li>
+        </ul>
+      </li>
       <li>
         <a
           class="api-docs__nav-link"

web-frontend/modules/database/components/docs/sections/APIDocsUploadFile.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="api-docs__item">
+    <div class="api-docs__left">
+      <div class="api-docs__heading-wrapper">
+        <h3 :id="'section-upload-file'" class="api-docs__heading-3">
+          <span>
+            {{ $t('apiDocs.uploadFile') }}
+          </span>
+        </h3>
+        <div class="api-docs__endpoint-type"></div>
+      </div>
+
+      <MarkdownIt
+        tag="p"
+        class="api-docs__content"
+        :content="
+          $t('apiDocsUploadFile.description', {
+            PUBLIC_BACKEND_URL: `${$env.PUBLIC_BACKEND_URL}`,
+          })
+        "
+      />
+
+      <h4 class="api-docs__heading-4">{{ $t('apiDocs.requestBodySchema') }}</h4>
+      <ul class="api-docs__parameters">
+        <APIDocsParameter name="file" :optional="false" type="multipart">
+          <MarkdownIt
+            class="api-docs__content"
+            :content="$t('apiDocs.uploadFileDescription')"
+          />
+        </APIDocsParameter>
+      </ul>
+    </div>
+
+    <div class="api-docs__right">
+      <APIDocsExample
+        :value="value"
+        type="POST"
+        :url="getUploadFileListUrl()"
+        :file-request="getUploadFileExample()"
+        :response="getUploadFileResponse()"
+        :include-user-fields-checkbox="false"
+        @input="$emit('input', $event)"
+      ></APIDocsExample>
+    </div>
+  </div>
+</template>
+
+<script>
+import APIDocsExample from '@baserow/modules/database/components/docs/APIDocsExample'
+import APIDocsParameter from '@baserow/modules/database/components/docs/APIDocsParameter'
+
+export default {
+  name: 'APIDocsUploadFile',
+  components: {
+    APIDocsParameter,
+    APIDocsExample,
+  },
+  props: {
+    value: {
+      type: Object,
+      required: true,
+    },
+    getUploadFileListUrl: { type: Function, required: true },
+    getUploadFileExample: { type: Function, required: true },
+    getUploadFileResponse: { type: Function, required: true },
+  },
+}
+</script>

web-frontend/modules/database/components/docs/sections/APIDocsUploadFileViaURL.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="api-docs__item">
+    <div class="api-docs__left">
+      <div class="api-docs__heading-wrapper">
+        <h3 :id="'section-upload-file-via-url'" class="api-docs__heading-3">
+          <span>
+            {{ $t('apiDocs.uploadFileViaUrl') }}
+          </span>
+        </h3>
+        <div class="api-docs__endpoint-type"></div>
+      </div>
+
+      <MarkdownIt
+        tag="p"
+        class="api-docs__content"
+        :content="
+          $t('apiDocsUploadFileViaURL.description', {
+            PUBLIC_BACKEND_URL: `${$env.PUBLIC_BACKEND_URL}`,
+          })
+        "
+      />
+
+      <h4 class="api-docs__heading-4">{{ $t('apiDocs.requestBodySchema') }}</h4>
+      <ul class="api-docs__parameters">
+        <APIDocsParameter name="url" :optional="false" type="string">
+          <MarkdownIt
+            class="api-docs__content"
+            :content="$t('apiDocs.uploadFileViaUrlDescription')"
+          />
+        </APIDocsParameter>
+      </ul>
+    </div>
+
+    <div class="api-docs__right">
+      <APIDocsExample
+        :value="value"
+        type="POST"
+        :url="getUploadFileViaUrlListUrl()"
+        :response="getUploadFileResponse()"
+        :request="getUploadFileViaUrlRequestExample()"
+        :include-user-fields-checkbox="false"
+        @input="$emit('input', $event)"
+      ></APIDocsExample>
+    </div>
+  </div>
+</template>
+
+<script>
+import APIDocsExample from '@baserow/modules/database/components/docs/APIDocsExample'
+import APIDocsParameter from '@baserow/modules/database/components/docs/APIDocsParameter'
+
+export default {
+  name: 'APIDocsUploadFileViaURL',
+  components: {
+    APIDocsParameter,
+    APIDocsExample,
+  },
+  props: {
+    value: {
+      type: Object,
+      required: true,
+    },
+    getUploadFileViaUrlListUrl: { type: Function, required: true },
+    getUploadFileViaUrlRequestExample: { type: Function, required: true },
+    getUploadFileResponse: { type: Function, required: true },
+  },
+}
+</script>