diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue
index fca0812d32..24e0c234e9 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue
@@ -675,4 +675,8 @@
     margin-top: -4px !important;
   }
 
+  ::v-deep .v-dialog__content {
+    z-index: 5 !important;
+  }
+
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUpload.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUpload.vue
index b624eca24a..5631b97077 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUpload.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUpload.vue
@@ -2,7 +2,7 @@
 
   <div style="width: 100%;">
     <VCard
-      v-if="!primaryFileMapping.length"
+      v-if="!primaryFileCount"
       data-test="error"
       flat
     >
@@ -14,10 +14,32 @@
       </VCardText>
     </VCard>
     <VLayout v-else row wrap>
-      <VFlex sm12 md6 lg5 xl4>
+      <VFlex sm12 md12 lg12 xl12>
         <p>
           <ContentNodeIcon :kind="node.kind" includeText />
         </p>
+      </VFlex>
+      <VFlex sm12 md6 lg7 xl7 class="pr-4">
+        <h3>
+          {{ $tr('filesHeader') }}
+        </h3>
+        <VList threeLine>
+          <FileUploadItem
+            v-for="item in primaryFileMapping"
+            :key="item.preset.id"
+            :file="item.file"
+            :preset="item.preset"
+            :allowFileRemove="allowFileRemove"
+            :uploadCompleteHandler="handleUploadComplete"
+            @selected="selected = item.file.id"
+            @remove="showRemoveFileWarning = primaryFileCount > 1"
+          />
+        </VList>
+      </VFlex>
+      <VFlex sm12 md6 lg5 xl5>
+        <h3 v-if="selectedFilename" class="mb-3">
+          {{ selectedFilename }}
+        </h3>
         <div class="preview-wrapper">
           <VCard v-if="!primaryFileCount" flat class="mb-2 message-card">
             <VLayout align-center justify-center fill-height>
@@ -39,32 +61,19 @@
           />
         </div>
       </VFlex>
-      <VFlex sm12 md6 lg7 xl8>
-        <VContainer fluid>
-          <VLayout alignStart>
-            <VRadioGroup
-              v-model="selected"
-              hide-details
-              :label="$tr('filesHeader')"
-              class="subheading"
-            >
-              <VList threeLine>
-                <FileUploadItem
-                  v-for="item in primaryFileMapping"
-                  :key="item.preset.id"
-                  :file="item.file"
-                  :preset="item.preset"
-                  :allowFileRemove="allowFileRemove"
-                  :uploadCompleteHandler="handleUploadComplete"
-                  @selected="selected = item.file.id"
-                  @remove="handleRemoveFile"
-                />
-              </VList>
-            </VRadioGroup>
-          </VLayout>
-        </VContainer>
-      </VFlex>
     </VLayout>
+
+    <KModal
+      v-if="showRemoveFileWarning"
+      data-test="remove-file-warning"
+      :title="$tr('removeFile')"
+      :submitText="$tr('yesButton')"
+      :cancelText="$tr('cancelButton')"
+      @submit="handleRemoveFile"
+      @cancel="showRemoveFileWarning = false"
+    >
+      <p>{{ $tr("removeFileDescription", { fileTypes: allowedFileTypes }) }}</p>
+    </KModal>
   </div>
 
 </template>
@@ -94,6 +103,7 @@
     data() {
       return {
         selected: null,
+        showRemoveFileWarning: false,
       };
     },
     computed: {
@@ -118,22 +128,32 @@
         return this.fileCount > 1;
       },
       primaryFileCount() {
-        return this.files.filter(file => !file.preset.supplementary).length;
+        return this.primaryFileMapping.length;
       },
       primaryFileMapping() {
         return sortBy(
           this.presets
-            .filter(p => !p.supplementary)
             .map(preset => {
-              return {
-                preset,
-                order: preset.order,
-                file: this.files.find(file => file.preset.id === preset.id),
-              };
-            }),
+              const file = this.files.find(file => file.preset.id === preset.id);
+              if (!preset.supplementary && file) {
+                return { preset, order: preset.order, file };
+              }
+              return null;
+            })
+            .filter(item => item !== null),
           'order'
         );
       },
