importer.html

<form>
  <div class="form-group import">
    <label class="import-options">Scene Name</label><input type='text' name="sceneName" />
  </div>
  <div class="form-group import" data-tooltip-direction="LEFT" data-tooltip="Select where the image is uploaded.">
    <label class="import-options">Storage Type</label>
    <select name="source" class="source-selector">
      {{#select defaultSource}}
      {{#each dataSources as |label key|}}
      <option value="{{key}}">{{label}}</option>
      {{/each}}
      {{/select}}
    </select>
  </div>
  <div class="form-group import convert-section convert-to-webp" data-tooltip-direction="LEFT" data-tooltip="You can save images as webp which will make them a lot smaller, but creation time is a bit longer">
    <label class="import-options">Convert to WebP</label>
    <input type="checkbox" name="convert-to-webp" {{checked webpConversion}}>
  </div>

  <div class="form-group import convert-section" data-tooltip-direction="LEFT" data-tooltip="You can set a custom Grid PPI value at time of import to change the resolution of the generated image">
    <label class="import-options">Set Custom Grid PPI</label>
    <input type="checkbox" class="use-custom-gridPPI" name="use-custom-gridPPI" {{checked useCustomPixelsPerGrid}}>
  </div>

  <div class="form-group custom-gridPPI-section" style="display: none">
    <input class="customGridPPIInput" type='range' name="customGridPPI" min="50" max="256" value="{{defaultCustomPixelsPerGrid}}"/>
    <span class="range-value">{{defaultCustomPixelsPerGrid}}</span>
  </div>

  <div class="form-group import" data-tooltip-direction="LEFT" data-tooltip="This is where the image is uploaded. Your path should be relative to your User Data folder. e.g. worlds/yourworld/maps">
    <label class="import-options">Upload Path</label>
    {{filePicker type="folder" target="path"}}
    <input class= "path-input" type='text' name="path" value="{{this.path}}" />
  </div>

  <div class="warning path notification error" style="display: none">
    Your path should be relative to your User Data folder. e.g. worlds/yourworld/maps, or blank to place in the "Data" folder.
  </div>

  <div class="form-group import">
    <label class="import-options" data-tooltip-direction="LEFT" data-tooltip="Fidelity decides how many cave walls to skip - Right is high fidelity, no walls skipped">Fidelity</label>
    <input class="fidelity-input" type="range" min="1" max="6" value="1" name="fidelity">
  </div>

  <div class="warning fidelity notification error" style="display: none">
    Higher Fidelity creates a very large amount of cave walls. Recommended to stay at the minimum.
  </div>

  <div class="form-group" data-tooltip-direction="LEFT" data-tooltip="Includes the walls from objects that block line of sight">
    <label class="import-options">Object Walls</label>
    <input type="checkbox" name="object-walls" checked>
  </div>

  <div class="form-group import">
    <label class="import-options">Padding</label>
    <div style="display:flex" class="padding-fields">
      <input class="padding-input" type="range" min="0" max="0.5" value="{{padding}}" step="0.05" name="padding">
      <span class="range-value">{{padding}}</span>
    </div>
  </div>

  <div class="form-group import">
    <label class="import-options">Upload Universal VTT (.dd2vtt, .df2vtt, .uvtt)</label> 
  </div>
  <div class="form-group import" id="dd-upload-files" style="flex-direction: column";>
    <div class="file-input" style="width: 80%; display:flex; align-items: center; margin-bottom: 10px;">
      <input class="file-input" type='file' name='file0' accept=".dd2vtt,.df2vtt,.uvtt" />
    </div>
    
    <a class="add-file"><i class="fa-solid fa-plus"></i> Add another file</a>
    <fieldset class="multi-mode-section" style="display: none">
      <legend>Multi-File Options</legend>
      <div class="form-group">
        <label class="import-options">Add walls around single files</label>
        <input type="checkbox" name="walls-around-files" {{checked wallsAroundFiles}}>
      </div>
      <div class="form-group">

        <label class="import-options">Layout Mode</label>
        <select name="multi-mode">
          {{#select multiImageMode}}
          {{#each multiImageModes as |label key|}}
          <option value="{{key}}">{{label}}</option>
          {{/each}}
          {{/select}}
      </select><br />
      </div>
      <div class="form-group stacked">
        <label class="import-options">Image File Name (also Scene Name if empty)</label>
        <input type='text' name="imageFileName" />
      </div>
    </fieldset>
  </div>
  <div>
    <hr />
    <h3>Advanced</h3>
    <div class="form-group import conversion-quality">
      <label class="import-options"
      data-tooltip-direction="LEFT" data-tooltip="Increase for a better quality image at the cost of increased conversion speed and disk usage">WebP Quality</label>
      <input class="quality-input" type="range" min="0.1" max="1" value="{{webpQuality}}" step="0.1" name="webp-quality">
      <span class="range-value">{{webpQuality}}</span>
    </div>
  
    <div class="form-group import">
      <label class="import-options" data-tooltip-direction="LEFT" data-tooltip="Nudges the walls away from the edge. If you experience issues, leave at 0.">Offset</label>
      <input type="number" min="-3" step="0.1" max="3" value="{{offset}}" name="offset">
    </div>
    <div class="s3-section" style="display: none">
      <div class="form-group import">
        <label class="import-options">Bucket Name for S3 Storage</label>
        <select name="bucket">
          {{#select s3Bucket}}
            <option value=""></option>
            {{#each bucketOptions}}
            <option value="{{this}}">{{this}}</option>
            {{/each}}
          {{/select}}
        </select>
      </div>
    </div>
  </div>

  <button type="submit" class="import-map">Import</button>
</form>