Skip to main content

Uploader SDK

Installation​

Using npm:

npm install @printcart/uploader-sdk

Using yarn:

yarn add @printcart/uploader-sdk

Using unpkg:

<script src="https://unpkg.com/@printcart/uploader-sdk@1.0.8/dist/main.js"></script>

Usage​

Using package:

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:

<script defer src="https://unpkg.com/@printcart/uploader-sdk@1.0.8/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.

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:

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

Methods​

open ​

Render and display Uploader.

Example

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

uploader.close();

locale ​

Get all localization text labels.

Example

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.

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

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

onload ​

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

Example

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

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

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