Migration guide for @uploadcare/blocks v0.47.0

BREAKING CHANGES

All the API methods described at File Uploader API have been removed from the lr-upload-ctx-provider block, so they are no longer available directly. Now, they are available at the Uploader API instance that you can get using getAPI() method of the lr-upload-ctx-provider block.

This was needed to split the Uploader API from the native DOM element API. As a result, code suggestions in your IDE will be more accurate.

Events are still dispatched by the lr-upload-ctx-provider block, so you can still subscribe to them.

How to migrate

Case 1 - you’re not using the lr-upload-ctx-provider block’s API methods

In this case, you don’t need to do anything.

Case 2 - you’re using the lr-upload-ctx-provider block’s API methods

Before the migration, you might have been using the lr-upload-ctx-provider block’s API methods like this:

1
// Get the DOM element reference that also is the Uploader API instance
2
const ctx = document.querySelector('lr-upload-ctx-provider')
3
4
// Call the Uploader API method
5
ctx.initFlow()

After the migration, you need to get the Uploader API instance using the getAPI() method of the lr-upload-ctx-provider block:

1
// Get the DOM element reference
2
const ctx = document.querySelector('lr-upload-ctx-provider')
3
4
// Get the Uploader API instance
5
const api = ctx.getAPI()
6
7
// Call the Uploader API method
8
api.initFlow()

Extended case - you’re using some undocumented methods like ctx.$ or ctx.setOrAddState

There are some undocumented internal methods that you might have been using. We’ve proposed them to some of our users as a workaround for some issues or for some specific use cases.

They are still available, and you can use them as before.

Some of them became documented and moved to the Uploader API instance. Therefore, we recommend you to use the Uploader API instance methods instead of these undocumented methods.

If you were using the undocumented methods that aren’t listed below - please let us know.

Switching the current activity

You might have been switching the current activity using the ctx.$ method like this:

1
ctx.$['*currentActivity'] = 'upload-list'

After the migration, you need to use the setCurrentActivity method of the Uploader API instance:

1
const api = ctx.getAPI()
2
api.setCurrentActivity('upload-list')

See the Uploader API for more details.

Toggling modal dialog visibility

You might have been toggling the modal dialog visibility using the ctx.$ or ctx.setOrAddState method like this:

1
ctx.$['*modalActive'] = true
2
// or
3
ctx.setOrAddState('*modalActive', true)

After the migration, you need to use the setModalState method of the Uploader API instance:

1
const api = ctx.getAPI()
2
api.setModalState(true)

See the Uploader API for more details.