AnsweredAssumed Answered

Accessing files in the Content Collection via Javascript

Question asked by becker01 on Feb 22, 2018

I am developing a configuration (settings page) in a B2 that will gather and display image files held in the content collection, by 1) presenting a thumbnail to the System Admin for selection and 2) displaying the final image to the user.

 

This is my current code using the File Picker API and a jsBlock at this stage:

 

<div class="ImagePlaceHolder"">
                         
    <bbNG:dataElement label="">
            <input id="promo1" type="image" src="nothing.png" name="tileOneThumb" />
    </bbNG:dataElement>
    
</div>
    
<bbNG:filePicker 
    baseElementName="tileOneImage" 
    mode="CS_FILE_ONLY" 
    attachLabel=""
    selectedLabel="" 
    doNotAttachLabel="Deselect"
    showLinkTitle="false"
    var="promoImage1"
    startingFolderPath="/institution/promos">
</bbNG:filePicker>
    
<bbNG:jsBlock>
    <script>
    
        // why does this require two button presses before path is set and thumbnail displayed.                            
        document.getElementById('tileOneImage_csBrowse').addEventListener('click', promo1Path);
            
        function promo1Path(e){                           
            
            var imageOnePath = document.getElementById('tileOneImage_selectedCSFilePath').value;
            var finalImageOnePath = "https://localhost:9877/bbcswebdav" + imageOnePath;
            document.getElementById('tileOnePath').value = finalImageOnePath;
            document.getElementById('promo1').src = finalImageOnePath;
        }
        
    </script>
</bbNG:jsBlock>

 

However, in order to capture the file xid parameter and display the thumbnail  correctly requires the following operation:

     1. Press Browse Content Collection button

     2. Press the Deselect (which in reality is the Do Not Attach button)

     3. Press the Browse Content Collection button again.

After which the correct file path is displayed and the thumb nail is displayed to the Sys Admin and the image to the user.

 

I am relatively new to JavaScript, so I am wondering if anyone is able to help me identify the event I need to target, in the Content Collection light-box, to perform this operation in a single click rather than three? Or correct my JavaScript with the DOM event I need, i.e. should I be observing the light-box event and then looking for the click on the browse button?

 

Thanks.

Outcomes