Merge branch '38869-dropzone-input' into 'master'

Remove dropzoneInput from global namespace

Closes #20930

See merge request gitlab-org/gitlab-ce!14894

app/assets/javascripts/blob/blob_file_dropzone.js

 /* eslint-disable func-names, object-shorthand, prefer-arrow-callback */
-/* global Dropzone */
-
+import Dropzone from 'dropzone';
 import '../lib/utils/url_utility';
 import { HIDDEN_CLASS } from '../lib/utils/constants';
 import csrf from '../lib/utils/csrf';

app/assets/javascripts/dropzone_input.js

-/* eslint-disable func-names, space-before-function-paren, wrap-iife, max-len, one-var, no-var, one-var-declaration-per-line, no-unused-vars, camelcase, quotes, no-useless-concat, prefer-template, quote-props, comma-dangle, object-shorthand, consistent-return, prefer-arrow-callback */
-/* global Dropzone */
+import Dropzone from 'dropzone';
 import _ from 'underscore';
 import './preview_markdown';
 import csrf from './lib/utils/csrf';
 
-window.DropzoneInput = (function() {
-  function DropzoneInput(form) {
+export default function dropzoneInput(form) {
   const divHover = '<div class="div-dropzone-hover"></div>';
   const iconPaperclip = '<i class="fa fa-paperclip div-dropzone-icon"></i>';
   const $attachButton = form.find('.button-attach-file');
@@ -28,11 +26,7 @@ window.DropzoneInput = (function() {
   let uploadFile;
 
   formTextarea.wrap('<div class="div-dropzone"></div>');
-    formTextarea.on('paste', (function(_this) {
-      return function(event) {
-        return handlePaste(event);
-      };
-    })(this));
+  formTextarea.on('paste', event => handlePaste(event));
 
   // Add dropzone area to the form.
   const $mdArea = formTextarea.closest('.md-area');
@@ -53,23 +47,21 @@ window.DropzoneInput = (function() {
     uploadMultiple: false,
     headers: csrf.headers,
     previewContainer: false,
-      processing: function() {
-        return $('.div-dropzone-alert').alert('close');
-      },
-      dragover: function() {
+    processing: () => $('.div-dropzone-alert').alert('close'),
+    dragover: () => {
       $mdArea.addClass('is-dropzone-hover');
       form.find('.div-dropzone-hover').css('opacity', 0.7);
     },
-      dragleave: function() {
+    dragleave: () => {
       $mdArea.removeClass('is-dropzone-hover');
       form.find('.div-dropzone-hover').css('opacity', 0);
     },
-      drop: function() {
+    drop: () => {
       $mdArea.removeClass('is-dropzone-hover');
       form.find('.div-dropzone-hover').css('opacity', 0);
       formTextarea.focus();
     },
-      success: function(header, response) {
+    success(header, response) {
       const processingFileCount = this.getQueuedFiles().length + this.getUploadingFiles().length;
       const shouldPad = processingFileCount >= 1;
 
@@ -78,7 +70,7 @@ window.DropzoneInput = (function() {
       if (!processingFileCount) $attachButton.removeClass('hide');
       addFileToForm(response.link.url);
     },
-      error: function(file, errorMessage = 'Attaching the file failed.', xhr) {
+    error: (file, errorMessage = 'Attaching the file failed.', xhr) => {
       // If 'error' event is fired by dropzone, the second parameter is error message.
       // If the 'errorMessage' parameter is empty, the default error message is set.
       // If the 'error' event is fired by backend (xhr) error response, the third parameter is
@@ -94,11 +86,11 @@ window.DropzoneInput = (function() {
       $attachButton.addClass('hide');
       $cancelButton.addClass('hide');
     },
-      totaluploadprogress: function(totalUploadProgress) {
+    totaluploadprogress(totalUploadProgress) {
       updateAttachingMessage(this.files, $attachingFileMessage);
-        $uploadProgress.text(Math.round(totalUploadProgress) + '%');
+      $uploadProgress.text(`${Math.round(totalUploadProgress)}%`);
     },
-      sending: function(file) {
+    sending: () => {
       // DOM elements already exist.
       // Instead of dynamically generating them,
       // we just either hide or show them.
@@ -107,19 +99,19 @@ window.DropzoneInput = (function() {
       $uploadingProgressContainer.removeClass('hide');
       $cancelButton.removeClass('hide');
     },
-      removedfile: function() {
+    removedfile: () => {
       $attachButton.removeClass('hide');
       $cancelButton.addClass('hide');
       $uploadingProgressContainer.addClass('hide');
       $uploadingErrorContainer.addClass('hide');
     },
-      queuecomplete: function() {
+    queuecomplete: () => {
       $('.dz-preview').remove();
       $('.markdown-area').trigger('input');
 
       $uploadingProgressContainer.addClass('hide');
       $cancelButton.addClass('hide');
-      }
+    },
   });
 
   const child = $(dropzone[0]).children('textarea');
@@ -144,10 +136,11 @@ window.DropzoneInput = (function() {
 
     e.preventDefault();
 
-      // 'true' parameter of removeAllFiles() cancels uploading of files that are being uploaded at the moment.
+    // 'true' parameter of removeAllFiles() cancels
+    // uploading of files that are being uploaded at the moment.
     dropzoneInstance.removeAllFiles(true);
 
-      failedFiles.map((failedFile, i) => {
+    failedFiles.map((failedFile) => {
       const file = failedFile;
 
       if (file.status === Dropzone.ERROR) {
@@ -158,27 +151,25 @@ window.DropzoneInput = (function() {
       return dropzoneInstance.addFile(file);
     });
   });
-
-    handlePaste = function(event) {
-      var filename, image, pasteEvent, text;
-      pasteEvent = event.originalEvent;
+  // eslint-disable-next-line consistent-return
+  handlePaste = (event) => {
+    const pasteEvent = event.originalEvent;
     if (pasteEvent.clipboardData && pasteEvent.clipboardData.items) {
-        image = isImage(pasteEvent);
+      const image = isImage(pasteEvent);
       if (image) {
         event.preventDefault();
-          filename = getFilename(pasteEvent) || 'image.png';
-          text = `{{${filename}}}`;
+        const filename = getFilename(pasteEvent) || 'image.png';
+        const text = `{{${filename}}}`;
         pasteText(text);
         return uploadFile(image.getAsFile(), filename);
       }
     }
   };
 
-    isImage = function(data) {
-      var i, item;
-      i = 0;
+  isImage = (data) => {
+    let i = 0;
     while (i < data.clipboardData.items.length) {
-        item = data.clipboardData.items[i];
+      const item = data.clipboardData.items[i];
       if (item.type.indexOf('image') !== -1) {
         return item;
       }
@@ -187,16 +178,17 @@ window.DropzoneInput = (function() {
     return false;
   };
 
-    pasteText = function(text, shouldPad) {
-      var afterSelection, beforeSelection, caretEnd, caretStart, textEnd;
-      var formattedText = text;
-      if (shouldPad) formattedText += "\n\n";
+  pasteText = (text, shouldPad) => {
+    let formattedText = text;
+    if (shouldPad) {
+      formattedText += '\n\n';
+    }
     const textarea = child.get(0);
-      caretStart = textarea.selectionStart;
-      caretEnd = textarea.selectionEnd;
-      textEnd = $(child).val().length;
-      beforeSelection = $(child).val().substring(0, caretStart);
-      afterSelection = $(child).val().substring(caretEnd, textEnd);
+    const caretStart = textarea.selectionStart;
+    const caretEnd = textarea.selectionEnd;
+    const textEnd = $(child).val().length;
+    const beforeSelection = $(child).val().substring(0, caretStart);
+    const afterSelection = $(child).val().substring(caretEnd, textEnd);
     $(child).val(beforeSelection + formattedText + afterSelection);
     textarea.setSelectionRange(caretStart + formattedText.length, caretEnd + formattedText.length);
     textarea.style.height = `${textarea.scrollHeight}px`;
@@ -204,56 +196,41 @@ window.DropzoneInput = (function() {
     return formTextarea.trigger('input');
   };
 
-    addFileToForm = function(path) {
-      $(form).append('<input type="hidden" name="files[]" value="' + _.escape(path) + '">');
+  addFileToForm = (path) => {
+    $(form).append(`<input type="hidden" name="files[]" value="${_.escape(path)}">`);
   };
 
-    getFilename = function(e) {
-      var value;
+  getFilename = (e) => {
+    let value;
     if (window.clipboardData && window.clipboardData.getData) {
       value = window.clipboardData.getData('Text');
     } else if (e.clipboardData && e.clipboardData.getData) {
       value = e.clipboardData.getData('text/plain');
     }
-      value = value.split("\r");
+    value = value.split('\r');
     return value[0];
   };
 
-    const showSpinner = function(e) {
-      return $uploadingProgressContainer.removeClass('hide');
-    };
+  const showSpinner = () => $uploadingProgressContainer.removeClass('hide');
 
-    const closeSpinner = function() {
-      return $uploadingProgressContainer.addClass('hide');
-    };
+  const closeSpinner = () => $uploadingProgressContainer.addClass('hide');
 
-    const showError = function(message) {
+  const showError = (message) => {
     $uploadingErrorContainer.removeClass('hide');
     $uploadingErrorMessage.html(message);
   };
 
-    const closeAlertMessage = function() {
-      return form.find('.div-dropzone-alert').alert('close');
-    };
+  const closeAlertMessage = () => form.find('.div-dropzone-alert').alert('close');
 
-    const insertToTextArea = function(filename, url) {
+  const insertToTextArea = (filename, url) => {
     const $child = $(child);
-      $child.val(function(index, val) {
-        return val.replace(`{{${filename}}}`, url);
-      });
+    $child.val((index, val) => val.replace(`{{${filename}}}`, url));
 
     $child.trigger('change');
   };
 
-    const appendToTextArea = function(url) {
-      return $(child).val(function(index, val) {
-        return val + url + "\n";
-      });
-    };
-
-    uploadFile = function(item, filename) {
-      var formData;
-      formData = new FormData();
+  uploadFile = (item, filename) => {
+    const formData = new FormData();
     formData.append('file', item, filename);
     return $.ajax({
       url: uploadsPath,
@@ -263,33 +240,27 @@ window.DropzoneInput = (function() {
       processData: false,
       contentType: false,
       headers: csrf.headers,
-        beforeSend: function() {
+      beforeSend: () => {
         showSpinner();
         return closeAlertMessage();
       },
-        success: function(e, textStatus, response) {
-          return insertToTextArea(filename, response.responseJSON.link.markdown);
+      success: (e, text, response) => {
+        const md = response.responseJSON.link.markdown;
+        insertToTextArea(filename, md);
       },
-        error: function(response) {
-          return showError(response.responseJSON.message);
-        },
-        complete: function() {
-          return closeSpinner();
-        }
+      error: response => showError(response.responseJSON.message),
+      complete: () => closeSpinner(),
     });
   };
 
   updateAttachingMessage = (files, messageContainer) => {
     let attachingMessage;
-      const filesCount = files.filter(function(file) {
-        return file.status === 'uploading' ||
-               file.status === 'queued';
-      }).length;
+    const filesCount = files.filter(file => file.status === 'uploading' || file.status === 'queued').length;
 
     // Dinamycally change uploading files text depending on files number in
     // dropzone files queue.
     if (filesCount > 1) {
-        attachingMessage = 'Attaching ' + filesCount + ' files -';
+      attachingMessage = `Attaching ${filesCount} files -`;
     } else {
       attachingMessage = 'Attaching a file -';
     }
@@ -297,12 +268,9 @@ window.DropzoneInput = (function() {
     messageContainer.text(attachingMessage);
   };
 
-    form.find('.markdown-selector').click(function(e) {
+  form.find('.markdown-selector').click(function onMarkdownClick(e) {
     e.preventDefault();
     $(this).closest('.gfm-form').find('.div-dropzone').click();
     formTextarea.focus();
   });
-  }
-
-  return DropzoneInput;
-})();
+}

app/assets/javascripts/gl_form.js

-/* global DropzoneInput */
 /* global autosize */
 
 import GfmAutoComplete from './gfm_auto_complete';
+import dropzoneInput from './dropzone_input';
 
 export default class GLForm {
   constructor(form, enableGFM = false) {
@@ -41,7 +41,7 @@ export default class GLForm {
         mergeRequests: this.enableGFM,
         labels: this.enableGFM,
       });
-      new DropzoneInput(this.form); // eslint-disable-line no-new
+      dropzoneInput(this.form);
       autosize(this.textarea);
     }
     // form and textarea event listeners

app/assets/javascripts/notes.js

@@ -13,7 +13,6 @@ import $ from 'jquery';
 import _ from 'underscore';
 import Cookies from 'js-cookie';
 import autosize from 'vendor/autosize';
-import Dropzone from 'dropzone';
 import 'vendor/jquery.caret'; // required by jquery.atwho
 import 'vendor/jquery.atwho';
 import AjaxCache from '~/lib/utils/ajax_cache';
@@ -22,13 +21,11 @@ import CommentTypeToggle from './comment_type_toggle';
 import GLForm from './gl_form';
 import loadAwardsHandler from './awards_handler';
 import './autosave';
-import './dropzone_input';
 import TaskList from './task_list';
 import { ajaxPost, isInViewport, getPagePath, scrollToElement, isMetaKey } from './lib/utils/common_utils';
 import imageDiffHelper from './image_diff/helpers/index';
 
 window.autosize = autosize;
-window.Dropzone = Dropzone;
 
 function normalizeNewlines(str) {
   return str.replace(/\r\n/g, '\n');

app/assets/javascripts/zen_mode.js

@@ -11,8 +11,6 @@ import Dropzone from 'dropzone';
 import 'mousetrap';
 import 'mousetrap/plugins/pause/mousetrap-pause';
 
-window.Dropzone = Dropzone;
-
 //
 // ### Events
 //

spec/javascripts/blob/blob_file_dropzone_spec.js

-import 'dropzone';
 import BlobFileDropzone from '~/blob/blob_file_dropzone';
 
 describe('BlobFileDropzone', () => {

spec/javascripts/zen_mode_spec.js

 /* eslint-disable space-before-function-paren, no-var, one-var, one-var-declaration-per-line, object-shorthand, comma-dangle, no-return-assign, new-cap, max-len */
-/* global Dropzone */
 /* global Mousetrap */
-
+import Dropzone from 'dropzone';
 import ZenMode from '~/zen_mode';
 
 (function() {