+      selectedFilename() {
+        const file = this.files.find(f => f.id === this.selected);
+        return file ? file.original_filename : '';
+      },
+      allowedFileTypes() {
+        return this.presets
+          .filter(p => !p.supplementary && Array.isArray(p.allowed_formats))
+          .map(p => p.allowed_formats.join(', '))
+          .join(', ');
+      },
     },
     watch: {
       'files.length'(newCount, oldCount) {
@@ -163,17 +183,25 @@
           eventLabel: 'Related file',
         });
       },
-      handleRemoveFile(file) {
-        this.deleteFile(file);
-        if (file.id === this.selected) {
-          this.selectFirstFile();
+      handleRemoveFile() {
+        const selectedFile = this.files.find(f => f.id === this.selected);
+        if (selectedFile) {
+          this.deleteFile(selectedFile).then(() => {
+            this.selectFirstFile();
+          });
         }
+        this.showRemoveFileWarning = false;
       },
     },
     $trs: {
-      filesHeader: 'Preview files',
+      filesHeader: 'Files',
       fileError: 'Unsupported file type',
       noFileText: 'Missing files',
+      removeFile: 'Remove file',
+      removeFileDescription:
+        'Once this file is removed, this resource will only be able to include a single file from the formats: { fileTypes }. Are you sure you want to continue?',
+      yesButton: 'Yes',
+      cancelButton: 'Cancel',
     },
   };
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUploadItem.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUploadItem.vue
index 7a77710e54..917e70fc0e 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUploadItem.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUploadItem.vue
@@ -11,27 +11,19 @@
         <VListTile
           data-test="list-item"
           v-bind="$attrs"
+          tabindex="0"
           @click.stop="file ? $emit('selected') : openFileDialog()"
         >
-          <VListTileAction>
-            <VRadio
-              v-if="file"
-              :key="file.id"
-              :value="file.id"
-              color="primary"
-              data-test="radio"
-            />
-          </VListTileAction>
           <VListTileContent>
             <VListTileSubTitle>{{ translateConstant(preset.id) }}</VListTileSubTitle>
-            <VListTileTitle>
-              <ActionLink
+            <VListTileTitle class="file-display">
+              <span
                 v-if="fileDisplay"
                 class="notranslate"
-                :text="formattedFileDisplay"
-                data-test="file-link"
-                @click="openFileDialog"
-              />
+                data-test="file-name"
+              >
+                {{ formattedFileDisplay }}
+              </span>
               <ActionLink
                 v-else
                 data-test="upload-link"
@@ -53,15 +45,20 @@
           </VListTileContent>
           <VSpacer />
           <VListTileAction v-if="fileDisplay">
-            <div v-if="allowFileRemove" class="remove-icon">
-              <IconButton
-                icon="clear"
-                color="grey"
-                :text="$tr('removeFileButton')"
-                data-test="remove"
-                @click="$emit('remove', file)"
-              />
-            </div>
+            <KIconButton
+              size="small"
+              icon="optionsHorizontal"
+              appearance="flat-button"
+              data-test="show-file-options"
+            >
+              <template #menu>
+                <KDropdownMenu
+                  :options="previewFilesOptions"
+                  data-test="file-options"
+                  @select="(option) => option.onClick(openFileDialog)"
+                />
+              </template>
+            </KIconButton>
           </VListTileAction>
         </VListTile>
       </FileDropzone>
@@ -72,10 +69,9 @@
 
 <script>
 
-  import { mapGetters } from 'vuex';
+  import { mapActions, mapGetters } from 'vuex';
   import FileStatusText from 'shared/views/files/FileStatusText';
   import Uploader from 'shared/views/files/Uploader';
-  import IconButton from 'shared/views/IconButton';
   import { constantsTranslationMixin, fileSizeMixin, fileStatusMixin } from 'shared/mixins';
   import FileDropzone from 'shared/views/files/FileDropzone';
 
@@ -85,7 +81,6 @@
       Uploader,
       FileDropzone,
       FileStatusText,
-      IconButton,
     },
     mixins: [constantsTranslationMixin, fileSizeMixin, fileStatusMixin],
     props: {
@@ -150,6 +145,36 @@
         }
         return null;
       },
