Hello,
I have a video upload form inside a page with another form.
I want to submit the upload form by ajax and receive the response from Bits on the Run to the same page (and put the data in the second form).
How can I use the /videos/create API call with ajax?
Thank you,
Shani
I've tried using jQuery post, but it doesn't work.
The code I use for the jQuery post is :
<?php
require_once('botr/init_api.php');
# Do the API call to build an upload URL.
# The 'token' MUST be the last parameter for upload progress to work.
$response = $botr_api->call('/videos/create');
$token = $response['link']['query']['token'];
if ($response['status'] == 'error') { die(print_r($response)); }
$url = 'http://'.$response['link']['address'].$response['link']['path'];
# Print the page. All identifiers inside the form are used to display the upload progress.
?>
<script type="text/javascript">
$(document).ready(function() {
$('#uploadForm').submit(function() {
var url = $(this).attr('action');
alert(url);
var dataToBeSent = $(this).serialize();
alert(dataToBeSent);
$.post(url, dataToBeSent, function(data, textStatus) {
//data contains the JSON object
//textStatus contains the status: success, error, etc
alert("textStatus");
alert(textStatus);
}, "json");
return false
});
});
</script>
<form id="uploadForm" action="<?=$url?>" method="POST" enctype="multipart/form-data">
<fieldset>
<label>Select video</label><br>
<input id="uploadFile" type="file" name="file" />
<input id="key" type="hidden" name="key" value="<?=$response['link']['query']['key']?>" />
<input id="api_format" type="hidden" name="api_format" value="json" />
<input id="uploadToken" type="hidden" name="uploadToken" value="<?=$token?>" />
<input id="token" type="hidden" name="token" value="<?=$token?>" />
<div id="uploadBar" style="width:480px; float:left; display:none; background:#FFF; margin:5px 0;">
<div id="uploadProgress" style="background:#46800d; width:0px; height:18px;"></div></div>
<p class="hint">
You can upload any video format (WMV, AVI, MP4, MOV, FLV, ...)
</p>
<button type="submit" id="uploadButton">Upload</button>
</fieldset>
</form>
When I submit the form the alert of the url shows http://upload.bitsontherun.com/v1/videos/upload and the alert of dataToBeSent shows key=XXX&api_format=json&uploadToken=YYY&token=YYY
but than nothing happens.
(When I upload a video by posting a form, like explained here : http://www.longtailvideo.com/support/bits-on-the-run/15984/upload-videos-within-your-cms it works fine)
Any Ideas why?
Hi Shani & Remco,
Did you get it working? I wanted a simular thing (probably others to) and eventually got it working..
I've a form in my cms where the bits on the run video is just a small part of the dataset.
After the user selects a file, I want the file uploaded and posted to bits on the run. In the mean time the user should be able to fill out the rest of the form.
When the uploading is done, the video key should be inserted in a hidden field of my form, without the page reloading.
If the video is uploaded and the user done with filling out the other fields, he can save everything to the local database, including the reference to the video on the bits on the run server.
I looked at the code from the wordpress plugin which indeed does something simular (thnx for pointing that out!). The only problem is that it uses a prototype plugin to upload a multipart-form via an iframe because apperently that's not something you can do through ajax.
Fortunately their is a jquery plugin that does the job http://www.jainaewen.com/files/javascript/jquery/iframe-post-form.html#demonstrations
Include it and you can do something like:
$_('#uploadForm').iframePostForm
({
complete : function (response)
{
update_latest_botr_thumb();
}
});Unfortunately the response is empty due to cross domain restrictions so I used the same trick as in the wordpress plugin: Making a ajax call to get a list of all videos that where recently uploaded, including the one that i just uploaded :).
function update_latest_botr_thumb(){
//get JSON feed from Bits on the Run via php
$_.getJSON( 'index.php?option=com_survey&view=videos&format=json',
function(data){
var hItem = '';
//render html, no thumb is available while processing
if(data.videos[0].status=='processing'){
hItem = '<div class="item '+data.videos[0].key+'"><span class="processing">processing</span><span>'+data.videos[0].title+'</span></div>';
//keep checking if processing is done
setTimeout('update_latest_botr_thumb()',5000);
}
else if(data.videos[0].status=='ready'){
hItem = '<div class="item '+data.videos[0].key+'"><img src="http://content.bitsontherun.com/thumbs/'+data.videos[0].key+'-120.jpg" width="120" /><span>'+data.videos[0].title+'</span></div>';
}
//insert html when it's the first time
if($_('.'+data.videos[0].key).length==0){
$_('.botr_videos').prepend(hItem);
}
//update the html when the video is processed
else if(data.videos[0].status=='ready'){
$_('.botr_videos .item').eq(0).replaceWith(hItem);
}
}
);
}
Maybe there is anyone with a better idea?
You should never perform API calls through javascript, as that way it will be easy for any user to snatch your key and secret and take over your account.
I recommend that you take a look at the source of our wordpress plugin, as in that plugin it is possible to upload a video without leaving the page: http://www.longtailvideo.com/support/bits-on-the-run/15959/using-our-wordpress-plugin