file_upload.htm

<!-- Filepond stylesheet -->
<link href="https://unpkg.com/filepond/dist/filepond.min.css" rel="stylesheet">

<div class="doublecolumn" style="text-align:center;">
  <!-- max-width: 50%; -->
  <br/>
  <img id='imraw' src='demo/Picture1.jpg' style="width:100%;border: 3px solid black" />
  <br/>
  <br/>
  <div style="white-space:nowrap; ">
    <!-- overflow-x: scroll -->
    Click ►
    <img class='demo_pics' src="demo/Picture2.png">
    <img class='demo_pics' src="demo/out_of_focus0689.jpg">
    <img class='demo_pics' src="demo/motion0114.jpg">
    <img class='demo_pics' src="demo/Picture1.jpg">
    <img class='demo_pics' src="demo/i07_08_5.bmp">
    <img class='demo_pics' src="demo/i07_08_4.bmp">
    <!-- <img class='demo_pics' src="demo/Picture3.jpg"> -->
    <!-- <img class='demo_pics' src="demo/NoisyLady.png"> -->
  </div>
  <br/>
  <input type="file"
       class="filepond"
       name="filepond"
       style="height: 500" id='filepond' />
  <!-- <div class="alert alert-primary" role="alert">
    Step 1: upload your file:
  </div> -->
</div>
<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
<!--
<link href="filepond/filepond.min.css" rel="stylesheet">
<script src="filepond/filepond.min.js"></script> -->
<script type="text/javascript">
// https://pqina.nl/filepond/docs/patterns/getting-started/
// const pond = FilePond.create(); // document.querySelector('.filepond');
// FilePond.setOptions();
const pond = FilePond.create(
  document.querySelector('#filepond'),
  {
      maxFiles: 1,
      server: {
          // url: 'http://localhost:8080',
          // url: 'https://10.157.89.130',
          // https gives ERR_CONNECTION_REFUSED
          url: 'https://paq2piq.appspot.com',
          process: {
              url: '/filepond',
              method: 'POST',
              withCredentials: false,
              crossDomain: true,
              headers: {},
              timeout: 7000,
              onload: (response) => {
                 console.log(response);
                 window.obj = JSON.parse(response);
                 update_qmap();
              },
              onerror: null,
              ondata: null,
          }
      },
  }
);
pond.onaddfile = function (error, file) {
    console.log('File added', file);
    if (error) {
        console.log('Oh no');
        return;
    }
    f = window.URL.createObjectURL(pond.getFile().file)
    //console.log(pond.getFile().file)
    //console.log(f)
    img = document.querySelector('#imraw')
    img.src = f
    // image might contain white padding...
    console.log({
      width:img.width, height:img.height,
      clientWidth:img.clientWidth, clientHeight:img.clientHeight,
      naturalWidth:img.naturalWidth, naturalHeight:img.naturalHeight,
       // realWidth:pic_real_width, realHeight:pic_real_height,
      height:(img.naturalHeight) * img.clientWidth/img.naturalWidth})
  }
// FilePond.parse(document.body);
// pond.onaddfile(
//   function (error, file) {
//     console.log('File added', file);
//     if (error) {
//         console.log('Oh no');
//         return;
//     }
//     f = window.URL.createObjectURL(pond.getFile().file)
//     //console.log(pond.getFile().file)
//     //console.log(f)
//     document.querySelector('#imraw').src = f
//   }
// )

//
// inputElement.addEventListener('FilePond:addfile', e => {
//   console.log('File added', e.detail);
//   if (error) {
//       console.log('Oh no');
//       return;
//   }
//   console.log('File added', file);
//   f = window.URL.createObjectURL(pond.getFile().file)
//   //console.log(pond.getFile().file)
//   //console.log(f)
//   document.querySelector('#imraw').src = f
//   // $('btn_im_only').trigger('mouseenter');
// });
//
//
// // update image after uploading
// document.addEventListener('FilePond:loaded', e => {
//     console.log('FilePond ready for use', e.detail);
//     const inputElement = document.querySelector('#filepond');
//     // pond.on('addfile', (error, file) => { //API change!!!
//     // });
//
// });
</script>