+      previewFilesOptions() {
+        const options = [
+          {
+            label: this.$tr('replaceFileMenuOptionLabel'),
+            value: 'REPLACE_FILE',
+            onClick: replaceFile => {
+              replaceFile();
+            },
+            condition: this.fileDisplay,
+          },
+          {
+            label: this.$tr('downloadMenuOptionLabel'),
+            value: 'DOWNLOAD_FILE',
+            onClick: () => {
+              this.initiateFileDownload();
+            },
+            condition: this.fileDisplay,
+          },
+          {
+            label: this.$tr('removeMenuOptionLabel'),
+            value: 'REMOVE_FILE',
+            onClick: () => {
+              this.removeFile();
+            },
+            condition: this.fileDisplay && this.allowFileRemove,
+          },
+        ];
+
+        return options.filter(option => option.condition);
+      },
     },
     watch: {
       'file.id': {
@@ -159,6 +184,8 @@
       },
     },
     methods: {
+      ...mapActions('file', ['downloadFile']),
+      ...mapActions(['showSnackbar']),
       completeUpload(fileUpload) {
         if (fileUpload.id === this.fileUploadId) {
           this.uploadCompleteHandler(fileUpload);
@@ -167,11 +194,30 @@
       uploadingHandler(fileUpload) {
         this.fileUploadId = fileUpload.id;
       },
+      initiateFileDownload() {
+        try {
+          this.downloadFile({
+            url: this.fileDisplay.url,
+            fileName: this.formattedFileDisplay,
+          });
+        } catch (e) {
+          this.showSnackbar({
+            text: this.$tr('downloadFailed'),
+          });
+        }
+      },
+      removeFile() {
+        this.$emit('remove', this.file);
+      },
     },
     $trs: {
       uploadButton: 'Select file',
-      removeFileButton: 'Remove',
+      replaceFileMenuOptionLabel: 'Replace file',
+      downloadMenuOptionLabel: 'Download',
+      removeMenuOptionLabel: 'Remove',
+      downloadFailed: 'Failed to download file',
       /* eslint-disable kolibri/vue-no-unused-translations */
+      removeFileButton: 'Remove',
       retryUpload: 'Retry upload',
       uploadFailed: 'Upload failed',
       unknownFile: 'Unknown filename',
@@ -183,36 +229,32 @@
 
 <style lang="scss" scoped>
 
-  .layout .section-header {
-    padding: 0 15px;
-    font-weight: bold;
-    color: var(--v-darken-3);
-  }
-
-  button {
-    margin: 0;
-  }
-
   ::v-deep .v-list__tile {
     height: max-content !important;
     min-height: 64px;
     padding: 5px 16px;
 
-    .remove-icon {
-      display: none;
-    }
-
-    &:hover .remove-icon {
-      display: block;
+    &:focus {
+      background-color: var(--v-grey-lighten5);
+      outline-color: var(--v-primary-base);
     }
 
     .v-list__tile__title {
-      height: max-content;
+      height: 30px;
     }
 
     .v-list__tile__sub-title {
+      margin-left: 1px;
       white-space: unset;
     }
   }
 
+  .file-display {
+    margin-left: 1px;
+
+    span {
+      font-size: 15px;
+    }
+  }
+
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/__tests__/fileUpload.spec.js b/contentcuration/contentcuration/frontend/channelEdit/views/files/__tests__/fileUpload.spec.js
index 6eb2bd69b7..b2ba503bd3 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/__tests__/fileUpload.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/__tests__/fileUpload.spec.js
@@ -71,9 +71,9 @@ describe('fileUpload', () => {
   });
   describe('computed', () => {
     it('should map the files to the correct presets', () => {
-      expect(wrapper.vm.primaryFileMapping[1].file.id).toBe('file-3');
-      expect(wrapper.vm.primaryFileMapping[2].file.id).toBe('file-1');
-      expect(wrapper.vm.primaryFileMapping).toHaveLength(3);
+      expect(wrapper.vm.primaryFileMapping[0].file.id).toBe('file-3');
+      expect(wrapper.vm.primaryFileMapping[1].file.id).toBe('file-1');
+      expect(wrapper.vm.primaryFileMapping).toHaveLength(2);
     });
     it('should disallow file removal if there is only one primary file', () => {
       const testFiles2 = [
@@ -95,22 +95,31 @@ describe('fileUpload', () => {
   describe('methods', () => {
     let uploadItem;
     beforeEach(() => {
-      uploadItem = wrapper.findAll(FileUploadItem).at(2);
+      uploadItem = wrapper.findAll(FileUploadItem).at(0);
     });
     it('should automatically select the first file on load', () => {
       expect(wrapper.vm.selected).toBe('file-3');
     });
     it('selectPreview should select the preview when items are selected in the list', () => {
       uploadItem.vm.$emit('selected');
-      expect(wrapper.vm.selected).toBe('file-1');
+      expect(wrapper.vm.selected).toBe('file-3');
     });
-    it('emitted remove event should trigger delete file', () => {
+    it('emitted remove event should trigger removal dialog', () => {
       const deleteFile = jest.fn();
-      wrapper.setData({ selected: 'file-1' });
+      wrapper.setData({
+        selected: 'file-1',
+        showRemoveFileWarning: false,
+      });
       wrapper.setMethods({ deleteFile });
       uploadItem.vm.$emit('remove', testFiles[0]);
-      expect(deleteFile).toHaveBeenCalled();
-      expect(deleteFile.mock.calls[0][0]).toBe(testFiles[0]);
+
+      expect(wrapper.vm.showRemoveFileWarning).toBe(true);
+
+      const modal = wrapper.find('[data-test="remove-file-warning"]');
+      expect(modal.exists()).toBe(true);
+      expect(modal.isVisible()).toBe(true);
+
+      expect(deleteFile).not.toHaveBeenCalled();
     });
     it('calling uploadCompleteHandler should trigger update file', () => {
       const updateFile = jest.fn(() => Promise.resolve());
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/__tests__/fileUploadItem.spec.js b/contentcuration/contentcuration/frontend/channelEdit/views/files/__tests__/fileUploadItem.spec.js
index ee0e8d7105..411faf31ce 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/__tests__/fileUploadItem.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/__tests__/fileUploadItem.spec.js
@@ -4,7 +4,7 @@ import { factory } from '../../../store';
 import Uploader from 'shared/views/files/Uploader';
 
 const testFile = { id: 'test' };
-function makeWrapper(props = {}, file = {}) {
+function makeWrapper(props = {}, file = {}, computed = {}) {
   const store = factory();
   return mount(FileUploadItem, {
     store,
@@ -24,6 +24,7 @@ function makeWrapper(props = {}, file = {}) {
       },
       ...props,
     },
+    computed,
   });
 }
 
@@ -34,14 +35,14 @@ describe('fileUploadItem', () => {
         original_filename: 'file',
       };
       const wrapper = makeWrapper({}, file);
-      expect(wrapper.find('[data-test="file-link"]').text()).toBe('Unknown filename');
+      expect(wrapper.find('[data-test="file-name"]').text()).toBe('Unknown filename');
     });
     it("'Unknown filename' should be displayed if original_filename is ''", () => {
       const file = {
         original_filename: '',
       };
       const wrapper = makeWrapper({}, file);
-      expect(wrapper.find('[data-test="file-link"]').text()).toBe('Unknown filename');
+      expect(wrapper.find('[data-test="file-name"]').text()).toBe('Unknown filename');
     });
     it("original_filename should be displayed if its value is not 'file'", () => {
       const file = {
@@ -49,7 +50,7 @@ describe('fileUploadItem', () => {
         original_filename: 'SomeFileName',
       };
       const wrapper = makeWrapper({}, file);
-      expect(wrapper.find('[data-test="file-link"]').text()).toBe('SomeFileName');
+      expect(wrapper.find('[data-test="file-name"]').text()).toBe('SomeFileName');
     });
     it('should show a status error if the file has an error', () => {
       const wrapper = makeWrapper({}, { error: true });
@@ -60,17 +61,13 @@ describe('fileUploadItem', () => {
       expect(wrapper.find('[data-test="upload-link"]').exists()).toBe(true);
       expect(wrapper.find('[data-test="radio"]').exists()).toBe(false);
     });
-  });
-
-  describe('props', () => {
-    it('should show the remove icon only if allowFileRemove', () => {
-      const noRemoveWrapper = makeWrapper();
-      expect(noRemoveWrapper.find('[data-test="remove"]').exists()).toBe(false);
-
-      const allowRemoveWrapper = makeWrapper({ allowFileRemove: true });
-      expect(allowRemoveWrapper.find('[data-test="remove"]').exists()).toBe(true);
+    it('should show dropdown on click preview file options', () => {
+      const wrapper = makeWrapper({ allowFileRemove: true });
+      wrapper.find('[data-test="show-file-options"]').trigger('click');
+      expect(wrapper.find('[data-test="file-options"]').isVisible()).toBe(true);
     });
   });
+
   describe('methods', () => {
     let wrapper;
     beforeEach(() => {
@@ -104,10 +101,5 @@ describe('fileUploadItem', () => {
       wrapper.find('[data-test="list-item"]').trigger('click');
       expect(wrapper.emitted('selected')).toBeUndefined();
     });
-    it('clicking remove icon should emit a remove event', () => {
-      wrapper.setProps({ allowFileRemove: true });
-      wrapper.find('[data-test="remove"]').vm.$emit('click');
-      expect(wrapper.emitted('remove')[0][0].id).toBe('test');
-    });
   });
 });
diff --git a/contentcuration/contentcuration/frontend/shared/leUtils/FormatPresets.js b/contentcuration/contentcuration/frontend/shared/leUtils/FormatPresets.js
index a5897d1902..2d0dbd805e 100644
--- a/contentcuration/contentcuration/frontend/shared/leUtils/FormatPresets.js
+++ b/contentcuration/contentcuration/frontend/shared/leUtils/FormatPresets.js
@@ -45,7 +45,7 @@ const FormatPresetsMap = new Map([
       order: 2,
       kind_id: 'audio',
       allowed_formats: ['png', 'jpg', 'jpeg'],
-      associated_mimetypes: ['image/png', 'image/jpeg'],
+      associated_mimetypes: ['image/jpeg', 'image/png'],
     },
   ],
   [
@@ -58,7 +58,7 @@ const FormatPresetsMap = new Map([
       thumbnail: false,
       subtitle: false,
       display: true,
-      order: 1,
+      order: 3,
       kind_id: 'document',
       allowed_formats: ['bloompub', 'bloomd'],
       associated_mimetypes: ['application/bloompub+zip'],
@@ -77,7 +77,7 @@ const FormatPresetsMap = new Map([
       order: 0,
       kind_id: null,
       allowed_formats: ['png', 'jpg', 'jpeg'],
-      associated_mimetypes: ['image/png', 'image/jpeg'],
+      associated_mimetypes: ['image/jpeg', 'image/png'],
     },
   ],
   [
@@ -106,10 +106,10 @@ const FormatPresetsMap = new Map([
       thumbnail: true,
       subtitle: false,
       display: true,
-      order: 3,
+      order: 4,
       kind_id: 'document',
       allowed_formats: ['png', 'jpg', 'jpeg'],
-      associated_mimetypes: ['image/png', 'image/jpeg'],
+      associated_mimetypes: ['image/jpeg', 'image/png'],
     },
   ],
   [
@@ -157,7 +157,7 @@ const FormatPresetsMap = new Map([
       order: 4,
       kind_id: 'exercise',
       allowed_formats: ['svg', 'json', 'graphie'],
-      associated_mimetypes: ['application/json', 'image/svg', '.graphie'],
+      associated_mimetypes: ['image/svg', '.graphie', 'application/json'],
     },
   ],
   [
@@ -173,7 +173,7 @@ const FormatPresetsMap = new Map([
       order: 3,
       kind_id: 'exercise',
       allowed_formats: ['png', 'jpg', 'jpeg', 'gif', 'svg'],
-      associated_mimetypes: ['image/png', 'image/jpeg', 'image/svg', 'image/gif'],
+      associated_mimetypes: ['image/jpeg', 'image/svg', 'image/gif', 'image/png'],
     },
   ],
   [
@@ -189,7 +189,7 @@ const FormatPresetsMap = new Map([
       order: 2,
       kind_id: 'exercise',
       allowed_formats: ['png', 'jpg', 'jpeg'],
-      associated_mimetypes: ['image/png', 'image/jpeg'],
+      associated_mimetypes: ['image/jpeg', 'image/png'],
     },
   ],
   [
@@ -221,7 +221,7 @@ const FormatPresetsMap = new Map([
       order: 2,
       kind_id: 'h5p',
       allowed_formats: ['png', 'jpg', 'jpeg'],
-      associated_mimetypes: ['image/png', 'image/jpeg'],
+      associated_mimetypes: ['image/jpeg', 'image/png'],
     },
   ],
   [
@@ -237,7 +237,7 @@ const FormatPresetsMap = new Map([
       order: 1,
       kind_id: 'video',
       allowed_formats: ['mp4', 'webm'],
-      associated_mimetypes: ['video/webm', 'video/mp4'],
+      associated_mimetypes: ['video/mp4', 'video/webm'],
     },
   ],
   [
@@ -269,7 +269,7 @@ const FormatPresetsMap = new Map([
       order: 2,
       kind_id: 'html5',
       allowed_formats: ['png', 'jpg', 'jpeg'],
-      associated_mimetypes: ['image/png', 'image/jpeg'],
+      associated_mimetypes: ['image/jpeg', 'image/png'],
     },
   ],
   [
@@ -317,7 +317,7 @@ const FormatPresetsMap = new Map([
       order: 2,
       kind_id: 'video',
       allowed_formats: ['mp4', 'webm'],
-      associated_mimetypes: ['video/webm', 'video/mp4'],
+      associated_mimetypes: ['video/mp4', 'video/webm'],
     },
   ],
   [
@@ -349,7 +349,7 @@ const FormatPresetsMap = new Map([
       order: 2,
       kind_id: 'exercise',
       allowed_formats: ['png', 'jpg', 'jpeg'],
-      associated_mimetypes: ['image/png', 'image/jpeg'],
+      associated_mimetypes: ['image/jpeg', 'image/png'],
     },
   ],
   [
@@ -365,7 +365,7 @@ const FormatPresetsMap = new Map([
       order: 3,
       kind_id: 'slideshow',
       allowed_formats: ['png', 'jpg', 'jpeg'],
-      associated_mimetypes: ['image/png', 'image/jpeg'],
+      associated_mimetypes: ['image/jpeg', 'image/png'],
     },
   ],
   [
@@ -397,7 +397,7 @@ const FormatPresetsMap = new Map([
       order: 2,
       kind_id: 'slideshow',
       allowed_formats: ['png', 'jpg', 'jpeg'],
-      associated_mimetypes: ['image/png', 'image/jpeg'],
+      associated_mimetypes: ['image/jpeg', 'image/png'],
     },
   ],
   [
@@ -413,7 +413,7 @@ const FormatPresetsMap = new Map([
       order: 1,
       kind_id: 'topic',
       allowed_formats: ['png', 'jpg', 'jpeg'],
-      associated_mimetypes: ['image/png', 'image/jpeg'],
+      associated_mimetypes: ['image/jpeg', 'image/png'],
     },
   ],
   [
@@ -429,7 +429,7 @@ const FormatPresetsMap = new Map([
       order: 3,
       kind_id: 'video',
       allowed_formats: ['mp4', 'webm'],
-      associated_mimetypes: ['video/webm', 'video/mp4'],
+      associated_mimetypes: ['video/mp4', 'video/webm'],
     },
   ],
   [
@@ -461,7 +461,7 @@ const FormatPresetsMap = new Map([
       order: 3,
       kind_id: 'video',
       allowed_formats: ['png', 'jpg', 'jpeg'],
-      associated_mimetypes: ['image/png', 'image/jpeg'],
+      associated_mimetypes: ['image/jpeg', 'image/png'],
     },
   ],
   [
@@ -493,7 +493,7 @@ const FormatPresetsMap = new Map([
       order: 2,
       kind_id: 'zim',
       allowed_formats: ['png', 'jpg', 'jpeg'],
-      associated_mimetypes: ['image/png', 'image/jpeg'],
+      associated_mimetypes: ['image/jpeg', 'image/png'],
     },
   ],
 ]);
diff --git a/contentcuration/contentcuration/frontend/shared/views/ActionLink.vue b/contentcuration/contentcuration/frontend/shared/views/ActionLink.vue
index 0077f2dc97..c13759fa8c 100644
--- a/contentcuration/contentcuration/frontend/shared/views/ActionLink.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/ActionLink.vue
@@ -67,7 +67,7 @@
     height: unset;
     min-height: min-content;
     padding: 0;
-    margin: 0;
+    margin: 0 0 0 1px;
     font-weight: normal;
     text-transform: none;
   }
diff --git a/contentcuration/contentcuration/frontend/shared/vuex/file/actions.js b/contentcuration/contentcuration/frontend/shared/vuex/file/actions.js
index a4fccb2635..0fc474c345 100644
--- a/contentcuration/contentcuration/frontend/shared/vuex/file/actions.js
+++ b/contentcuration/contentcuration/frontend/shared/vuex/file/actions.js
@@ -281,3 +281,13 @@ export function getAudioData(context, url) {
       .catch(reject);
   });
 }
+
+export function downloadFile(context, { url, fileName }) {
+  const anchor = document.createElement('a');
+  anchor.download = fileName;
+  anchor.href = url;
+  anchor.style.display = 'none';
+  document.body.appendChild(anchor);
+  anchor.click();
+  anchor.remove();
+}