SP Widget multiple <sp-attachment-button> needed

[xiaix]

I need two (2) completely independent <sp-attachment-button> elements.   First, here's a visual as to why:

I've tried adding the two <sp-attachment-button> elements in 1 widget, but that proved fruitless.

So now, I have two independent widgets on 1 page:

Now... to differentiate which image belongs to which widget, I wrote some code that will change the attachment file name to "fm_" for the Floor Map widget, and "ma_" for the Meeting Area widget.

Here is a taste of that code:

function($rootScope, $scope, $http, spUtil, $timeout, $location, $compile, $element, nowAttachmentHandler, $window, $sce, $sanitize) {
       var c_this = this;
       // This function is completely optional!
       $scope.fix_CSS_AttachmentView = function()
       {
               var i, j;
               var ary = $scope.attachments;
               var images = document.getElementsByTagName('img');
               for (i = 0; i < ary.length; i++)
               {
                       var e = document.getElementById(ary[i].sys_id);
                       if (e)
                       {
                               e.style.textAlign = "right";
                               for (j = 0; j < images.length; j++)
                               {
                                       if (images[j].outerHTML.indexOf('ng-src="'+ary[i].sys_id))
                                       {
                                               images[j].style.maxWidth = "fit-content";
                                       }
                               }
                       }
               }
       };
       $scope.m = $scope.data.msgs;
       $scope.submitButtonMsg = $scope.m.submitMsg;
       var ah = $scope.attachmentHandler = new nowAttachmentHandler(setAttachments, function() {});
       // $scope.data._attachmentGUID is the sys_id of the record we're working on.   It's not auto-generated like some other SP widgets are.
       ah.setParams('u_bcpa_sites', $scope.data._attachmentGUID, 1024 * 1024 * 24 /*24MB*/);
       // Cannot be a $scope'd function because the "nowAttachmentHandler" class is out of $scope and uses "self.xxx"
       function setAttachments(attachments, action)
       {
               // At this point, the attachment has either already been uploaded, deleted, or renamed.
               // Cycle through what we have now for attachments tied to this record and rename them
               // as WE see fit, according to our needed naming convention.
               for (var a = 0; a < attachments.length; a++)
               {
                       if (attachments[a].file_name.indexOf('fm_') != 0)
                       {
                               attachments[a].file_name = 'fm_' + attachments[a].file_name;
                               $scope.attachmentHandler.renameAttachment(attachments[a], attachments[a].file_name)
                               // We are returning here because the renameAttachment() function will re-call this whole thing.
                               // Basically, when all attachments have been renamed to our naming convention, we should not
                               // reach within this if() statement, thus continuing on happily.
                               return;
                       }
               }
               $scope.attachments = attachments;
               // Calling $scope.fix_CSS_AttachmentView() is optional.   Only using it to change the CSS on how the attachments are displayed.
               setTimeout(function(){
                       $scope.fix_CSS_AttachmentView();
               }, 100);
       }
       $scope.attachmentHandler.getAttachmentList();
       $scope.confirmDeleteAttachment = function(attachment, $event)
       {
               $rootScope.$broadcast("dialog.delete_attachment.show", {
                       parms: {
                               ok: function() {
                                       $scope.attachmentHandler.deleteAttachment(attachment);
                                       $rootScope.$broadcast("dialog.delete_attachment.close");
                               },
                               cancel: function() {
                                       $rootScope.$broadcast("dialog.delete_attachment.close");
                               },
                               details: attachment.name
                       }
               })
       };
}

*If* you're still with me and your eyes haven't glazed over yet...

The "$scope.attachmentHandler.getAttachmentList();" is pulling ALL attachments associated with the record... so, I was wondering... is there any parameter I can pass into getAttachmentList() where I could perhaps filter by the attachment file name?

I think it's plain to see what I'm trying to do here.   If I'm going about this all wrong or someone has had the same functionality need and has got it to work, please let me know.

[xiaix]

Honestly, I should sleep on stuff before I post.   I figured out what I needed to do and it's really quite simple.

In the HTML, do something like this:

<input type="file" ng-file-select="attachFile({files: $files}, 1)" />
<input type="file" ng-file-select="attachFile({files: $files}, 2)" />

Of course, a little prettier but you get the point.

In my CLIENT:

$scope.attachFile = function(files, whichMap)
{
   console.dir(files);
   console.info(whichMap);
};

Again, you get the idea as I would use a lot of the previously posted code to do the heavy lifting.

