Customizable product integration with Printful

[ElectricSheep1]

I'm building a Shopify store where customers can create their own artwork then apply that artwork to a product they can order. I know there are Printful templates that allow product customization through local file uploads for images, but that's not quite what I'm looking for. I want my process to be smooth and automated - for example:

1. Customer creates artwork

2. Customer selects "Print my artwork"

3. Artwork is automatically applied to product template for ordering

4. Placed order is automatically fulfilled by Printful

It seems the out-of-the-box integration will either require the customer to manually download and upload their image to a compatible customizable product template, or it would require me to manually apply their image to a Printful order after the Shopify order comes through.

I can handle some custom dev work for end-to-end automation, but could use guidance on the best way to do this. I imagine I'll need to use the Printful API for a custom integration like this.

[PaulNewton]

You need to exhaust feasibility on Printfuls side of things what they can support either in frontend capability, or backend apis.

---

@ElectricSheep1 wrote:

It seems the out-of-the-box integration will either require the customer to manually download and upload their image to a compatible customizable product template, or it would require me to manually apply their image to a Printful order after the Shopify order comes through.

Check if it just has a file api you can just pipe a file, base64, blob ,etc on the frontend, if so then a middelware app might only be needed if working on very large files.
Or if the target input has clipboard paste behavior, if so then just prompt the user to copy the canvas or img to the clipboard. Note clipboard is protected so javascipt can't just arbitrarily add things to a users clipboard for obvious security/sanity reasons. 

Midnight spitball,  afaik browsers native OS file inputs don't 🤔 allow programmatically inserting a file into them as they require user interaction 😕. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#notes 

Javascript based ones can https://pqina.nl/filepond/ .

Most file inputs work with drag an drop but again afaik you cannot drag onpage "files" like canvas or <img> elements into a native file input it just navigates the page to that img or opens the image in a new tab 🤔; BUT if there is a way you can drag an onpage asset to a native-file input then you can obfuscate the entire upload process possibly by presenting a file-input as a "staging" or "confirm selection" box in UX flow. But lots of ifs there also considering that a target native file-input would be part of printfuls frontend UI you'd have to nab and recontextualize. At least in chrome on this page https://pqina.nl/filepond/ you can drag the onpage profile picture near the bottom of the page into one of the demo inputs, though it may just be fetching the image through the url. 

[ElectricSheep1]

Thanks for this. I'll definitely reach out to Printful to see what they support, and I was not aware of the OS file input limitations. A drag and drop scenario would work well for me, I just want to avoid a situation where an image needs to be downloaded and then uploaded again - but it looks like there could be a workaround depending on the file types that the Printful API accepts. I'll start looking through their API docs.

[Antonios]

Any luck on this ? I wanted to create a similar thing