Hero

Como sobrescribir la carga de archivos ajax de Drupal 7

Mayo 29, 2013

estebanvalerioh
jQuery
Drupal
Desarrollo de Modulos

Drupal cuenta con el módulo File, el cual le permite a los usuarios cargar archivos y adjuntarlos a contenido y manipularlos si se cuenta el permiso adecuado. Este módulo se encarga de la validación de los archivos y del manejo de los mismos.

Además proporciona el código Javascript responsable de validar el archivo que se está cargando en cual entre otras cosas revisa la extensión del archivo y en caso de error muestra un mensaje del porqué se presento algún fallo como el siguiente:

Éste código puede ser sobrescrito para poder cambiar parte del comportamiento o cambiar los mensajes de error, esto lo logramos de la siguiente forma.

  1. Copiamos y pegamos el código Javascript.

Este código se encuentra en el archivo file.js y es parte de los módulos file del core de Drupal.

Drupal.file = Drupal.file || {
  /**
   * Client-side file input validation of file extensions.
   */
  validateExtension: function (event) {
    // Remove any previous errors.
    $('.file-upload-js-error').remove();

    // Add client side validation for the input[type=file].
    var extensionPattern = event.data.extensions.replace(/,\s*/g, '|');
    if (extensionPattern.length > 1 && this.value.length > 0) {
      var acceptableMatch = new RegExp('\\.(' + extensionPattern + ')$', 'gi');
      if (!acceptableMatch.test(this.value)) {
        var error = Drupal.t("The selected file %filename cannot be uploaded. Only files with the following extensions are allowed: %extensions.", {
          // According to the specifications of HTML5, a file upload control
          // should not reveal the real local path to the file that a user
          // has selected. Some web browsers implement this restriction by
          // replacing the local path with "C:\fakepath\", which can cause
          // confusion by leaving the user thinking perhaps Drupal could not
          // find the file because it messed up the file path. To avoid this
          // confusion, therefore, we strip out the bogus fakepath string.
          '%filename': this.value.replace('C:\\fakepath\\', ''),
          '%extensions': extensionPattern.replace(/\|/g, ', ')
        });
        $(this).closest('div.form-managed-file').prepend('<div class="messages error file-upload-js-error">' + error + '</div>');
        this.value = '';
        return false;
      }
    }
  },

Lo que debemos hacer es copiar la parte del código que necesitamos y lo ponemos en un nuevo archivo javascript dentro de un módulo personalizado, de la siguiente forma:

(function($) {
// Re-writing file upload
  Drupal.file = Drupal.file || {
    /**
   * Client-side file input validation of file extensions.
   */
    validateExtension: function (event) {
      // Remove any previous errors.
      $('.file-upload-js-error').remove();

      // Add client side validation for the input[type=file].
      var extensionPattern = event.data.extensions.replace(/,\s*/g, '|');
      if (extensionPattern.length > 1 && this.value.length > 0) {
        var acceptableMatch = new RegExp('\\.(' + extensionPattern + ')$', 'gi');
        if (!acceptableMatch.test(this.value)) {
          var error = Drupal.t("The file you tried to upload does not have an acceptable extension.");
          $(this).closest('div.form-managed-file').prepend('<div class="messages error file-upload-js-error">' + error + '</div>');
          this.value = '';
          return false;
        }
      }
    }
  };
})(jQuery);

El cambio que estoy haciendo es simplemente de cambiar el mensaje de error y remove comentarios en el código y este nueva función se ejecutara cuando valida la extensión a la hora de cargar un archivo.

  1. Probar el cambio.

Cuando se ha re-definido la función que procesas los archivos, solo debemos borrar el caché de Drupal, para que nuestro código sea reconocido y empiece a funcionar y podamos ver nuestra implementación.

Vemos a continuación una imagen de ejemplo de nuestro código funcionando:

Saludos.

Recibe consejos y oportunidades de trabajo 100% remotas y en dólares de weKnow Inc.

CONTACTS

Logo

Santa Ana, San Jose

+1 703 831 3307

yes@weknowinc.com

Contact us

Follow Us

7Sabores® y SieteSabores® son marcas registradas por Ingeniarte Consultores S.A. Todos los derechos reservados 2022.