I just needed a way to distinguish which file was being uploaded.     Mission accomplished.

What led me to this was looking through the OOB "User Profile" widget.   I noticed the ng-file-select directive.   It's a beautiful thing.

[xiaix · Accepted solution]

Oh what a tangled web we weave..

I finally got this working perfectly:

Everything parses correctly, updates correctly, deletes correctly, etc...

Here's a good chunk of the code logic that I needed to pull this off:

HTML:

       <div class="sectionPadding" style="width: 800px; margin: auto;" id="ERC_EDIT_DIV_SECTION_9">
           <div class="sectionTitle">General Emergency Procedures</div>
           <table class="attachmentTable">
               <tr>
                   <td>
                       <div class="s9_subTitle">Floor Map(s)</div>
                       <div class="s9_subSubTitle">(Indicate exits, fire extinguishers, designated assembly areas, medical emergency equipment, evacuation routes)</div>
                       <div id="attachmentList_DIV">
                           <div ng-if="data.attachmentList.length" class="file-list-wrap ng-scope" template="sp_attachment_single_line" style="">
                               <ul class="list-group" style="margin-bottom: 0">
                                   <li class="list-group-item ng-scope" ng-repeat="attchmnt in data.attachmentList" ng-if="attchmnt.file_name.indexOf('fm_') == 0">
                                       <!-- <ng-include src="entryTemplate" class="ng-scope" style=""> -->
                                       <div class="sp-attachment-block-single-line file-attachment row ng-scope" id="{{attchmnt.sys_id}}" style="text-align: right;">
                                           <a style="border: none;" href="javascript:void(0)" title="View" class="col-md-1 col-sm-1 col-xs-2 view-attachment m-b-none text-center" ng-click="attachmentHandler.viewAttachment($event, attchmnt)">
                                               <img ng-if="attchmnt.thumbSrc" class="attachment-thumbnail img-responsive ng-scope" ng-src="{{attchmnt.thumbSrc}}" src="{{attchmnt.thumbSrc}}" style="max-width: fit-content;">
                                           </a>
                                           <div class="col-md-9 col-sm-8 col-xs-7 file-name v-middle">
                                               <a href="javascript:void(0)" ng-attr-title="Download {{attchmnt.file_name}}" class="get-attachment ng-binding" ng-click="attachmentHandler.downloadAttachment(attchmnt)" title="Download">{{attchmnt.file_name}}</a>
                                           </div>
                                           <div class="col-md-2 col-sm-3 col-xs-3 tools v-middle">
                                               <span ng-if="attchmnt.canDelete" title="Delete" class="glyphicon glyphicon-remove sp-attachment-delete wrapper-sm ng-scope" ng-click="confirmDeleteAttachment(attchmnt, $event)"></span>
                                           </div>
                                       </div>
                                       <!-- </ng-include> -->
                                   </li>
                               </ul>
                               <div class="errors-wrap" ng-hide="errorMessages.length == 0"></div>
                           </div>
                           <div class="addAttachment">
                               <label style="cursor:pointer;">
                                   <input ng-show="false" type="file" name="fmUpload" id="fmUpload" ng-file-select="attachFile($files, 1, $event)" />
                                   <button ng-click="upload_FLOOR_MAP($event)" type="button" class="btn btn-default send-message">${Upload FLOOR MAP}</button>
                               </label>
                           </div>
                       </div>
                   </td>
               </tr>
               <tr>
                   <td>
                       <div class="s9_subTitle">Meeting Area</div>
                       <div class="s9_subSubTitle">(equipment, evacuation routes)</div>
                       <div id="attachmentList_DIV2">
                           <div ng-if="data.attachmentList.length" class="file-list-wrap ng-scope" template="sp_attachment_single_line" style="">
                               <ul class="list-group" style="margin-bottom: 0">
                                   <li class="list-group-item ng-scope" ng-repeat="attchmnt in data.attachmentList" ng-if="attchmnt.file_name.indexOf('ma_') == 0">
                                       <!-- <ng-include src="entryTemplate" class="ng-scope" style=""> -->
                                       <div class="sp-attachment-block-single-line file-attachment row ng-scope" id="{{attchmnt.sys_id}}" style="text-align: right;">
                                           <a style="border: none;" href="javascript:void(0)" title="View" class="col-md-1 col-sm-1 col-xs-2 view-attachment m-b-none text-center" ng-click="attachmentHandler.viewAttachment($event, attchmnt)">
                                               <img ng-if="attchmnt.thumbSrc" class="attachment-thumbnail img-responsive ng-scope" ng-src="{{attchmnt.thumbSrc}}" src="{{attchmnt.thumbSrc}}" style="max-width: fit-content;">
                                           </a>
                                           <div class="col-md-9 col-sm-8 col-xs-7 file-name v-middle">
                                               <a href="javascript:void(0)" ng-attr-title="Download {{attchmnt.file_name}}" class="get-attachment ng-binding" ng-click="attachmentHandler.downloadAttachment(attchmnt)" title="Download">{{attchmnt.file_name}}</a>
                                           </div>
                                           <div class="col-md-2 col-sm-3 col-xs-3 tools v-middle">
                                               <span ng-if="attchmnt.canDelete" title="Delete" class="glyphicon glyphicon-remove sp-attachment-delete wrapper-sm ng-scope" ng-click="confirmDeleteAttachment(attchmnt, $event)"></span>
                                           </div>
                                       </div>
                                       <!-- </ng-include> -->
                                   </li>
                               </ul>
                               <div class="errors-wrap" ng-hide="errorMessages.length == 0"></div>
                           </div>
                           <div class="addAttachment">
                               <label style="cursor:pointer;">
                                   <input ng-show="false" type="file" name="maUpload" id="maUpload" ng-file-select="attachFile($files, 2, $event)" />
                                   <button ng-click="upload_MEETING_AREA($event)" type="button" class="btn btn-default send-message">${Upload MEETING AREA}</button>
                               </label>
                           </div>
                       </div>
                   </td>
               </tr>
           </table>
       </div>
       <div id="deleteConfirmation">
           <sp-message-dialog name="delete_attachment"
                                                 title="{{m.dialogTitle}}"
                                                 message="{{m.dialogMessage}}"
                                                 ok="{{m.dialogOK}}"
                                                 cancel="{{m.dialogCancel}}"
                                                 dialog-class="delete-dialog" />
       </div>
   </div>

