Uploader SDK

Let buyers upload their own artwork to a product side.

Installation

Using npm:

text
npm install @printcart/uploader-sdk

Using yarn:

text
yarn add @printcart/uploader-sdk

Using unpkg:

text
<script src="https://unpkg.com/@printcart/[email protected]/dist/main.js"></script>

Usage

Using package:

text
import PrintcartUploader from "@printcart/uploader-sdk";

const designer = new PrintcartUploader({
  token: "your-printcart-unauth-token",
  productId: "your-product-id",
  options: {},
});

Using CDN-hosted copy of the library:

text
<script defer src="https://unpkg.com/@printcart/[email protected]/dist/main.js"></script>

<script>
  window.addEventListener("DOMContentLoaded", function () {
    const uploader = new PrintcartUploader({
      token: "your-printcart-unauth-token",
      sideId: "your-side-id",
      locale: {},
    });
  });
</script>

Parameters

token

  • Required
  • Type: string

Your Printcart Unauth Token. You can get your token from your Printcart dashboard (Settings).

sideId

  • Required
  • Type: string

The Product Side ID that you want to assign the design uploaded to.

locale

  • Optional
  • Type: object | undefined

Key - value pairs of text to override the Uploader's default text labels. Default values:

text
{
  "heading": "Design Upload",
  "dropTarget": "Drag and Drop your design here",
  "divider": "Or",
  "button": "Browse"
}

Methods

open

Render and display Uploader.

Example

text
const uploader = new PrintcartUploader({
  token: "your-printcart-unauth-token",
  sideId: "your-side-id",
});

const openUploaderButton = document.getElementById("your-button-id");

openUploaderButton.addEventListener("click", function () {
  uploader.open();
});

close

Unmount and hide Uploader.

Example

text
uploader.close();

locale

Get all localization text labels.

Example

text
var text = uploader.locale();

console.log(text);

// {
//   "heading": "Design Upload",
//   "dropTarget": "Drag and Drop your design here",
//   "divider": "Or",
//   "button": "Browse"
// }

on

Subscribe to an Uploader event. See below for full list of events.

text
uploader.on("event", actionCallback);

Events

Exposed events that you can subscribe in your app:

open

Fired when Uploader render finish and displayed to the screen.

Example

text
uploader.on("open", function () {
  console.log("Uploader opened.");
});

onload

Fired when Uploader render finish but before displayed to the screen.

Example

text
uploader.on("onload", function () {
  console.log("Uploader rendered.");
});

upload-success

Parameters:

  • response - Printcart API Response object.
  • file - The file object for the file whose uploaded.

Fired when all upload success.

Example

text
uploader.on("upload-success", function (response, file) {
  console.log("Response:", response);
  console.log("File:", file);
});

upload-error

Parameters:

  • error - The error object from Printcart API Response.

Example

text
uploader.on("upload-error", function (error) {
  console.log(error);
});