Unable to upload Images for Leads and Contacts modules for Version 8.6 - "Choose File" Button not visible

[steveb2050]

Issue

After a fresh install of Version 8.6.2, I'm unable to upload images to the image/photo fields in either the Contacts and Leads modules.

Instead of presenting the Choose File button/widget that allow for selection and import of the file, you are presented with a blank text box.

This condition is true for the default PHOTO Field (LBL_PHOTO, which is of the image type), and, for any newly created custom image field, also designated as image type (see screen captures below).

It looks like this issue was reported back in April 2022. The work-around presented then => here , which still works, is to point both modules back to legacy modules/code (I assume v7?) , using the ../config/services/module/module_routing.yaml file. By setting the record field for contacts (shown here) and leads to "false:. For example,

contacts:
index: true
list: true
record: false

I confirmed this actually works, i.e. , when implemented, the "Choose File" buttons appear where they should (see below) and downstream image presentation and edit functionality works for the 'detail' and 'edit' views.

But, unfortunately, in using this approach, it looks like you lose ALL the useful GUI improvements that were release for v8, including subpanels, quick saves, and more!!

Given the Contacts and Lead modules are central/core interfaces, this is suboptimal for sure. :<

Assuming this bug validates and i don't have a config issue, It would be great if someone could figure this out for the next release, or figure out an interim patch. Note that I have no file permission errors install & config .

Although I'm not developer, so can't help much with the solution, when inspecting the Markup on the front end, the v8.6 GUI seems to have a lot of missing markup/empty comment fields where the widget would be. Also note that i am not getting any browser console errors (odd, seems like i would get some .js if id's are missing?)

Front end mark-up for the 2 conditions tested follow:

==Markup when inspecting PHOTO field on Create New Contact page (when yaml file for contact is set to record:true - this is the fresh install/default condition)

  class="field-column-bordered col form-group m-0 pl-3 pb-2 pr-3 d-flex flex-column justify-content-between ng-star-inserted"
>
  <div class="label-container ng-star-inserted">
    <strong
      ><label class="col-form-label-sm mb-0">PHOTO</label>:
      <!----></strong
    >
  </div>
  <div class="d-flex flex-grow-1 ng-star-inserted">
    <div class="flex-grow-1 text-break">
      <scrm-field
        class="field field-mode-create field-name-photo field-type-image"
        ><scrm-dynamic-field
          class="dynamic-field dynamic-field-mode-edit dynamic-field-name-photo dynamic-field-type-image ng-star-inserted"
          ><!----><!----><ndc-dynamic class="ng-star-inserted"></ndc-dynamic
          ><scrm-varchar-edit class="ng-star-inserted"
            ><input
              type="text"
              class="form-control form-control-sm ng-touched ng-dirty ng-valid" /></scrm-varchar-edit
          ><!----><!----><!----><!----><!----><!----><!----></scrm-dynamic-field
        ><!----><!----><!----><!----></scrm-field
      >
    </div>
    <div><!----></div>
  </div>
  <!----><!----><!----><!---->
  <div class="field-separation mt-2 ng-star-inserted"></div>
  <!---->
</div>```


==Markup when inspecting PHOTO field on Create New Contact  page (when yaml file for contact is set to record:false) - this is legacy the work-around)

```<div
  class="col-xs-12 col-sm-6 edit-view-row-item edit-view-bordered"
  data-field="photo"
>
  <div class="col-xs-12 col-sm-4 label" data-label="LBL_PHOTO">Photo:</div>
  <div class="col-xs-12 col-sm-8 edit-view-field" type="image" field="photo">
    <script type="text/javascript">
      $(document).ready(function () {
        $("form#EditView")
          .attr("enctype", "multipart/form-data")
          .attr("encoding", "multipart/form-data");
      });
    </script>
    <script
      type="text/javascript"
      src="include/SugarFields/Fields/Image/SugarFieldFile.js?v=29wv8RvZpYRCW_ykyRDlFQ"
    ></script>
    <input type="hidden" name="deleteAttachment" value="0" />
    <input type="hidden" name="photo" id="photo" value="" />
    <input type="hidden" name="photo_record_id" id="photo_record_id" value="" />
    <span id="photo_old" style="display: none">
      <a
        href="index.php?entryPoint=download&amp;id=_photo&amp;type=Contacts&amp;time="
        class="tabDetailViewDFLink"
      ></a>
      <input
        type="button"
        class="button"
        id="remove_button"
        value="Remove"
        onclick='SUGAR.field.file.deleteAttachment("photo","",this);'
      />
    </span>
    <span id="photo_new" style="display: ">
      <input type="hidden" name="photo_escaped" />
      <input
        id="photo_file"
        name="photo_file"
        type="file"
        title=""
        size="30"
        maxlength="255"
      />
      <script type="text/javascript">
        $("#photo_file ").change(function () {
          $("#photo").val($("#photo_file").val());
        });
      </script>
    </span>
  </div>
  <div class="edit-dotted-border"></div>
  <!-- [/hide] -->
</div>```


### Possible Fix

_No response_

### Steps to Reproduce the Issue

```bash
please see description above...

Context

No response

Version

8.6.2

What browser are you currently using?

Chrome

Browser Version

128.0.6613.137 (64 bit)

Environment Information

PHP Version 8.1.29, mysql Ver 15.1 Distrib 10.4.34-MariaDB

Operating System and Version

CentOS Linux release 7.9.2009 (Core)