#1983·dropzone

HTML comment in previewTemplate causes crash

Author: jcoyneCreated May 21, 2021Updated Mar 27, 2024

Describe the bug If you have an HTML comment (e.g. <!-- hello -->) in the previewTemplate, this crash occurs:

Our actual template looked like this:

  <template data-dropzone-target='template'>
    
      <!-- BEGIN app/components/works/file_row_component.rb --><div class="dz-preview dz-file-preview row " data-dropzone-target="preview">
  <div class="thumb">
    <img data-dz-thumbnail />
  </div>
  <div class="col-md-2">
      <div class="dz-filename"><span data-dz-name></span></div>
      <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
      <div class="dz-success-mark"><span>✔</span></div>
      <div class="dz-error-mark"><span>✘</span></div>
      <div class="dz-error-message"><span data-dz-errormessage></span></div>
  </div>

  <div class="upload-description col row">
    <div class="col-md-3">
      <label class="col-form-label" for="work_attached_files_attributes_TEMPLATE_RECORD_label">Description</label>
      <!-- BEGIN app/components/popover_component.rb --><a tabindex="0" data-controller="popover" data-bs-placement="top" data-bs-content="Enter a brief description (100 characters max) to help others understand what this file contains. This description will appear on the PURL page underneath the name of the file." data-bs-html="true" class="info-icon">
  <span class="fas fa-info-circle"></span><span class="visually-hidden">more information</span>
</a>
<!-- END app/components/popover_component.rb -->
    </div>
    <div class="col-md-9">
    <input class="form-control" type="text" name="work[attached_files_attributes][TEMPLATE_RECORD][label]" id="work_attached_files_attributes_TEMPLATE_RECORD_label" />
    </div>
  </div>

  <div class="dz-details col-md-2">
    <input type="hidden" value="false" name="work[attached_files_attributes][TEMPLATE_RECORD][_destroy]" id="work_attached_files_attributes_TEMPLATE_RECORD__destroy" />
    <input type="hidden" value="#&lt;ActiveStorage::Attached::One:0x00007f94575c6de8&gt;" name="work[attached_files_attributes][TEMPLATE_RECORD][file]" id="work_attached_files_attributes_TEMPLATE_RECORD_file" />
    <input name="work[attached_files_attributes][TEMPLATE_RECORD][hide]" type="hidden" value="0" /><input class="form-check-input" type="checkbox" value="1" name="work[attached_files_attributes][TEMPLATE_RECORD][hide]" id="work_attached_files_attributes_TEMPLATE_RECORD_hide" />
    <label class="form-check-label col-form-label " for="work_attached_files_attributes_TEMPLATE_RECORD_hide">Hide file</label>
    <!-- BEGIN app/components/popover_component.rb --><a tabindex="0" data-controller="popover" data-bs-placement="top" data-bs-content="Check this box to prevent this file from ever being displayed on the PURL. The file will still be preserved in the Stanford Digital Repository with your deposit, but visitors to your PURL page will not be able to see it or download it. This option is sometimes used for permissions or release forms related to the content, or for other documentation related to the deposit that you would like preserved but that you do not want visible to others. Hidden files should NOT contain any content the University classifies as High-Risk, such as PHI, PII, or social security or credit card numbers." data-bs-html="true" class="info-icon">
  <span class="fas fa-info-circle"></span><span class="visually-hidden">more information</span>
</a>
<!-- END app/components/popover_component.rb -->
  </div>

  <div class="col-md-1">
    <button name="button" type="button" class="dz-remove pull-right btn" data-action="click-&gt;dropzone#removeAssociation">
      <span class="far fa-trash-alt"></span>
</button>  </div>
</div>
<!-- END app/components/works/file_row_component.rb -->

  </template>

and when we stripped the comments it works again.