Customizing Asset Upload Dialog

 

Customizing Asset Upload Dialog

We have seen in the previous blogs that how we can detect duplicate assets, but once this feature is enabled it will be applied to each and every asset you are uploading. So, if you don’t want it to be applied for some assets or you want to have control over whether or not you want to get duplicates of an asset, then you can customize asset dialog then have a control over this feature. Let’s find out how to do this.

Asset Upload Dialog looks something like as shown in below screenshot.

Now I want to toggle between applying duplicate asset feature or not. So, I am adding one checkbox to the above dialog when this is checked it will call duplicate asset feature, else it won’t call.

In order to achieve this, follow below steps.

• First step is to find the script that is responsible to render this dialog. After debugging, I found that "/libs/dam/gui/coral/components/commons/fileupload/clientlibs/fileupload/js/fileupload.js" is responsible for rendering this dialog.

• After finding the script, debug it to find code snippet used in this dialog. "_createUploadDialog" function is responsible for the Asset upload Dialog.

• So add checkbox as shown below in the "_createUploadDialog" function & append it to the uploadFileStatus object.

var duplicateCheck = new Coral.Checkbox().set({ label: { innerHTML: "Check this to get duplicate assets" },checked: true});

uploadFilesStatus.appendChild(duplicateCheck);

• Now to hold the status of this checkbox, declare a variable outside of the function.

self.duplicateAssetCheck ="false";

• Then set above variable based on user selection inside uploadButton click function as shown below.

uploadButton.on("click", function() {

        if(duplicateCheck.get('checked')){

                  self.duplicateAssetCheck=true;

        }else{

                  self.duplicateAssetCheck=false;

        }

        self._submit();

});

• Now check file upload status, that is basically tells you the file upload event status. Different status will be associated with different codes, for success it will be 200 and if you get 409 this corresponds to conflict (i.e) if the resource already exists then we get that. Now check where duplicate array is being set and put it inside checkbox condition. Something as shown in below code snippet. 

if(self.duplicateAssetCheck){

            var arr = [ title1, duplicates ];

            self.duplicateAssets.push(arr);

               } // Change the elements of arr object wherever necessary as applicable.

After making above changes. Here is the final result.

          This is after adding check box

If it is checked and then clicked on upload, it will get you the duplicate result else it will upload as usual without showing any result.