Forms

File upload

Choose files or drag them in. The list shows names, sizes and picture previews, and checks type and size.

Several files

The upload in this demo is simulated. Nothing leaves your computer.

Choose files or drag them here Pictures or PDF, up to 2 MB each, 4 files at most

HTML

<div class="pw-upload" data-pw-upload data-max-size="2" data-max-files="4" data-accept="image/*,.pdf" id="demo-upload">
  <label class="pw-upload-zone">
    <input type="file" name="files" multiple>
    <svg class="pw-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 16V4M7 9l5-5 5 5M4 20h16"/></svg>
    <span><b>Choose files</b> or drag them here</span>
    <small>Pictures or PDF, up to 2 MB each, 4 files at most</small>
  </label>
</div>

JavaScript

document.getElementById('demo-upload').addEventListener('pw:files', function (e) {
  var upload = Partwise.get(this, 'upload');
  e.detail.added.forEach(function (file) {          // put your real upload here
    var done = 0, timer = setInterval(function () {
      done += 20; upload.setProgress(file, done);
      if (done >= 100) { clearInterval(timer); upload.setStatus(file, 'done'); }
    }, 250);
  });
});

One file in a form

Without multiple, a new file replaces the old one. The file stays in the field, so a normal form submit sends it.

Add your CV PDF or Word, up to 5 MB

HTML

<div class="pw-upload" data-pw-upload data-accept=".pdf,.doc,.docx" data-max-size="5">
  <label class="pw-upload-zone">
    <input type="file" name="cv">
    <span><b>Add your CV</b></span>
    <small>PDF or Word, up to 5 MB</small>
  </label>
</div>

Options

Set them as attributes on the element.

Attribute	Default	What it does
`data-max-size`		Largest size of one file, in MB.
`data-max-files`		Most files in the list.
`data-accept`		Allowed types, like the `accept` attribute: `image/*`, `.pdf`, `application/zip`.
`data-preview`	`true`	`false` shows an icon instead of a small picture.

Events

Listen with addEventListener. Details are in event.detail.

Event	When
`pw:files`	With `files` (the whole list), `added` and `rejected` (each with a `reason`).
`pw:remove`	With `file`.

From your script

var u = Partwise.get('#demo-upload', 'upload');
u.files;                       // list of File objects
u.setProgress(file, 40);       // show a progress bar
u.setStatus(file, 'done');     // or 'error', with your own text as third value
u.clear();

Keyboard

Key	Action
`Enter` `Space`	On the drop area: open the file window
`Tab`	To each Remove button

Good to know

Sending the files to your server is your code, or a normal form submit. The component only collects and checks them.
Check type and size again on the server. Checks in the browser are a help for people, not a protection.
Files that are refused are listed with the reason.

Files

Everything is in dist/partwise.css and dist/partwise.js. To load only this component, use src/css/00-base.css and src/js/00-core.js plus: css/22-upload.css, js/22-upload.js.