Use Tap Warp As The Image Upload App For Your Website

Tap Warp is an app specialized in photo upload.  Tap Warp is not bound to specific websites, so every website can adopt it easily.  By using Tap Warp, there will be no need to develop a photo upload app each time a website is built.  It suffices to build a simple server side only.  As a result, development costs are largely reduced.

For simple usage of Tap Warp, a guidance is available at the demonstration website.

In the following texts, I would like to demonstrate a typical workflow about adopting Tap Warp.

1. Decide Some Settings And Build the JSON Code

Very basically, let fix the following items.

Recipient of images(targetUrl): A web entry point that accepts photo data through POST method of HTTP/HTTPS requests.  Details will be stated later.
Recipient’s display name(realm): This name will be displayed to user, when the user obtains where to upload photos.  Please choose a succinct and understandable one.  If not specified, host name of the recipient server will be used.
Authentication key(authKey): To ensure that only proper senders send photos according to information provided by you (the site administrator), a valid authentication key is required.  This is a random alphanumeric ASCII string of 64~128 bytes.

In the above, targetUrl and authKey are required.

Simply summarizing, it forms the following JSON code.

This JSON code is called a target code.

2. Make the QR code

Convert the above JSON code into a QR code.

sampleqrcode_201610011537Use whatever tool you like.  For PHP, phpqrcode is an easy choice.

A created QR code looks like the one shown on the right side of the page.

This QR code contains all information regarding the recipient. Display the QR code on your website, and let your user can scan it.

3. Populate Photo Receiving API

As Tap Warp sends photos to your server, it sends via HTTP’s POST method.  A request body is a JSON text.  The details can be found in the API reference.

As a recipient of data from Tap Warp, suitable headers must be included in responses.

But before that, make sure that your server accepts the OPTIONS method of HTTP.  Please consult respective server configuration manual for guidance, or try to google it.

In response to OPTIONS and POST requests, something like the following headers should be returned.

Note that without returning Access-Control-Allow-* headers, your website will not be able to receive data.

Data that a recipient server receives is in JSON format.  Decode it to obtain the contents.

First to confirm the authKey.  Check that data are sent from proper users.  This authKey was sent to the user in the target code.  Verify it with the one in your database, or so, to reject inproper users.

Photo format is in the format property, it is "image/jpeg“.

Photo data is in the data property, and encoded in Base64.

Collecting together, a simple receiving API can have the following codes.

4. Summary

Tap Warp is a very useful tool for websites that constantly need upload many photos, especially online shops and varies kinds of online market places.  It is no longer necessary to build a website specific app for photo uploads.  Get rid of time and costs of app developments, shortening development cycles, make your system proposals more charming.  Have a try!  Why not?

Leave a Reply

Your email address will not be published. Required fields are marked *