Post Photo from Smartphone

<form id="post_photo_trigger">
  <button type="button" onclick="setLatitudeLongitude('#qGeolocation')">
    <i class="fa-light fa-location-crosshairs"></i></button>
  <input type="text" name="q_Geolocation" id="qGeolocation"><br><br>
  <label for="qFile" style="
    color: #ffffff; border-radius: 10px; padding: 10px 40px; border-color: #1565c0; background-color: #1565c0;
  ">Outward Camera ／ 外向カメラ</label><br>
  <input style="display: none;" onchange="getFileName(this)"
     id="qFile" type="file" name="q_attachments" capture="environment" accept="image/*"><br>
  <label for="qFile2" style="
    color: #ffffff; border-radius: 10px; padding: 10px 40px; border-color: #1565c0; background-color: #1565c0;
  ">User-facing Camera ／ 内向カメラ</label><br>
  <input style="display: none;" onchange="getFileName(this)"
     id="qFile2" type="file" name="q_attachments" capture="user" accept="image/*"><br>
  <input id="qsubmit" type="submit" value="Post Image">
</form>
<div id="post_photo_log"></div>

<script>
const strStartUrl = "https://example.questetra.net/System/Event/MessageStart/99/0/start"; // ★★
const strKey      = "GdixCgUffsvDBqnsOPPQUVgWtmwEbsjC"; // ★★See your workflow app★★
const strIdForm   = "#post_photo_trigger";      // ★must be same as Trigger form id★
const strIdLog    = "#post_photo_log";          // ★must be same as Log div id★

const elTriggerForm = document.querySelector ( strIdForm );
const elOutput      = document.querySelector ( strIdLog );

function setLatitudeLongitude ( idSelector ) {
  // https://developer.mozilla.org/docs/Web/API/Geolocation_API/Using_the_Geolocation_API#examples
  if( !navigator.geolocation ) {
    elOutput.textContent = 'Geolocation is not supported by your browser';
  } else {
    elOutput.textContent = 'Locating ..';
    navigator.geolocation.getCurrentPosition( success, error );
  }
  function success ( position ) {
    document.querySelector ( idSelector ).value = position.coords.latitude + "," + position.coords.longitude;
    elOutput.textContent = "";
  }
  function error() {
    elOutput.textContent = 'Unable to retrieve your location';
  }
}
function getFileName ( el ) {
  let files = el.files;
  elOutput.textContent = files[0].name + ' ' + files[0].size + ' byte';
}
elTriggerForm.addEventListener ( 'submit', function(ev) {
  ev.preventDefault();
  let objFormData = new FormData( elTriggerForm );
  objFormData.append ( 'key', strKey );

  elOutput.innerHTML = "Uploading ...";
  fetch( strStartUrl, {	method: 'POST', mode: 'cors', body: objFormData } ).then( response => {
    console.log( 'response: ' + response.ok + " " + response.status + " " + response.statusText );
      // https://developer.mozilla.org/docs/Web/API/Response
    if ( !response.ok ) { throw new Error( "response was not ok" ); } // go "catch"
    return response.text(); // QBPMS responces the string PID.
  })
  .then( (text) => {
    elOutput.innerHTML = "Accepted (ID: " + text + ").";
    elTriggerForm.reset();
      // https://developer.mozilla.org/docs/Web/API/HTMLFormElement/reset
  })
  .catch( (error) => {
    elOutput.innerHTML = error;
  });
}, false);
</script>