Source: upload-modal.js

  1. /* global $, libreviews, config */
  2. 'use strict';
  4. /**
  5.  * Creates an overlay modal dialog which lets the user upload a single file via
  6.  * the upload API.
  7.  *
  8.  * @param {Function} [successCallback]
  9.  *  Callback to run after a successful upload.
  10.  * @param {Function} [errorCallback]
  11.  *  Callback to run after a failed upload (does not run if modal is closed).
  12.  */
  13. exports.uploadModal = function uploadModal(successCallback, errorCallback) {
  14.   // Obtain template for the dialog (a simple jQuery object).
  15.   const $modal = getTemplate();
  17.   $('body').append($modal);
  19.   // Initially the modal just shows the upload button; once a file is selected,
  20.   // we expand to show the metadata form
  21.   $('#upload-input').change(expandModal);
  23.   // If the user selects "Someone else's work", we flip to the second page to
  24.   // let them enter author/source information
  25.   $('#upload-modal-other').click(showPage2);
  27.   // If the user selects "My own work", we set all metadata back to the default
  28.   // values
  29.   $('#upload-modal-ownwork').click(resetMetadata);
  31.   $('#upload-modal-description').blur(libreviews.trimInput);
  33.   // If the user clicks "Cancel" on page 2, we flip back to page 1, and we
  34.   // de-select the radio buttons unless we have complete data from a previous
  35.   // "OK" action
  36.   $('#upload-modal-cancel-metadata').click(cancelPage2);
  38.   // When the user clicks "Start upload", we first perform some manual
  39.   // "required" checks - we don't use our standard library here to keep the
  40.   // modal's UI compact (the "*" indicators would take up additional space).
  41.   //
  42.   // we send all the data to the upload API, which may return multiple errors.
  43.   // Predictable errors (bad file type, actual MIME type doesn't match claimed
  44.   // MIME type) will be reported to the user. Unknown errors will fall back to a
  45.   // generic error message.
  46.   //
  47.   // Once the operation succeeds or fails, the respective callbacks are run.
  48.   $('#upload-modal-start-upload').click(function(event) {
  49.     event.preventDefault();
  50.     startUpload(successCallback, errorCallback);
  51.   });
  53.   // We use our standard validation library for the page 2 metadata form. If it
  54.   // reports no errors, the confirmMetadata callback updates the hidden fields
  55.   // in the form on page 1.
  56.   $('#upload-modal-confirm-metadata').attachRequiredFieldHandler({
  57.     formSelector: '#upload-metadata-form',
  58.     callback: confirmMetadata
  59.   });
  61.   // Open the modal dialog
  62.   $modal.modal();
  64.   // Lock in the inputs so user can tab through them but not exit the modal
  65.   $modal.lockTab();
  67.   // Clean up on each close
  68.   $('#upload-modal').on($.modal.BEFORE_CLOSE, function() {
  69.     $modal.remove();
  70.   });
  72. };
  75. const
  76.   __ = libreviews.msg,
  77.   msg = {
  78.     head: __('upload and insert media'),
  79.     select: __('select file'),
  80.     start: __('start upload'),
  81.     placeholder: {
  82.       description: __('enter description'),
  83.       creator: __('enter creator name'),
  84.       source: __('enter source'),
  85.       license: __('select license')
  86.     },
  87.     creator: __('creator'),
  88.     ownwork: __('my own work'),
  89.     other: __('someone else\'s work'),
  90.     specified: __('someone else\'s work specified'),
  91.     source: __('source'),
  92.     license: __('license'),
  93.     licenses: {
  94.       'fair-use': __('fair use short'),
  95.       'cc-0': __('cc-0 short'),
  96.       'cc-by': __('cc-by short'),
  97.       'cc-by-sa': __('cc-by-sa short')
  98.     },
  99.     required: {
  100.       rights: __('please specify rights'),
  101.       description: __('please enter description')
  102.     },
  103.     ok: __('ok'),
  104.     cancel: __('cancel'),
  105.     error: __('could not complete action')
  106.   },
  108.   getTemplate = () => $(
  109.     `<div id="upload-modal" class="hidden-regular">
  110. <form class="pure-form" id="upload-modal-form">
  111. <div id="upload-modal-page-1">
  112. <div class="upload-modal-buttondiv">
  113. <h3>${msg.head}</h3>
  114. <input type="file" name="files" id="upload-input" accept="image/*,video/webm,video/ogg,audio/*" class="hidden">
  115. <label id="upload-modal-label" for="upload-input" data-upload-count class="pure-button button-rounded" tabindex="0" data-focusable>
  116. <span class="fa fa-fw fa-file-image-o spaced-icon" id="upload-icon">&nbsp;</span><span id="upload-label-text">${msg.select}</span></label>
  117. </div>
  118. <div id="upload-modal-page-1-expansion" class="hidden-regular">
  119. <p>
  120. <textarea id="upload-modal-description" name="description" class="pure-input-1" placeholder="${msg.placeholder.description}"></textarea>
  121. <p>
  122. <table>
  123. <tr class="input-row">
  124. <td><input type="radio" id="upload-modal-ownwork" name="ownwork" value="1"></td>
  125. <td><label for="upload-modal-ownwork" class="inline-label">${msg.ownwork}</label></td>
  126. </tr>
  127. <tr class="input-row">
  128. <td>
  129. <input type="radio" id="upload-modal-other" name="ownwork" value=""></td>
  130. <td><label for="upload-modal-other" class="inline-label" id="upload-modal-other-label">${msg.other}</label></td>
  131. </tr>
  132. </table>
  133. <input type="hidden" name="language" value="${config.language}">
  134. <input type="hidden" id="upload-modal-license" name="license" value="cc-by-sa">
  135. <input type="hidden" id="upload-modal-creator" name="creator" value="">
  136. <input type="hidden" id="upload-modal-source" name="source" value="">
  137. <p>
  138. <div id="upload-modal-need-description" class="upload-modal-error error hidden-regular">${msg.required.description}</div>
  139. <div id="upload-modal-need-rights" class="upload-modal-error error hidden-regular">${msg.required.rights}</div>
  140. <div class="upload-modal-buttondiv">
  141. <button id="upload-modal-start-upload" disabled class="pure-button pure-button-primary button-rounded" type="submit"><span class="fa fa-fw fa-cloud-upload spaced-icon">&nbsp;</span>${msg.start}</button><span id="upload-modal-spinner" class="fa fa-spinner fa-spin hidden-regular"></span>
  142. </div>
  143. <div class="error" id="upload-errors"></div>
  144. </div>
  145. </form>
  146. </div>
  147. <div id="upload-modal-page-2" class="hidden-regular">
  148. <span id="upload-modal-cancel-metadata"><span class="fa fa-chevron-left fa-fw">&nbsp;</span> ${msg.cancel}
  149. </span>
  150. <p>
  151. <p>
  152. <form id="upload-metadata-form" class="pure-form">
  153. <label for="upload-metadata-creator">${msg.creator}<span class="required"> *</span></label><br>
  154. <input id="upload-metadata-creator" data-required type="text" class="pure-input-1" placeholder="${msg.placeholder.creator}">
  155. <p>
  156. <label for="upload-metadata-source">${msg.source}<span class="required"> *</span></label><br>
  157. <input id="upload-metadata-source" data-required type="text" class="pure-input-1" name="source" placeholder="${msg.placeholder.source}">
  158. <p>
  159. <label for="upload-metadata-license">${msg.license}<span class="required"> *</span></label><br>
  160. <select id="upload-metadata-license" data-required class="pure-input-1" name="license">
  161. <option value="" disabled selected>${msg.placeholder.license}</option>
  162. <option value="fair-use">${msg.licenses['fair-use']}</option>
  163. <option value="cc-0">${msg.licenses['cc-0']}</option>
  164. <option value="cc-by">${msg.licenses['cc-by']}</option>
  165. <option value="cc-by-sa">${msg.licenses['cc-by-sa']}</option>
  166. </select>
  167. <p>
  168. <button id="upload-modal-confirm-metadata" data-check-required class="pure-button pure-button-primary button-rounded">
  169. ${msg.ok}
  170. </button>
  171. </form>
  172. </div>
  173. </div>`
  174.   ),
  176.   enableSpinner = () => $('#upload-modal-spinner').removeClass('hidden-regular'),
  177.   disableSpinner = () => $('#upload-modal-spinner').addClass('hidden-regular'),
  178.   enableUpload = () => $('#upload-modal-start-upload').prop('disabled', false),
  179.   disableUpload = () => $('#upload-modal-start-upload').prop('disabled', true);
  181. function expandModal() {
  182.   let files = $('#upload-input')[0].files;
  183.   $('#upload-label-text').text(files[0].name);
  184.   enableUpload();
  185.   $('#upload-modal-page-1-expansion').slideDown(200);
  186.   $('#upload-modal-description').focus();
  187. }
  190. function showPage2() {
  191.   $('#upload-modal-page-1').hide(200);
  192.   $('#upload-modal-page-2').show(200);
  193.   $('#upload-metadata-creator').focus();
  194. }
  196. function resetMetadata() {
  197.   $('#upload-modal-license').val('cc-by-sa');
  198.   $('#upload-modal-source').val('');
  199.   $('#upload-modal-creator').val('');
  200. }
  202. function cancelPage2() {
  203.   $('#upload-modal-page-2').hide(200);
  204.   $('#upload-modal-page-1').show(200);
  206.   // Reset radio selection in case we don't have all the required data
  207.   if (!$('#upload-modal-license').val() || !$('#upload-modal-creator').val() ||
  208.     !$('#upload-modal-source').val())
  209.     $('#upload-modal-other').prop('checked', false);
  210. }
  212. function startUpload(successCallback, errorCallback) {
  214.   const hasDescription = Boolean($('#upload-modal-description').val());
  215.   const hasRights = $('#upload-modal-ownwork').prop('checked') ||
  216.     $('#upload-modal-other').prop('checked');
  218.   $('#upload-modal-need-description').toggle(!hasDescription);
  219.   $('#upload-modal-need-rights').toggle(!hasRights);
  221.   if (!hasDescription || !hasRights)
  222.     return;
  224.   const form = $('#upload-modal-form')[0];
  225.   const data = new FormData(form);
  226.   enableSpinner();
  227.   disableUpload();
  228.   $('#upload-errors').empty();
  229.   $.ajax({
  230.       url: '/api/actions/upload',
  231.       data,
  232.       cache: false,
  233.       contentType: false,
  234.       processData: false,
  235.       type: 'POST',
  236.     })
  237.     .done(data => {
  238.       disableSpinner();
  239.       $.modal.close();
  240.       if (successCallback)
  241.         successCallback(data.uploads);
  242.     })
  243.     .fail(data => {
  244.       const errorArray = [];
  245.       disableSpinner();
  246.       enableUpload();
  247.       let showGenericError = true;
  249.       if (data && data.responseJSON && data.responseJSON.errors) {
  250.         errorArray.push(data.responseJSON.errors);
  251.         let allErrors = '';
  252.         for (let error of data.responseJSON.errors) {
  253.           if (error.displayMessage) {
  254.             allErrors += error.displayMessage + '<br>';
  255.             showGenericError = false;
  256.           }
  257.         }
  258.         if (allErrors)
  259.           $('#upload-errors').html(allErrors);
  260.       } else {
  261.         errorArray.push('Unknown error');
  262.       }
  263.       if (showGenericError)
  264.         $('#upload-errors').html(msg.error);
  266.       if (errorCallback)
  267.         errorCallback(errorArray);
  268.     });
  269. }
  271. function confirmMetadata(event) {
  272.   const license = $('#upload-metadata-license').val(),
  273.     source = $('#upload-metadata-source').val(),
  274.     creator = $('#upload-metadata-creator').val();
  275.   $('#upload-modal-license').val(license);
  276.   $('#upload-modal-source').val(source);
  277.   $('#upload-modal-creator').val(creator);
  278.   const info = `
  279. ${msg.specified}<br>
  280. <table id="upload-modal-metadata-info">
  281. <tr><td><b>${msg.creator}</b></td><td>${creator}</td></tr>
  282. <tr><td><b>${msg.source}</b></td><td>${source}</td></tr>
  283. <tr><td><b>${msg.license}</b></td><td>${msg.licenses[license]}</td></tr>
  284. </table>
  285. `;
  286.   $('#upload-modal-other-label').html(info);
  287.   $('#upload-modal-page-2').hide(200);
  288.   $('#upload-modal-page-1').show(200);
  289.   event.preventDefault();
  290. }