How do I get the ID of a video after successfully uploading with mux-uploader?

[jackmcdade]

I've followed these docs here and have uploads working, but can't figure out how to get the ID of the video I just uploaded. There's nothing useful in the success event and nothing in the docs explaining what to do next.

[hoggworks]

I was briefly excited to find that someone had asked this question, then disheartened to see that nobody has answered it.

[spoeken]

Did you figure it out @hoggworks?

[davekiss]

@jackmcdade @hoggworks @spoeken

Argh, apologies about the ghost town here, we need to get monitoring implemented on this channel.

You're right in saying there's a gap in our docs for this process. Taking a note to improve that on our end, but in the meantime, here's some more details on how to get the upload_id using Mux webhooks.

This approach allows you to asynchronously handle the upload and processing of videos, which can take some time depending on the size and complexity of the video. Webhooks will ensure that your application is notified as soon as the video is ready.

The overall flow generally looks like this:

1. Webhook setup

• Set up a webhook endpoint in your application to receive events from Mux
• Configure the webhook in your Mux dashboard to send events to this endpoint

2. Initial upload

• Create a direct upload URL using the Mux API
• Use the Mux Uploader component with this URL to handle the upload process

3. Handle webhook events

Listen for specific webhook events, particularly:

• video.upload.asset_created which indicates that the upload has completed and an asset has been created
• video.asset.ready which indicates that the video has been processed and is ready for playback

The video.upload.asset_created event contains the asset_id in the event payload.
The video.asset.ready event contains the playback_id in the event payload.

4. Store the information

Save the asset_id and playback_id to your database, associating them with the user or relevant entity in your application

5. Use the IDs

You can use the asset_id for any asset-specific operations via the Mux API. Use the playback_id to enable video playback in your application.

Note that this process happens asynchronously, so your application should be designed to handle the delay between the initial upload and when the video becomes available for playback.

For more detailed implementations, you can refer to the examples provided in the Mux documentation for various frameworks:

• Astro
• Next.js
• SvelteKit
• Remix

[spoeken]

Thanks for your reply @davekiss
I just wanted to add that this also is possible to do without storing the id in a database, but rather just in a state in the frontend for a quick and dirty setup. Then after the upload has finished you can check if it has finished processing every 15 seconds or so, when it has finished you can get the asset_id and retrieve all the info. Not the best to rely on the client like that, but it works for a one off thing.

I needed to create a sanity import ndjson file based off an exel sheet to group 396 videos into different entries, so there was some manual work that had to be done anyways. I want to make it clear that this is not something I would release to production, the workflow you describe @davekiss is infinitely more reliable.