🍷 Digital Wine Cellar – Pattern Library

Upload form 

<form action="#" method="post" class="upload-form">

    <p>Use this form to upload your wine cellar. To make things as smooth as
        possible, we’ve got a spreadsheet template that you can use to ensure that
        you data is uploaded properly.</p>

    <p><a href="#"><svg class="icon " height="16" width="16" aria-hidden="true">
                <use xlink:href="../../sprite.svg#file-spreadsheet" />
            </svg>
            Download the spreadsheet template.</a></p>

    <div class="file-input">
        <label>
            <em class="upload-message">Drop your filled out template file here, or click to select the file from your device.
            </em>
            <input id="file-upload" name="files" type="file">
            <span id="upload-info"></span>
        </label>
    </div>

    <div class="submit-area">
        <button type="button" data-prototype-url="../preview/wine-matching.html">
            <span>
                <span>Upload</span>
            </span>
        </button>
    </div>

</form>
 
<form action="#" method="post" class="upload-form">

  <p>Use this form to upload your wine cellar. To make things as smooth as
    possible, we’ve got a spreadsheet template that you can use to ensure that
    you data is uploaded properly.</p>

  <p><a href="#">{{> @svg icon="file-spreadsheet" height="16" width="16" }} Download the spreadsheet template.</a></p>

  <div class="file-input">
    <label>
      <em class="upload-message">{{upload-message}}</em>
      <input id="file-upload" name="files" type="file">
      <span id="upload-info"></span>
    </label>
  </div>

  <div class="submit-area">
    {{> @button upload-submit }}
  </div>

</form>
 
{
  "upload-message": "Drop your filled out template file here, or click to select the file from your device.\n",
  "upload-submit": {
    "text": "Upload",
    "prototype-url": "/components/preview/wine-matching"
  }
}
  • Content: 
    /**
 * fileUpload
 *
 * Display how many files have been selected for upload
 * in a message in the custom upload component.
 */

'use strict';

(function () {
  const fileUpload = document.querySelector('#file-upload');
  const fileUploadLabel = document.querySelector('.file-input label');

  if (!fileUpload) return;

  fileUploadLabel.addEventListener('click', function (event) {
    event.stopPropagation();
  });

  fileUpload.onchange = function () {
    const uploadInfo = document.getElementById('upload-info');

    if (this.files.length == 1) {
      uploadInfo.innerText = this.files.length + " file selected for upload";
    } else {
      uploadInfo.innerText = this.files.length + " files selected for upload";
    }
  };
})();
  • URL: /components/raw/upload-form/fileUpload.js
  • Filesystem Path: components/03_organisms/upload-form/fileUpload.js
  • Size: 743 Bytes
  • Content: 
    /**
 * Custom file upload form
 */

@media screen {

  .upload-form label {
    display: block;
    border: 3px dashed var(--mid-grey);
    background-color: var(--white);
    padding: 4em;
    text-align: center;
    position: relative;
    margin: 1rem 0;
    max-width: 24rem;
    font-weight: 400;
  }

  .upload-message {
    font-size: 1.2em;
  }

  #upload-info {
    position: absolute;
    bottom: 1em;
    left: 0;
    right: 0;
    font-style: italic;
  }

  .upload-form input[type="file"] {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    opacity: 0;
  }
}
  • URL: /components/raw/upload-form/upload-form.css
  • Filesystem Path: components/03_organisms/upload-form/upload-form.css
  • Size: 621 Bytes

Upload form

This component uses a small JavaScript to display how many files have been selected for upload before the user submits the form.