You will see a directory of various folders, navigate to the folder where you want to host your media from.
From here there are two options for adding your media.
You can click the three dots to the right of your directories name (the dots are invisible unless you hover your mouse over the title). This will expand out a panel where you can choose from a folder, image, or file to add. One you choose either file or image it will redirect you to a page where you will need to enter the name (at the top) and upload the image/file. Once this is done, simply click the green "Save and publish" button located at the bottom right of the screen.
The other method is look towards the center of the page where there will be an image labeled "- or click here to choose files", click it. This will open up a new window that will allow you to navigate through your file system for the file you want to upload. Once you find and select you file, a new panel will expand out from the left of the interface which will prompt you to select either file or image (correlating to what you're uploading). Once you make your choice then you simply need to click the green "Save" button located at the bottom right of your screen and you're done.
Updating Media in Umbraco
You may need to update you media for a variety of reasons. In order to do this, you will need to jump to the "media" tab in the spine.
Navigate the directory to the media you want to update, then click on it.
In that "content" tab of your media file, there will be an "upload file" box that will have a path that looks like: /media/756981/content-page-tutorial.mp4/media/(somenumber)/(the name of the file you uploaded with the file extension) or a specific example would be: /media/756981/content-page-tutorial.mp4. Copy down that path for later use.
In the main screen, you should see a "browse" button you can use to navigate your file system to the media you want to use to update the existing content with, and select it.
If the name of the media you are uploading is different from what was there before, than any existing links to that media with break. The easiest way to fix this is to ensure it never happens to begin with and simply ensure the two names are identical.
However, if you want to change the name of the media file for some reason, you can instead go to the links individually and updating them manually.
After you saved, navigate to the content tab of the media file you just uploaded. The text in the "uploaded file" box will have updated, copy that down as well.
Go to the content pages that have broken links pointing to the old media.
In the "Main text" editor section, there are a couple buttons located at the top left that are labeled "<>". Click the 2nd button. This will open up a window with the html representation of the webpage. Inside that text you will find a reference to an old media file, it should have the same path as the first one you jotted down. Replace the old path with the new one you jotted down. Click the "Ok" button in that window, and then save and publish your page.
Fixing Broken Links
How to fix broken links in Umbraco (specifically Media links, however this can also be applied to URLs)
1. Open up Umbraco and and enter the Media tab at the top left.
2. Navigate the directory to the media file with a broken link you want to fix.
3. Once you select the media file, click the "properties" tab at the top. (Note: if you wanted to update a URL, instead you would stay in the "File" tab, and copy down the path in the box for "Upload file")
4. There is an ID field with a number, copy down that number. Anytime that file is updated, the ID will change and you will need to update any links that used it.
5. Head back to the content area, and navigate to the page(s) that have the broken link(s).
6. Click on the 2nd button labeled "<>" in the Main text editor. There will be two buttons side by side and both can be used to fix the link. However, the second button brings up a window that is much cleaner and easier to work with.
7. Navigate the text on the new window to the UMBRACO_MACRO tag of the broken link. Inside that UMBRACO_MACRO there will be a field labeled "Videonode", simply update the ID of that video node to what you wrote down. (If you were updating a URL, you would instead look for a "<a href=" text that correlates to the broken link. Simply update the path of that href).
8. Click "Ok" at the bottom right of the window and then save and publish your page.