Printcart logo

Uploader SDK

The Printcart Uploader SDK lets a buyer upload their own print file straight onto a product side, for storefronts that sell print-your-own-art products rather than ones built in the designer. This page covers installing the package from npm, Yarn or a CDN, and the parameters, methods and events the uploader exposes.

Updated . Maintained by the Printcart team.

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/uploader-sdk@1.0.8/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/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 (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);
});

Related docs

Questions & answers

What is the Uploader SDK for?

Letting a buyer upload their own print-ready artwork to a product side, instead of using the Design Tool to create one from scratch.

What does it need to run?

A Printcart public (unauth) token and a productId, the same credentials the Design Tool SDK uses.

How do I install it without a build step?

Include the CDN-hosted script from unpkg and construct PrintcartUploader after the DOM has loaded, the same pattern as the Design Tool SDK.

Can you work with a merchant in my country?

Yes. Printcart services are delivered remotely, so we work with merchants in any country. Netbase JSC, the company behind Printcart, has worked with clients in 80+ countries.

Do you support my industry?

Printcart services are not tied to one industry. Full stores, custom development, integration and support are delivered remotely; tell us what you sell and we will say plainly whether Printcart fits.

How do I pay securely?

You sign the contract with and pay the company, Netbase JSC. App plans are billed through Shopify or Wix for stores on those platforms, and through PayPal for WooCommerce and direct stores. Full-store orders on solution.printcart.com check out through PayPal. Service work is quoted in writing in your Helpdesk ticket before any payment.

Who do I talk to?

Talk to our CEO, Huy Nguyen (David), on WhatsApp at https://wa.me/84937869689 or by email at support@printcart.com.

Sources