Traceability of uploaded files

Hi @ all,
in our online shop we want to create DIY-artworks for our costumer.
Therefor they need to upload pictures.
Unfortunately I cannot track the uploaded data with my orders.

Is there anyone with an idea of how to fix my problem?

Many thanks and greetings from Germany,
Christoph

Hi @christoph.aulenbrock,

Thanks for posting your question!

Can you tell me a bit more about your requirements and clarify what you mean by “tracking the uploaded data”?

Hi @Alex ,
thanks for your answer.
If a costumer orders an artwork he/she has to upload a picture which we personalize. The uploaded file has to stick with the order of the costumer.
Is it possible to combine order and e.g. PayPal-Checkout-form in “webflow” or is there the possibility to determine the filename? Instead of “image.jpg” we say “2020-05-14-15:30-image0001.jpg”?!

I hope this helps with my problem.

Thanks in advance.

Hi @christoph.aulenbrock

I’m sorry for the radio silence here! I don’t know much about how web stores work in Webflow, but I think the product page should have a form element with some product options (size, quantity, etc.). This form data should be saved in Webflow backend and accessible from an “orders” page of your admin interface. If you add the file uploader within this form, it will act as a form field. This means the file URL returned by the widget will be attached to the form data and available in the “orders” section. Therefore, it should be relatively easy to match an order with the corresponding file by its URL attached to the order. If this doesn’t help, would you be able to share a link to your website so that I can take a closer look at it?

Hi - I have the same question. Basically, once a customer uploads a picture through Uploadcare, I would like to be able to perform two things:

  • Display the picture or at least its name in the checkout page if the customer proceeds to purchase the product.
  • Somehow see the uploaded picture or its identification (even UUID would work) in the orders page in Webflow.

Would really appreciate the help.

Mert

Hi @Mert_Deveci

Once a file is uploaded, you can obtain its information using the JS API of the widget

// get a widget reference
const widget = uploadcare.Widget("[role=uploadcare-uploader]");

// listen to the "upload completed" event
widget.onUploadComplete(fileInfo => {
  // get a CDN URL from the file info
  const cdnUrl = fileInfo.cdnUrl;
  // get filename from the file info
  const name = fileInfo.name;
  // get uuid from the file info
  const uuid = fileInfo.uuid;
});

You can then save this data in Webflow backend along with other order details. On the cart and checkout pages, you’ll need to retrieve these variables and render them in the way you want.

I do this in the order selection page but my trouble is how to display the same picture ordered by the customer in the checkout page. Here are the pages of the website: