qBKWGQX

index.html

<div
     style="padding: 2rem; max-width: 800px; margin: auto; line-height: 1.5"
     >
  <main>
    <h1 id="dark-theme">Dark theme</h1>
    <p>This Uppload example uses a dark theme instead of a light theme.</p>
    <p>
      You can
      <strong
              ><a
                  href="https://github.com/elninotech/uppload-examples/tree/master/examples/dark"
                  >view the source code</a
        ></strong
        >
      of this example or
      <a
         href="https://codesandbox.io/s/github/elninotech/uppload-examples/tree/master/examples/dark"
         >try it on CodeSandbox</a
        >
    </p>
    <p style="opacity: 0.5">Click on the button below to try this demo.</p>
    <img alt="" class="uppload-image" />
    <button class="pure-button pure-button-primary">
      Upload
    </button>
  </main>
  <footer style="margin-top: 4rem">
    <h2>Uppload</h2>
    <p>
      Uppload is a better JavaScript image uploader. It's highly
      customizable with 30+ plugins, completely free and open-source, and
      can be used with any file uploading backend.
    </p>
    <a href="https://github.com/elninotech/uppload" class="pure-button"
       >GitHub</a
      >
    <a href="https://uppload.js.org" class="pure-button">Docs</a>
  </footer>
</div>

qbkwgqx.markdown

qBKWGQX

A Pen by L3DLP on CodePen.

License.

script.typescript

import { Uppload, en, Local, Preview } from "https://cdn.skypack.dev/[email protected]";
import "https://cdn.skypack.dev/[email protected]";
import "https://cdn.skypack.dev/[email protected]";

const uploader = new Uppload({
  lang: en,
  call: ".pure-button-primary",
  bind: ".uppload-image",
  value: "https://via.placeholder.com/150x150",
  inline: true,
  uploader: (file, updateProgress) =>
    new Promise(resolve => {
      console.log("Uploading file...", file);
      setTimeout(() => resolve(window.URL.createObjectURL(file)), 2750);
      let progress = 0;
      const interval = setInterval(() => {
        if (progress > 99) clearInterval(interval);
        if (updateProgress) updateProgress(progress++);
      }, 25);
    })
});

// Services
uploader.use([new Local()]);

// Effects
uploader.use([new Preview()]);

// Logging
console.log(uploader);
uploader.on("*", (...params: any[]) => {
  console.log(params);
});

style.css

a {
  color: #0078e7;
}
.uppload-image {
  display: block;
  margin-bottom: 1rem;
}

styles

<link href="https://unpkg.com/uppload/dist/uppload.css" rel="stylesheet" />
<link href="https://unpkg.com/uppload/dist/themes/light.css" rel="stylesheet" />