ALFRESCO · Edit Meta-Data during upload (really)

One of the most common requirements for organizations adopting Alfresco is that users must provide a minimum set of data when creating a new document in the system in order to allow a proper catalog of the contents.

This functionality is not provided by Alfresco, although there is a commercial add-on (Edit Meta-Data during upload) that provides an approximation based on the launch of a form after the document has been uploaded to Alfresco. However, the user can close or cancel the form window without introducing the required data. Thus, the document would have been uploaded to the system without updating the required information.

Another approach

  1. Custom model design (Jeff Potts wrote an excellent guide on this – Working With Custom Content Types)
  2. FTL templates customization (dnd-upload.get.html.ftl, flash-upload.get.html.ftl and html-upload.get.html.ftl)
    • Creating custom HTML controls in order to require metadata from the model to the user
  3. JS YUI customization (dnd-upload.js, flash-upload.js and html-upload.js)
    • HTML controls from FTL template management (get data, put data, clear data and visibility options)
    • WebScript or Behaviour development in order to save values on meta-data properties from the model

So, new upload window should appear like this one.


Drag & Drop

Default Alfresco mechanism on drag & drop includes the instant upload of every document dropped to the browser window. In our scenario, meta-data form will not be shown. So we need to include some new fixes on JS YUI  dnd-upload.js

      show: function DNDUpload_show(config)
         // Create an alias for this (it is required for the listener functions declared later)
         var _this = this;

         // Merge the supplied config with default config and check mandatory properties
         this.suppliedConfig = config;
         this.showConfig = YAHOO.lang.merge(this.defaultShowConfig, config);
         if (!this.showConfig.uploadDirectory && !this.showConfig.updateNodeRef && !this.showConfig.destination && !this.showConfig.uploadURL)
             throw new Error("An updateNodeRef, uploadDirectory, destination or uploadURL must be provided");
         if (this.showConfig.uploadDirectory !== null && this.showConfig.uploadDirectory.length === 0)
            this.showConfig.uploadDirectory = "/";

         // Apply the config before it is shown

         // Apply the config before it is shown
         // If files is not defined then assume we need to select them...
         if (this.showConfig.files == null || this.showConfig.files.length == 0)
            // Display the file select section of the dialog
            // Hide the file and progress information...
            Dom.removeClass( + "-file-selection-controls", "hidden");
            Dom.addClass( + "-filelist-table", "hidden");
            Dom.addClass(this.aggregateDataWrapper, "hidden");

            // Create a new file selection input element (to ensure old data is retained we will remove any old instance...
            if (this.fileSelectionInput && this.fileSelectionInput.parentNode)
               this.fileSelectionInput.parentNode.removeChild(this.fileSelectionInput); // Remove the old node...
            this.fileSelectionInput = document.createElement("input");
            Dom.setAttribute(this.fileSelectionInput, "type", "file");

            // Only set the multiple attribute on the input element if running in multi-file upload
            // (i.e. we don't want to allow multiple file selection when updating a file)
            if (this.suppliedConfig.mode !== this.MODE_SINGLE_UPDATE)
               Dom.setAttribute(this.fileSelectionInput, "multiple", "");
            Dom.setAttribute(this.fileSelectionInput, "name", "files[]");
            Dom.addClass(this.fileSelectionInput, "dnd-file-selection-button");
            Event.addListener(this.fileSelectionInput, "change", this.onFileSelection, this, true);
            // ADDED · Restore default message for upload button ("Select files to upload")
            this.widgets.fileSelectionOverlayButton._button.innerHTML = this.msg("button.selectFiles");
            // ADDED · Remove onClick listener from button overlay
            Event.removeListener(this.widgets.fileSelectionOverlayButton._button, "click", this.onUploadButtonClick);

            // Enable the Esc key listener
             // MODIFIED · Drag & Drop behaviour
             Dom.addClass( + "-filelist-table", "hidden");
             Dom.addClass(this.aggregateDataWrapper, "hidden");
             Dom.removeClass( + "-file-selection-controls", "hidden");
             // Add new message for upload button ("Upload")
             this.widgets.fileSelectionOverlayButton._button.innerHTML = this.msg("button.upload");
             // Add new listener to button overlay
             Event.addListener(this.widgets.fileSelectionOverlayButton._button, "click", this.onUploadButtonClick, this, true);
             // Remove file input control (targeted file has been set by drag & drop)
             if (this.fileSelectionInput && this.fileSelectionInput.parentNode) {
                this.fileSelectionInput.parentNode.removeChild(this.fileSelectionInput); // Remove the old node...

             // Other GUI adjustments

So our data entry window will be presented to the user and the “Select files to upload” button will have been modified by an “Upload” button in order to send the attached file to the system without requiring any other user interaction.



Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de

Estás comentando usando tu cuenta de Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s