JSFiddle - React, Tailwind, and code Playground

File upload & image resize (Cordova example from Redcar)

by tonytlwu

HTML

<div class="container-fluid">
  <div class="row">
    <div class="container rcbc-settings">
      <div class="row">
        <div class="col-xs-12 col-lg-8">
          <form id="report-it" data-autotrack="">
            <fieldset>
              <div class="form-group" data-validation-rule="textrule">
                <h3 id="display-category">&nbsp;</h3>
                <h4 id="display-description">&nbsp;</h4>
                <div class="col-sm-12 text-center">
                  <div class="buttonControl link-button-secondary ui-button find-location"><span class="glyphicon glyphicon-map-marker"></span> Select Location</div>
                </div>
                <!-- <div class="form-btn-wrapper clearfix">
                                    <button value="saved-details" class="buttonControl link-button-tertiary ui-button pull-right find-location">Use Saved Details</button>
                                </div>
                                <br /> -->
                <!--location data-->
                <input id="latitude" name="latitude" value="NA" data-label="latitude" type="hidden" class="form-control">
                <input id="longitude" name="longitude" value="NA" data-label="longitude" type="hidden" class="form-control">
                <!--end location data-->
                <input id="category" name="category" value="NA" data-label="category" type="hidden" class="form-control">
                <input id="description" name="description" value="NA" data-label="description" type="hidden" class="form-control">
                <label class="col-sm-6 control-label" for="name">Name*</label>
                <div class="col-sm-6">
                  <input id="name" name="name" value="" data-label="name" type="text" class="form-control validation" placeholder="Enter your name.">
                </div>
                <br>
                <label class="col-sm-6 control-label" for="email">Email*</label>
                <div class="col-sm-6">
                 ...

CSS

</style> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBrg7PDfmgJPgQAQTW4cn5Rpeiqp_FUSMM" type="text/javascript"> <style> .btn-file {
  position: relative;
  overflow: hidden;
  background-color: rgba(0, 101, 189, 0.8) !important;
  border: 2px solid #0065bd;
  border-radius: 0;
  color: #FFF;
}

.btn-default:hover {
  background-color: rgba(0, 101, 189, 0.8) !important;
  border: 2px solid #0065bd;
  border-radius: 0;
  color: #FFF;
}

.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  background: white;
  cursor: inherit;
  display: block;
}

JavaScript

document.addEventListener('flAppReady', function() {
  // Empty PV data structure
  var dataStruct = {
    username: '',
    email: '',
    uprn: '',
    address: '',
    postcode: '',
    category: '',
    description: ''
  };

  // Initialise persisted data
  window.pvSettingsObj = new PV('settings', dataStruct, function() {
    var event = new CustomEvent(
      "settingsInitialised", {
        detail: {
          message: 'PV Loaded Successfully'
        },
        bubbles: true,
        cancelable: true
      }
    );
    document.dispatchEvent(event);
  }, function() {
    var event = new CustomEvent(
      "settingsFailed", {
        detail: {
          message: 'Failed Loading PV'
        },
        bubbles: true,
        cancelable: true
      }
    );
    document.dispatchEvent(event);
  });
});

document.addEventListener('settingsInitialised', function() {

  console.log(window.pvSettingsObj.data.description);
  $('#name').val(window.pvSettingsObj.data.username);
  $('#email').val(window.pvSettingsObj.data.email);
  $('#category').val(window.pvSettingsObj.data.category);
  if (!window.pvSettingsObj.data.description == '') {
    $('#description').val(window.pvSettingsObj.data.description);
  }
  $('#display-category').hide().text(window.pvSettingsObj.data.category).fadeIn(250);
  if (window.pvSettingsObj.data.description != "") {
    $('#display-description').hide().text(window.pvSettingsObj.data.description).fadeIn(250);
  }

});

$(document).ready(function() {


  document.addEventListener('flAppReady', function() {

    //Nic's attempt to see if the change event fires at all - can be deleted
    // $(document).on('change', '#BinaryFile', function() {
    //     invalidFormMessage += "Change captured";
    //     $('#validationError').text(invalidFormMessage);
    //     $("#validationError").removeClass('hidden');
    // });

    //Nic's code for checking file size before a submit - message needs changing, just a test at the moment.
    // var...