Printable versionThis page explains how to enable your application to let users upload videos to YouTube using browser-based uploading. This uploading method lets you accept video uploads from your users without having to handle, host or proxy the actual video files. You should choose the browser-based uploading approach if you do not want to host or store the uploaded video files.
The browser-based uploading process has three steps:
The example below shows the format of an API request that uses the AuthSub authentication scheme for browser-based uploading:
POST /action/GetUploadToken HTTP/1.1 Host: gdata.youtube.com Authorization: AuthSub token="<authentication_token>" GData-Version: 2 X-GData-Client: <client_id> X-GData-Key: key=<developer_key> Content-Length: <content_length> Content-Type: application/atom+xml; charset=UTF-8 API_XML_request
You must provide several values in the HTTP POST request. Those values are highlighted in bold text in the example above. The following list explains how to populate each of these values:
authentication_token - This value contains the authentication token for your request. The token will either be a ClientLogin token, an AuthSub single-use token, an AuthSub session token or an OAuth access token.
client_id - (optional) This value identifies the application making the API request. This value is used for logging and debugging. Please visit http://code.google.com/apis/youtube/dashboard/ to get a client ID.
developer_key - This value identifies the YouTube developer that is submitting the request to upload the video. Please visit http://code.google.com/apis/youtube/dashboard/ to get a developer key.
content_length - This value contains the length, in bytes, of the entire body of the HTTP POST request.
API_XML_Request - This value contains information about the uploaded video file in the form of an Atom XML entry. The example below shows a sample XML request. The XML tags used in the entry are defined in the Reference Guide.
The following example shows an HTTP POST request that has all of these values populated with the exception of the binary file data.
POST /action/GetUploadToken HTTP/1.1 Host: gdata.youtube.com Authorization: AuthSub token="DXAA...sdb8" GData-Version: 2 X-GData-Client: b1c4t9sl2159 X-GData-Key: key=adf15ee97731bca89da876c...a8dc Content-Length: 1941255 Content-Type: application/atom+xml; charset=UTF-8 <?xml version="1.0"?> <entry xmlns="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" xmlns:yt="http://gdata.youtube.com/schemas/2007"> <media:group> <media:title type="plain">Bad Wedding Toast</media:title> <media:description type="plain"> I gave a bad toast at my friend's wedding. </media:description> <media:category scheme="http://gdata.youtube.com/schemas/2007/categories.cat">People </media:category> <media:keywords>toast, wedding</media:keywords> </media:group> </entry>
When you submit an Upload API request, the API returns an XML response that contains an upload URL and upload token that enable the user to upload the actual video file. You will need to extract the URL and token from the response and include these values in the form on your web page where the user submits the video file.
The example below shows a sample API response to a request for browser-based uploading:
<?xml version='1.0' encoding='UTF-8'?> <response> <url>http://uploads.gdata.youtube.com/action/FormDataUpload/AEF3087AUD<url> <token>AEwbFAQEvf3xox...</token> </response>
After extracting the upload URL and upload token from the API response, you need to display a form so that the user can upload the actual video file. The form must use the upload URL as the value of the <form> tag's action attribute and have a hidden input field containing the upload token. In addition, the form should verify that the user has selected a file to upload before allowing the user to actually submit the form.
The following JavaScript and HTML show a sample form as it might appear on your site. The JavaScript function, which executes when the user tries to submit the form, confirms that the user has selected a file to upload. If the user has not selected a file, then the function displays an error message below the file field.
<script type="text/javascript">
function checkForFile() {
if (document.getElementById('file').value) {
return true;
}
document.getElementById('errMsg').style.display = '';
return false;
}
</script>
<form action="URL?nexturl=http%3A%2F%2Fwww.example.com method="post"
enctype="multipart/form-data" onsubmit="return checkForFile();">
<input id="file" type="file" name="file"/>
<div id="errMsg" style="display:none;color:red">
You need to specify a file.
</div>
<input type="hidden" name="token" value="TOKEN"/>
<input type="submit" value="go" />
</form>
Please note that the form must follow these guidelines:
You need to add the nexturl parameter to the form's target URL. This parameter specifies the URL to which YouTube will redirect the user's browser when the user uploads his video file. After the video is uploaded in the browser, the user will be redirected to the nexturl URL. See the reference guide for more information about additional parameters that will be appended to the URL.
You must set the value of the <form> tag's enctype attribute to multipart/form-data.
The <input> tag that identifies the file must be named file.
The <input> tag that contains the token must be named token.
Your application should verify that the user has selected a file to upload before allowing the user to submit the form to upload the file.
The following diagram illustrates the browser-based uploading process. Your application might have already completed the authentication process before these steps occur. However, you could also choose to have the user provide the video metadata before completing the authentication process.
The image shows the following steps:
Your site displays a form in which the user will enter details about the video being uploaded.
The user enters the video details, such as the title, description and category for the video.
Your site sends an HTTP POST request to YouTube that contains the authentication token and the video details that the user submitted in the previous step.
YouTube returns a one-time upload token, an encrypted value containing authentication information and video details for the video being uploaded. The Extracting values from the API response section identifies the upload token and URL in the API response.
Your site displays a form where the user can select his video file and upload it to YouTube. The form will submit directly to YouTube and must contain a hidden input field that specifies the upload token obtained in the previous step. The Uploading the video file section defines the guidelines for this form.
The user selects his video and submits the form, sending his video and the upload token directly to YouTube. YouTube verifies the token is valid and adds the video to the user's YouTube channel. During this process, YouTube assigns the video a unique ID, which will be used to identify the video on YouTube.
YouTube redirects the user back to your site.