CLIENT:

function($rootScope, $scope, $http, spUtil, $timeout, $location, $compile, $element, nowAttachmentHandler, snAttachmentHandler, $window, $sce, $sanitize) {
       var c_this = this;


       $scope.upload_FLOOR_MAP = function($event) {
               $event.stopPropagation();
               var $el = $element.find('input[id=fmUpload]');
               $el.click();
       }
       $scope.upload_MEETING_AREA = function($event) {
               $event.stopPropagation();
               var $el = $element.find('input[id=maUpload]');
               $el.click();
       }


       $scope.attachFile = function(file, whichMap, $event)
       {
               var e = $event.currentTarget;
               if (e)
                       e.value = '';


               if (whichMap == 1)
               {
                       snAttachmentHandler.create('u_bcpa_sites', $scope.data._attachmentGUID).uploadAttachment(file[0]).then(function(response) {
                               var fName = response.file_name;
                               if (fName.indexOf('fm_') != 0)
                               {
                                       fName = "fm_" + fName;
                                       snAttachmentHandler.renameAttachment(response.sys_id, fName).then(function(response) {
                                               var nah = $scope.attachmentHandler = new nowAttachmentHandler(setAttachments, function() {});
                                               nah.setParams('u_bcpa_sites', $scope.data._attachmentGUID, 1024 * 1024 * 24 /*24MB*/);
                                               function setAttachments(attachments, action)
                                               {
                                                       $scope.attachments = attachments;
                                                       $scope.data.attachmentList = attachments;
                                               }
                                               $scope.attachmentHandler.getAttachmentList();
                                       });
                               }
                       });
               }
               else if (whichMap == 2)
               {
                       snAttachmentHandler.create('u_bcpa_sites', $scope.data._attachmentGUID).uploadAttachment(file[0]).then(function(response) {
                               var fName = response.file_name;
                               if (fName.indexOf('ma_') != 0)
                               {
                                       fName = "ma_" + fName;
                                       snAttachmentHandler.renameAttachment(response.sys_id, fName).then(function(response) {
                                               var nah = $scope.attachmentHandler = new nowAttachmentHandler(setAttachments, function() {});
                                               nah.setParams('u_bcpa_sites', $scope.data._attachmentGUID, 1024 * 1024 * 24 /*24MB*/);
                                               function setAttachments(attachments, action)
                                               {
                                                       $scope.attachments = attachments;
                                                       $scope.data.attachmentList = attachments;
                                               }
                                               $scope.attachmentHandler.getAttachmentList();
                                       });
                               }
                       });
               }
       };


       var ah = $scope.attachmentHandler = new nowAttachmentHandler(setAttachments, function() {});
       ah.setParams('u_bcpa_sites', $scope.data._attachmentGUID, 1024 * 1024 * 24 /*24MB*/);
       function setAttachments(attachments, action)
       {
               $scope.attachments = attachments;
               $scope.data.attachmentList = attachments;
       }
       $scope.attachmentHandler.getAttachmentList();


       $scope.m = $scope.data.msgs;
       $scope.submitButtonMsg = $scope.m.submitMsg;


       $scope.confirmDeleteAttachment = function(attachment, $event)
       {
               $rootScope.$broadcast("dialog.delete_attachment.show", {
                       parms: {
                               ok: function() {
                                       $scope.attachmentHandler.deleteAttachment(attachment);
                                       $rootScope.$broadcast("dialog.delete_attachment.close");
                               },
                               cancel: function() {
                                       $rootScope.$broadcast("dialog.delete_attachment.close");
                               },
                               details: attachment.name
                       }
               })
       };
}

