Quick Drop

Quick Drop loads files into Nanome. Files you drag onto home.nanome.ai, up to 100 MB in all, load the next time you open Nanome on your headset or computer. home.nanome.ai keeps them for up to 24 hours and deletes them once they load. Other applications can use Quick Drop through Nanome's API to open files in Nanome.

Third-Party Integration

By default, Quick Drop is only available on the home.nanome.ai webpage. However, third-party applications can integrate Quick Drop into their own applications by using Nanome's API. The following sections describe how to integrate Quick Drop into your application.

Nanome made a PyMOL plugin that uses Quick Drop.

As of Nanome 1.24.4, Quick Drop has both a Nanome-hosted and a self-hosted version of Quick Drop. The APIs for these slightly differ, so please refer to the appropriate section below.

Nanome-hosted Quick Drop

The basic flow for uploading files to Nanome-hosted Quick Drop is as follows:

• Get user login token
• Send filenames to Nanome API to get S3 upload URLs
• Upload files to S3
• Notify Nanome that files are uploaded

The following code snippet demonstrates this flow:

const NANOME_API = 'https://api.nanome.ai'

// array of File or Blob objects from <input type="file" />
// or manually constructed from file data with new File() constructor
const files = [file1, file2]

// get user login token
const loginRes = await fetch(`${NANOME_API}/user/login`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
        login: 'username',
        pass: 'password'
    })
}).then(res => res.json())

const token = loginRes.results.token.value
const headers = { 'Authorization': 'Bearer ' + token, 'Content-Type': 'application/json' }

// get S3 upload URLs
const addRes = await fetch(`${NANOME_API}/quickdrop/add`, {
    method: 'POST',
    headers,
    body: JSON.stringify({
        filenames: files.map(f => f.name)
    })
}).then(res => res.json())

const urls = addRes.results
let done = 0

const onFileUploaded = async () => {
    if (++done != files.length) return

    // notify Nanome API that all files are uploaded
    await fetch(`${NANOME_API}/quickdrop/update`, {
        method: 'POST',
        headers
    })
}

// upload files to S3
for (const file of files) {
    fetch(urls[file.name], {
        method: 'PUT',
        body: file
    }).then(onFileUploaded)
}

Self-hosted Quick Drop

Self-hosted Quick Drop is slightly simplified compared to Nanome-hosted Quick Drop. Instead of uploading files to S3, the files are uploaded directly to the Quick Drop server.

The basic flow for uploading files to self-hosted Quick Drop is as follows:

• Get user unique ID from Nanome API
• Upload files to Quick Drop server
• Notify Quick Drop server that files are uploaded

The following code snippet demonstrates this flow:

const NANOME_API = 'https://api.nanome.ai'
const QUICKDROP_API = 'https://quickdrop.example.com'

// array of File or Blob objects from <input type="file" />
// or manually constructed from file data with new File() constructor
const files = [file1, file2]

// get user unique ID
const loginRes = await fetch(`${NANOME_API}/user/login`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
        login: 'username',
        pass: 'password'
    })
}).then(res => res.json())

const unique = loginRes.results.user.unique
let done = 0

const onFileUploaded = async () => {
    if (++done != files.length) return

    // notify Quick Drop server that all files are uploaded
    await fetch(`${QUICKDROP_API}/quickdrop/${unique}/update`, {
        method: 'POST'
    })
}

// upload files to Quick Drop server
for (const file of files) {
    fetch(`${QUICKDROP_API}/quickdrop/${unique}/upload/${file.name}`, {
        method: 'POST',
        body: file
    }).then(onFileUploaded)
}