Examples of code for article «Improve the user experience of work with web forms»

dd-files.js

var file = document.querySelector('[type=file]');
var dropzone = document.querySelector('.wrapper');

file.addEventListener('change', function() {
  previewImages(this.files);
  this.value = '';
}, false);

dropzone.addEventListener('dragover', function(event) {
  event.preventDefault();

  dropzone.classList.add('active');
  event.dataTransfer.dropEffect = 'copy';
}, false);

dropzone.addEventListener('drop', function(event) {
  event.preventDefault();

  dropzone.classList.remove('active');
  previewImages(event.dataTransfer.files);
}, false);

filereader-to-formdata.js

var data = new FormData(form);

queue.forEach(function(element) {
  data.append('image', element.file);
});

filereader.js

document.querySelector('[type=file]').addEventListener('change', function() {
  [].forEach.call(this.files, function(file) {
    if (file.type.match(/image.*/)) {
      var reader = new FileReader();

      reader.onload = function(event) {
        var img = document.createElement('img');
        img.src = event.target.result;

        div.appendChild(img);

        queue.push({file: file, element: img});
      };

      reader.readAsDataURL(file);
    }
  });
}, false);

form-validate.js

submit.disabled = !form.checkValidity();

formdata.js

form.onsubmit = function(event) {
  if (window.FormData) {
    event.preventDefault();

    var data = new FormData(form);
    var xhr = new XMLHttpRequest();
    var url = form.getAttribute('action') + '?time=' + (new Date()).getTime();

    xhr.open('post', url);
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && xhr.status == 200) {
        // server response: xhr.responseText
      }
    };
    xhr.send(data);
  }
};

input-file.html

<input type="file" name="image" accept="image/*" multiple>

localstorage.js

if (window.localStorage) {
  var elements = document.querySelectorAll('[name]');

  for (var i = 0, length = elements.length; i < length; i++) {
    (function(element) {
      var name = element.getAttribute('name');

      element.value = localStorage.getItem(name) || '';

      element.onkeyup = function() {
        localStorage.setItem(name, element.value);
      };
    })(elements[i]);
  }
}

preview-images.js

function previewImages(files) {
  [].forEach.call(files, function(file) {
    if (file.type.match(/image.*/)) {
      var reader = new FileReader();

      reader.onload = function(event) {
        var img = document.createElement('img');
        img.src = event.target.result;

        div.appendChild(img);

        queue.push({file: file, element: img});
      };

      reader.readAsDataURL(file);
    }
  });
}

response-type.js

var xhr = new XMLHttpRequest();

xhr.open(method, url);
xhr.responseType = 'json';

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    // server response: xhr.response
  }
};

xhr.send();

xhr-progress.js

var xhr = new XMLHttpRequest();

xhr.upload.addEventListener('progress', function(event) {
  if (event.lengthComputable) {
    progress.value = Math.round((event.loaded * 100) / event.total);
  }
}, false);

Examples of code for article «Improve the user experience of work with web forms» — http://simonenko.su/38146501854/improving-ux-for-web-form