Bulk Importing Markdown/HTML Assets

Ango Hub supports importing Markdown/HTML assets in bulk using a single JSON file.

Preparing the JSON

Your JSON file will need to be in the following format:

[
    {
        "externalId":"my_external_id_1",
        "data":"<div style='font-size:13px;font-weight:500;display:flex;'><div style='width:100px;color:gray'>Serial No</div>: 1</div>"
    },
    {
        "externalId":"my_external_id_2",
        "data":"<div style='font-size:13px;font-weight:500;display:flex;'><div style='width:100px;color:gray'>Serial No</div>: 1</div>"
    }
]

Your JSON will be a list of objects. Each object will be a single asset in Ango Hub, and will need to contain an externalId property and a data property. The externalId will be used by Ango Hub to identify your asset. The data is the Markdown/HTML content itself.

You will need to flatten your markdown/HTML to fit a single line, and to convert all double quotes contained within the string (") to single quotes (').

Failure to do so will result in the Markdown/HTML files not being imported correctly or at all.

We strongly recommend you ensure externalIDs are unique, or you may not be able to distinguish between some assets when exporting them, or when using pre-labels.

External IDs are one of the two ways used to identify assets on Ango Hub, together with the asset's file path. However, markdown/HTMLs uploaded this way (embedded) have no file path.

Embedded markdown/HTML assets are being directly uploaded and stored into Ango Hub's database as strings, where the file path would normally be.

This means that the only way to distinguish between embedded Markdown/HTMLs is either through their data content, or by their externalIds. As such, if you upload two embedded markdown/HTMLs with the same content and the same external ID, you will not be able to distinguish between them when obtaining the export.

You will still be able to distinguish between different labeling tasks, as Ango Hub assigns a unique ID to each task.

Ango Hub will not warn you if you upload more than one asset with the same externalIdand will continue to work as usual.

CSS that is embedded in the HTML of your asset will be processed last by the Ango Hub webpage, meaning that it has the potential to alter the way Ango Hub looks when the asset is opened.

When using embedded CSS in your HTML, we strongly recommend using identifiers that are unique and specific to your asset to prevent this.

Linking to files in private buckets

If you wish to link to content present in a storage location you have already connected to Ango Hub through a storage integration, you will need to append, after the link to the resource, the ?storageId=xxx property, where xxx is the ID of the integration to the storage where the file is located. You may find this ID in the Storages tab in the Organization page, or from the get_storages() SDK function.

For example, the following is an asset containing a link to an image in a private bucket you have already connected to Ango Hub:

[
  {
    "data": "<html> <head> <title>Images in a Row</title> <style>  .image-row-asset {   display: flex;   justify-content: space-around;   margin-bottom: 20px;  }  img {   width: 30%;   height: auto;  }  .header, .footer {   text-align: center;   margin: 20px 0;  } </style> </head> <body> <div class='header'>  <h1>Header Placeholder Text</h1> </div> <div class='image-row'>  <img src='https://your-bucket-name.s3.your-aws-region.amazonaws.com/your-file-name.png?storageId=65e5834da3e56300155a7305' alt='Placeholder Image 1'> </div> <div class='footer'>  <h2>Footer Placeholder Text</h2> </div> </body> </html>",
    "externalId": "custom-html-asset"
  }
]

Uploading the JSON

From the UI

From your project's dashboard, enter the Assets tab, then click on the Add Data button. A dialog will appear. Enter the Cloud Upload tab and drag and drop your JSON in the upload box.

Click on Upload to upload your markdown/HTML assets.

From the SDK

Using the upload_files_cloud()function, you may upload bulk Markdown/HTML assets like so:

direct_json = [
   {
      "externalId": "1",
      "data": "<MARKDOWN/HTML CONTENTS HERE>"
   },
   {
      "externalId": "2",
      "data": "<MARKDOWN/HTML CONTENTS HERE>"
   }
]

res = ango_sdk.upload_files_cloud(
   project_id='<YOUR_PROJECT_ID>',
   assets=direct_json
)

PreviousImporting Data in the 3D Multi-Sensor Fusion Labeling Tool NextImporting Attachments during Asset Import

Last updated 2 months ago