SERVER:

(function() {


       var userLocation_sysID = gs.getUser().getLocation();
       data.userLocation = userLocation_sysID;
       data.user_sysID = gs.getUserID();

       var m = data.msgs = {};
       m.submitMsg = gs.getMessage("Submit");
       m.submittedMsg = gs.getMessage("Submitted");
       m.createdMsg = gs.getMessage("Created");
       m.clickMsg = gs.getMessage("click here to view");
       m.dialogTitle = gs.getMessage("Delete Image");
       m.dialogMessage = gs.getMessage("Are you sure?");
       m.dialogOK = gs.getMessage("OK");
       m.dialogCancel = gs.getMessage("Cancel");
       m.largeAttachmentMsg = gs.getMessage("Attached files must be smaller than {0} - please try again", "24MB");


       if (!input)
       {
               data.user_is_valid_editor = false;
               get_BCP_Site_Data(userLocation_sysID);
               data._attachmentGUID = data.BCP_SITE_RECORD_SYSID;
               data.attachmentList = get_site_attachments(data.BCP_SITE_RECORD_SYSID);
       }
       else 
       {
       }
})();


function get_BCP_Site_Data(userLocation_sysID)
{
       var gr = new GlideRecord('u_bcpa_sites');
       gr.addQuery('u_active', true);
       gr.addQuery('u_location', userLocation_sysID);   
       if (gs.getUser().getRoles().indexOf('bcp_super_admin') < 0)
               gr.addQuery('u_erc_author', data.user_sysID);     
       gr.query();
       if (gr.next())
       {
               data.user_is_valid_editor = true;
               data.userLocationDISPLAY = gr.u_location.getDisplayValue();
               data.BCP_SITE_RECORD_SYSID = gr.sys_id.toString();
       }
}


function get_site_attachments(site)
{
       var attachments = [];
       var gr = new GlideRecord('sys_attachment');
       gr.addQuery('table_name', 'u_bcpa_sites');
       gr.addQuery('table_sys_id', site);
       gr.query();
       while (gr.next())
       {
               attachments.push({
                       content_type: gr.content_type.toString(),
                       sys_id: gr.sys_id.toString(),
                       height: parseInt(gr.image_height.toString()),
                       width: parseInt(gr.image_width.toString()),
                       size: parseInt(gr.size_bytes.toString()),
                       size_bytes: gr.size_bytes.toString(),
                       thumbSrc: gr.sys_id.toString() + ".iix?t=medium",
                       thumb_src: gr.sys_id.toString() + ".iix?t=medium",
                       thumbnail: gr.sys_id.toString() + ".iix?t=medium",
                       table_sys_id: gr.table_sys_id.toString(),
                       table_name: gr.table_name.toString(),
                       canWrite: true,
                       canDelete: true,
                       file_name: gr.file_name.toString()
               });
       }
       return attachments;
}

So yea... have fun with that!

[Pedro Silva4]

Going down the same road as you

it sucks the very poor documentations (read non-existent)

thanks for sharing. Thumbs up

[yundlu316]

Hi, our team is trying to create a custom attachment widget that can be used within a table and came across your post.  Can you provide some insights on how to submit so that attachments are attached to a certain table?