Web SDK

The Web SDK provides the same pre-built components used in our Web app to power your application.

Integrating SDK

To install the SDK into your application is as simple as adding a script tag and providing your API key as an attribute in the HTML.

<script src="https://unpkg.com/@autoenhance.ai/web" api-key="YOUR_API_KEY_GOES_HERE"></script>

You can specify a specific version of the SDK according to the rules documented here https://unpkg.com

To add the Autoenhance uploader into your application, you simply add our image-uploader Web component

<image-uploader name="order_id" required></image-uploader>

Now when the page has loaded you should see automatically the Autoenhance uploader. Your code should now look something like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Application</title>
  <script src="https://unpkg.com/@autoenhance.ai/web" api-key="YOUR_API_KEY_GOES_HERE"></script>
</head>
<body>
  <h2>Upload a photo to enhance</h2>
<form>
  <image-uploader name="order_id" required></image-uploader>
 <!-- This sends the order ID as "order_id" to your server where you can carry on communicating with Autoenhnace-->
  <input type="submit"/>
</form>
</body>
</html>

Attributes

Name

To specify that of the form filed sent to your server containing the order_id, then just provide a name attribute just like you would with any input field

<image-uploader name="order_id"></image-uploader>

Required

To specify that it's required to upload images to Autoenhance then just provide a required attribute just like you would with any input field

<image-uploader required></image-uploader>

Preferences

You can control the default enhancement settings sent to Autoenhance by providing a preferencesattrbiute containing JSON in the same format documented in our Reprocessing documentation

For example to specify the API version

<image-uploader preferences='{"ai_version": "4.0"}'></image-uploader>

Disable Status Bar

To hide the default upload bar shown in the uploader, simply pass true

<image-uploader disable-status-bar="true"></image-uploader>

Max Files

To maximum files a user can upload, simply pass a number. Defaults to 500 files.

<image-uploader max-files="50"></image-uploader>

Max Height

To set up how large in height the upload box can grow at maximum. It accepts string values and it must include the units after a number eg. 300px or 25rem.

<image-uploader max-height="500px"></image-uploader>Handling Uploaded Orders

Changing the theme - light or dark mode

To change the appearance (eg. dark mode) of the uploader specify a theme property. The property accepts two values - light or dark. The default value is set to light

<image-uploader theme="light"></image-uploader>

Handling Uploading Orders

There are two ways for your application to react to the user uploading an order with the image uploader.

Form Fields

If your image uploader is contained within a form, the Order ID for the Autoenhance Order will be submitted along side the rest of your form's data. Your server can then use this ID to communicate with the Autoenhance API to retrieve it's status and download the images.

Events

You can use event listeners to listen to the change, complete, progress and error events, in order to updae your applications UI state in response to a user's interaction with the uploader.

Here is an example

imageUploader.addEventListener("change", (e) => {
    console.log("change");
    console.log(e.target.files);
});

imageUploader.addEventListener("complete", (e) => {
    console.log("complete");
    console.log(e.target.value);
});

imageUploader.addEventListener("progress", (e) => {
    console.log("progress");
    console.log(e.detail.progress);
});

imageUploader.addEventListener("cancel-all", (e) => {
    console.log("cancel-all");
});

imageUploader.addEventListener("error", (e) => {
    console.log("error");
});

Properties And Methods

Files You can access the files selected to be uploaded by the user by accessing the files property

const uploader = document.querySelector('image-uploader');
console.log(uploader.files);

Upload You can programatically trigger the upload using the upload method on the web component

const uploader = document.querySelector('image-uploader');
uploader.upload();

Value To get the order ID that will be used by the uploader, you can use the value property the same as any other input field.

const uploader = document.querySelector('image-uploader');
console.log(uploader.value);

Example Projects

You can see some example projects which demonstrate how to use the Web SDK https://github.com/Autoenhance-ai/API-Code-Examples

PreviousGrouping Brackets and Processing Orders NextChangelog

Last updated 24 days ago