Prevent creation of too long file name

Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/254215

Prevent users from being able to upload a long file name.
This can happen when the user pastes a file image.

Changelog: fixed

app/assets/javascripts/dropzone_input.js

@@ -4,6 +4,7 @@ import { escape } from 'lodash';
 import './behaviors/preview_markdown';
 import { spriteIcon } from '~/lib/utils/common_utils';
 import { getFilename } from '~/lib/utils/file_upload';
+import { truncate } from '~/lib/utils/text_utility';
 import { n__, __ } from '~/locale';
 import PasteMarkdownTable from './behaviors/markdown/paste_markdown_table';
 import axios from './lib/utils/axios_utils';
@@ -189,10 +190,13 @@ export default function dropzoneInput(form, config = { parallelUploads: 2 }) {
 
         if (image) {
           event.preventDefault();
+          const MAX_FILE_NAME_LENGTH = 246;
           const filename = getFilename(pasteEvent) || 'image.png';
-          const text = `{{${filename}}}`;
+          const truncateFilename = truncate(filename, MAX_FILE_NAME_LENGTH);
+          const text = `{{${truncateFilename}}}`;
           pasteText(text);
-          return uploadFile(image.getAsFile(), filename);
+
+          return uploadFile(image.getAsFile(), truncateFilename);
         }
       }
     }

spec/frontend/dropzone_input_spec.js

+import MockAdapter from 'axios-mock-adapter';
 import $ from 'jquery';
 import mock from 'xhr-mock';
 import waitForPromises from 'helpers/wait_for_promises';
 import { TEST_HOST } from 'spec/test_constants';
 import PasteMarkdownTable from '~/behaviors/markdown/paste_markdown_table';
 import dropzoneInput from '~/dropzone_input';
+import axios from '~/lib/utils/axios_utils';
+import httpStatusCodes from '~/lib/utils/http_status';
 
 const TEST_FILE = new File([], 'somefile.jpg');
 TEST_FILE.upload = {};
@@ -29,6 +32,16 @@ describe('dropzone_input', () => {
   });
 
   describe('handlePaste', () => {
+    const triggerPasteEvent = (clipboardData = {}) => {
+      const event = $.Event('paste');
+      const origEvent = new Event('paste');
+
+      origEvent.clipboardData = clipboardData;
+      event.originalEvent = origEvent;
+
+      $('.js-gfm-input').trigger(event);
+    };
+
     beforeEach(() => {
       loadFixtures('issues/new-issue.html');
 
@@ -38,24 +51,39 @@ describe('dropzone_input', () => {
     });
 
     it('pastes Markdown tables', () => {
-      const event = $.Event('paste');
-      const origEvent = new Event('paste');
+      jest.spyOn(PasteMarkdownTable.prototype, 'isTable');
+      jest.spyOn(PasteMarkdownTable.prototype, 'convertToTableMarkdown');
 
-      origEvent.clipboardData = {
+      triggerPasteEvent({
         types: ['text/plain', 'text/html'],
         getData: () => '<table><tr><td>Hello World</td></tr></table>',
         items: [],
-      };
-      event.originalEvent = origEvent;
-
-      jest.spyOn(PasteMarkdownTable.prototype, 'isTable');
-      jest.spyOn(PasteMarkdownTable.prototype, 'convertToTableMarkdown');
-
-      $('.js-gfm-input').trigger(event);
+      });
 
       expect(PasteMarkdownTable.prototype.isTable).toHaveBeenCalled();
       expect(PasteMarkdownTable.prototype.convertToTableMarkdown).toHaveBeenCalled();
     });
+
+    it('passes truncated long filename to post request', async () => {
+      const axiosMock = new MockAdapter(axios);
+      const longFileName = 'a'.repeat(300);
+
+      triggerPasteEvent({
+        types: ['text/plain', 'text/html', 'text/rtf', 'Files'],
+        getData: () => longFileName,
+        items: [
+          {
+            kind: 'file',
+            type: 'image/png',
+            getAsFile: () => new Blob(),
+          },
+        ],
+      });
+
+      axiosMock.onPost().reply(httpStatusCodes.OK, { link: { markdown: 'foo' } });
+      await waitForPromises();
+      expect(axiosMock.history.post[0].data.get('file').name).toHaveLength(246);
+    });
   });
 
   describe('shows error message', () => {