Quikpik NPM | npm.io

quikpik

A file picker for evergreen browsers.

Drag and drop a file
Paste a file
Browse and select a file
Capture an image from your camera
Adjust images via crop and rotate

The hotness

Installation

Via NPM:

npm install quikpik

Or use unpkg:

<script src="https://unpkg.com/quikpik@0.0.23/dist/quikpik.js"></script>
<link rel="stylesheet" href="https://unpkg.com/quikpik@0.0.23/dist/quikpik.css"></script>

Usage

See types.d.ts for type definitions and documentation about the picker options.

Quikpik doesn't implement the upload for you, so the uploader is the one argument you must pass in. The following example shows how to upload a file to S3 using quikpik and XMLHttpRequest. Here, presigned is an object that contains S3 presigned post data.

// Result is either undefined (if the user cancels the picker)
// or it is the value returned from your upload function.
const result = await quikpik({
  upload({ file, onProgress }) {
    const xhr = new XMLHttpRequest();
    const data = new FormData();

    data.append('Content-Type', file.type);
    data.append('key', presigned.fullKey);
    data.append('AWSAccessKeyId', presigned.awsAccessKeyId);
    data.append('acl', presigned.acl);
    data.append('policy', presigned.policy);
    data.append('signature', presigned.signature);
    data.append('file', file);

    const promise = new Promise((resolve, reject) => {
      xhr.onreadystatechange = () => {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            resolve(xhr);
          } else {
            reject(xhr);
          }
        }
      };
      
      xhr.upload.addEventListener('progress', (e) => {
        onProgress(Math.ceil((e.loaded / e.total) * 100));
      });

      xhr.open('POST', presigned.url);
      xhr.send(data);
    });

    return {
      promise,

      cancel() {
        xhr.abort();
      },
    };
  },
});