Create and Upload Assets via the API

From a public URL

When using the createAsset mutation, setting the sourceUrl property to a publicly accessible URL will automatically download the file for you. You'll need to set the filename property to the name you want and to set the uploadStatus property to "PENDING". The upload process will set the correct pathproperty for you.

mutation {
  createAsset(input: {
    path: "/",
    filename: "homepage-illustration.jpg",
    sourceUrl: "https://www.takeshape.io/assets/images/homepage/homepage-illustration.png",
    uploadStatus: "PENDING"
  }) {
    result {
      path
      filename
    }
  }
}

From a file

Uploading files, like from a form submission, happens in two parts:

First, you’ll send TakeShape a GraphQL query using the uploadAssets mutation. The mutation takes a list of TSFile objects, which have two properties: a name, which is a filename like cats.jpg; and a type, which is a MIMEtype like image/jpeg. It returns a list of created asset records with an accompanying uploadUrl, which you’ll need for the next part.

query

mutation($files: [TSFile]!) {
  uploadAssets(files: $files) {
  uploadUrl
    asset {
      path
      filename
    }
  }
}

variables

{
  "files": [
    {
      "name": "image.jpg",
      "type": "image/jpeg"
    }
  ]
}

After you’ve created the asset records and gotten their upload URLs, you’ll need to send a PUT request to the uploadUrl with the file in the request’s body. If the request is successful, you’ll get an empty 200 response back and your assets will be available in your TakeShape project’s Asset Library.

Example code

This example Node.js script demonstrates the process of submitting a single file to your TakeShape Asset Library:

const fs = require('fs')
const superagent = require('superagent')

// Setting up the sample code.
// Make sure we have an API_TOKEN and a PROJECT_ID from TakeShape.
const PROJECT_ID = 'XXXX'
const API_TOKEN = 'XXXX'
// Make sure we have some binary image data to upload
const image = fs.readFileSync(`${process.cwd()}/image.jpg`);

// This helper method submits arbitrary queries to TakeShape and returns the response
async function queryTakeShape(query) {
  const res = await superagent
    .post(`https://api.takeshape.io/project/${PROJECT_ID}/graphql`)
    .set('Authorization', `Bearer ${API_TOKEN}`)
    .set('Content-Type', 'application/json')
    .send(JSON.stringify({query}))
  if (!res.ok) throw Error(res.status + ' ' + res.statusText)
  return res.body
}

// This helper method uploads binary file data to an arbitrary URL
async function uploadFileToUrl(file, url) {
  const res = await superagent.put(url).send(file)
  if (!res.ok) throw Error(res.status + ' ' + res.statusText)
  return res.body
}

const uploadAssetsQuery = `mutation {
  uploadAssets(files: [
    {
      name: "image.jpg",
      type: "image/jpeg"
    }
  ]) {
    uploadUrl
    asset {
      path
      filename
    }
  }
}`

async function main() {
  const queryRes = await queryTakeShape(uploadAssetsQuery)
  for (const uploadedAsset of queryRes.data.uploadAssets) {
    const res = await uploadFileToUrl(image, uploadedAsset.uploadUrl)
    console.log(res)
  }
}

main()