AnsweredAssumed Answered

Add metadata/property to Upload File (Alfresco 5.2)

Question asked by wns on Oct 19, 2018

Hello,

I added a custom metadata/property to Upload File in Share in Alfresco 5.2.

My steps are:

  1. Added new module called "upload-extension.xml" in path "/src/main/resources/alfresco/web-extension/site-data/extensions/":
    • <extension>
          <modules>
              <module>
                  <id>Custom extensions</id>
                  <auto-deploy>true</auto-deploy>
                  <customizations>
                      <customization>
                          <targetPackageRoot>org.alfresco.components.upload</targetPackageRoot>
                          <sourcePackageRoot>com.custom.components.upload</sourcePackageRoot>
                      </customization>
                  </customizations>
              </module>
          </modules>
      </extension>
  2. Added "dnd-upload.get.html.ftl" in path "/src/main/resources/alfresco/web-extension/site-webscripts/com/custom/components/upload/":
    • <@markup id="custom-css" target="css" action="after">
          <@link rel="stylesheet" type="text/css" href="${url.context}/res/components/upload/extensions/custom-dnd-upload.css" group="upload" />
      </@>

      <@markup id="custom-js"  target="js" action="after">
          <@script src="${url.context}/res/components/upload/extensions/custom-dnd-upload.js" group="upload" />
      </@>

      <@markup id="custom-html"  target="html" action="replace">
         <@uniqueIdDiv>
            <#assign el=args.htmlid?html>
            <div id="${el}-dialog" class="dnd-upload hidden">
               <div class="hd">
                  <span id="${el}-title-span"></span>
               </div>
               <div class="bd">
                  <div id="${el}-file-selection-controls" class="browse-wrapper">
                      <div id="${el}-center-div" class="fileupload-center-div">
                          <label for="${el}-department-label" id="${el}-departments-label">${msg("label.department")} *</label>
                          <select id="${el}-custom_department" name="custom_department" tabindex="0">
                              <option value="Select">${msg("doctype.Select")}</option>
                              <option value="Fishing">${msg("doctype.Fishing")}</option>
                              <option value="Sport">${msg("doctype.Sport")}</option>
                              <option value="Technology">${msg("doctype.Technology")}</option>
                          </select>
                      </div>
                     <div class="center dnd-file-selection-control">
                        <input id="${el}-file-selection-button-overlay" type="button" value="${msg("label.browse")}" tabindex="0"/>
                     </div>
                  </div>
              
                  <div id="${el}-filelist-table" class="fileUpload-filelist-table"></div>
           
                  <div class="status-wrapper">
                     <span id="${el}-status-span" class="status"></span>
                  </div>
                  <div id="${el}-aggregate-data-wrapper">
                    <div class="status-wrapper">
                       <span id="${el}-aggregate-status-span" class="status"></span>
                    </div>
                    <div id="${el}-aggregate-progress-div" class="aggregate-progress-div">
                       <span id="${el}-aggregate-progress-span" class="aggregate-progressSuccess-span"> </span>
                    </div>
                  </div>
           
                  <div id="${el}-versionSection-div">
                      <div id="${el}-compare-versions" class="hidden compare-versions">
                         <div class="header">
                                <div class="element"><h3>${msg("section.currentFile")}</h3></div>
                                <div class="element"><h3>${msg("section.newFile")}</h3></div>
                         </div>
                         <div class ="current-version element">
                            <div class="details">
                               <div>
                                  <span>${msg("label.currentVersionValue")}:</span>
                                  <span class="prop-value" id="${el}-current-version-value"></span>
                               </div>
                               <div>
                                  <span>${msg("label.currentVersionFilename")}:</span>
                                  <span class="prop-value" id="${el}-current-version-filename"></span>
                               </div>
                               <div>
                                  <span>${msg("label.currentVersionTitle")}:</span>
                                  <span class="prop-value" id="${el}-current-version-title"></span>
                               </div>
                               <div>
                                  <span>${msg("label.currentVersionMimetype")}:</span>
                                  <span class="prop-value" id="${el}-current-version-mimetype"></span>
                               </div>
                               <div>
                                  <span>${msg("label.currentVersionLastModified")}:</span>
                                  <span class="prop-value" id="${el}-current-version-last-modified"></span>
                               </div>
                               <div>
                                  <span>${msg("label.currentVersionModifiedBy")}:</span>
                                  <span class="prop-value" id="${el}-current-version-modified-by"></span>
                               </div>
                            </div>
                            <span>
                            <img id="${el}-current-version-icon"/>
                            </span>
                         </div>
                         <div class ="new-version element">
                            <div class="details">
                               <div class>
                                  <span>${msg("label.newVersionFilename")}:</span>
                                  <span class="prop-value" id="${el}-new-version-filename"></span>
                               </div>
                               <div>
                                  <span>${msg("label.newVersionMimetype")}:</span>
                                  <span class="prop-value" id="${el}-new-version-mimetype"></span>
                               </div>
                            </div>
                            <span>
                            <img id="${el}-new-version-icon"/>
                            </span>
                         </div>
                      </div>
                     <div class="yui-g">
                        <h2>${msg("section.version")}</h2>
                     </div>
                     <div class="yui-gd">
                        <div class="yui-u first">
                           <span>${msg("label.version")}</span>
                        </div>
                        <div class="yui-u">
                           <input id="${el}-minorVersion-radioButton" type="radio" name="majorVersion" checked="checked" tabindex="0"/>
                           <label for="${el}-minorVersion-radioButton" id="${el}-minorVersion">${msg("label.minorVersion")}</label>
                        </div>
                     </div>
                     <div class="yui-gd">
                        <div class="yui-u first"> 
                        </div>
                        <div class="yui-u">
                           <input id="${el}-majorVersion-radioButton" type="radio" name="majorVersion" tabindex="0"/>
                           <label for="${el}-majorVersion-radioButton" id="${el}-majorVersion">${msg("label.majorVersion")}</label>
                        </div>
                     </div>
                     <div class="yui-gd">
                        <div class="yui-u first">
                           <label for="${el}-description-textarea">${msg("label.comments")}</label>
                        </div>
                        <div class="yui-u">
                           <textarea id="${el}-description-textarea" name="description" cols="80" rows="4" tabindex="0"></textarea>
                        </div>
                     </div>
                  </div>
           
                  <!-- Templates for a file row -->
                  <div style="display:none">
                     <div id="${el}-left-div" class="fileupload-left-div">
                        <span class="fileupload-percentage-span">0%</span>
                        <input class="fileupload-contentType-input" type="hidden" value="cm:content"/>
                     </div>
                     <div id="${el}-center-div" class="fileupload-center-div">
                        <span class="fileupload-progressSuccess-span"> </span>
                        <img src="${url.context}/res/components/images/generic-file-32.png" class="fileupload-docImage-img" alt="file" />
                        <span class="fileupload-progressInfo-span"></span>
                        <span class="fileupload-filesize-span"></span>
                     </div>
                     <div id="${el}-right-div" class="fileupload-right-div">
                        <img src="${url.context}/res/components/images/job-running-16.png" class="fileupload-status-img" alt="status" />
                        <img src="${url.context}/res/components/images/complete-16.png" class="fileupload-status-img hidden" alt="status" />
                        <img src="${url.context}/res/components/images/job-failed-16.png" class="fileupload-status-img hidden" alt="status" />
                     </div>
                  </div>
                     <div class="bdft">
                        <input id="${el}-upload-button" type="button" value="${msg("button.upload")}" tabindex="0"/>
                        <input id="${el}-cancelOk-button" type="button" value="${msg("button.cancel")}" tabindex="0"/>
                     </div>
               </div>
            </div>
         </@>
      </@>
  3. Added "dnd-upload.get.js" in path "/src/main/resources/alfresco/web-extension/site-webscripts/com/custom/components/upload/":
    • function getContentTypes() {
          var contentTypes = [
              {
                  id: "my:personalDocument",
                  value: "my_personalDocument"
              }
          ];
          return contentTypes;
      }
      model.contentTypes = getContentTypes();

      for (var i = 0; i < model.widgets.length; i++) {
          if (model.widgets[i].id == "DNDUpload") {
              model.widgets.splice(i, 1);
              var customDNDUpload = {
                  id: "customDNDUpload",
                  name: "Alfresco.CustomDNDUpload",
                  assignTo : "dndUpload"
              };
              model.widgets.push(customDNDUpload);
          }
      }
  4. Added "custom-dnd-upload.css" in path "/src/main/resources/META-INF/components/upload/extensions/":
    • .dnd-upload .fileupload-center-div {
          padding-top: 20px;
          margin-bottom: 10px;
      }
  5. Added "custom-dnd-upload.js" in path "/src/main/resources/META-INF/components/upload/extensions/":
    • (function () {

          Alfresco.CustomDNDUpload = function CustomDNDUpload_constructor(htmlId) {
              Alfresco.CustomDNDUpload.superclass.constructor.call(this, htmlId);

              return this;
          };

          /**
           * Extended from FlashUpload
           */
          YAHOO.extend(Alfresco.CustomDNDUpload, Alfresco.DNDUpload, {

              onReady: function CustomDNDUpload_onReady() {
                  Alfresco.CustomDNDUpload.superclass.onReady.call(this);

                  this.departmentList = Dom.get(this.id + "-custom_department");
                  this.departmentList.onchange = this.onPostRenderEvent.bind(this);
              },

              /**
               * Reset GUI to start state
               *
               * @method _resetGUI
               * @private
               */
              _resetGUI: function CustomDNDUpload__resetGUI() {
                  Alfresco.CustomDNDUpload.superclass._resetGUI.call(this);

                  this.departmentList.value= "Select";
                  this.widgets.fileSelectionOverlayButton.set("disabled", true);
              },

              /**
               * Fired by YUI:s DataTable when the added row has been rendered to the data table list.
               *
               * @method onPostRenderEvent
               */
              onPostRenderEvent: function CustomDNDUpload_onPostRenderEvent() {
                  Alfresco.CustomDNDUpload.superclass.onPostRenderEvent.call(this);

                  if (this.departmentList.value === "Select") {
                      this.widgets.fileSelectionOverlayButton.set("disabled", true);
                  } else {
                      this.widgets.fileSelectionOverlayButton.set("disabled", false);
                  }
              },

              /**
               * Called from show when an upload complete event fires.
               *
               * @param fileInfo {object} An entry from the fileStore array contains the information about the file that has uploaded.
               * @method _processUploadCompletion
               * @private
               */
              _processUploadCompletion: function CustomDND__processUploadCompletion(fileInfo) {
                  Alfresco.CustomDNDUpload.superclass._processUploadCompletion.call(this, fileInfo);
                  if (fileInfo.request.status == "200") {
                     var isUpdate=this.showConfig.mode == this.MODE_SINGLE_UPDATE?'1':'0';
                     this._saveDepartment(fileInfo, isUpdate);
                  }
               },
      _saveDepartment : function CustomDndUpload__saveDepartment(fileInfo, isUpdate) {
      //TODO call to a repo webscript to save the department
      }

      });
      })();

 

These are my steps but I'm getting a problem after uploading the file. It produces an error in the method "_processUploadCompletion". It seems like the parameter "fileInfo" is undefined. My idea is to call a webscript in the repo after uploading the file. And I think this is the appropriate method to do it. Is it correct or do you know what could be the problem?

 

On the other hand, do you know how to set a single upload file? I mean that the user can select only one file instead of multiple files. I tried it through the mode "MODE_SINGLE_UPLOAD" but I couldn't set it.

 

Another question, after disabling a button through "this.widgets.fileSelectionOverlayButton.set("disabled", true);". It appears as disabled but it's still clicking. How can I disable the click event?

 

Thanks a lot

Regards 

Outcomes