jQuery send file chunks to PHP upload to Ooyala

StackOverflow https://stackoverflow.com/questions/19746507

Question

I have been stuck on this for over a week and I think I am long overdue for asking on here.. I am trying to get my users to upload their video files using the jQuery File Upload Plugin. We do not want to save the file on our server. The final result is having the file saved in our Backlot using the Ooyala API. I have tried various approaches and I am successful in creating the asset in Backlot and getting my upload URLs, but I do not know how to upload the file chunks using the URLs into Backlot. I have tried FileReader(), FormData(), etc. I am pasting the last code I had that created the asset, and gave me the upload URLs, but did not save any chunks into Backlot. I assume I may be getting stuck in one of my AJAX calls, but I am not very sure.

I keep getting: Uncaught InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable.

Here is my page with the JS for the jQuery File Upload widget by BlueImp:

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="<?php print base_path() . path_to_theme() ?>/res/js/jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>
        <script type="text/javascript" src="<?php print base_path() . path_to_theme() ?>/res/js/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
        <script type="text/javascript" src="<?php print base_path() . path_to_theme() ?>/res/js/jQuery-File-Upload/js/jquery.fileupload.js"></script>
</head>
<body>
        <input id="fileupload" type="file" accept="video/*">
                <script>
                            //var reader = FileReader();
                            var blob;
                            $('#fileupload').fileupload({
                                forceIframeTransport: true,
                                maxChunkSize: 500000,
                                type: 'POST',
                                add: function (e, data) {
                                    var goUpload = true;
                                    var ext = ['avi','flv','mkv','mov','mp4','mpg','ogm','ogv','rm','wma','wmv'];
                                    var uploadFile = data.files[0];
                                    var fileName = uploadFile.name;
                                    var fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1); 
                                    if ($.inArray( fileExtension, ext ) == -1) {
                                        alert('You must upload a video file only');
                                        goUpload = false;
                                    }
                                    if (goUpload == true) {


                                        $.post('../sites/all/themes/episcopal/parseUploadJSON.php', 'json=' + JSON.stringify(data.files[0]), function (result) {
                                            var returnJSON = $.parseJSON(result);
                                            data.filechunk = data.files[0].slice(0, 500000);
                                            data.url = returnJSON[0];
                                            //reader.onloadend = function(e) {
                                                //if (e.target.readyState == FileReader.DONE) { // DONE == 2
                                                    //data.url = returnJSON[0];

                                               // } 
                                           //} 

                                            //$.each(returnJSON, function(i, item) {
                                                //data.url = returnJSON[0];
                                                //blob = data.files[0].slice(0, 500000);
                                                //console.log(blob);
                                                //reader.readAsArrayBuffer(blob);
                                                //data.submit();
                                            //}); 
                                            data.submit();
                                        }); 
                                                                            }
                                },//end add 
                                submit: function (e, data) {
                                    console.log(data); //Seems fine
                                    //console.log($.active);
                                    $.post('../sites/all/themes/episcopal/curlTransfer.php', data, function (result) { //fails

                                        console.log(result);
                                    });

                                    return false;  
                                }
                            });
                            </script>

</body></html>

Then there is the parseUploadJSON.php code, please keep in mind that my real code has the right Backlot keys. I am sure of this:

<?php 

if(isset($_POST['json'])){
    include_once('OoyalaAPI.php');

    $OoyalaObj = new OoyalaApi("key", "secret",array("baseUrl"=>"https://api.ooyala.com"));

    $expires = time()+15*60; //Adding 15 minutes in seconds to the current time
    $file = json_decode($_POST['json']);

    $responseBody = array("name" => $file->name,"file_name"=> $file->name,"asset_type" => "video","file_size" => $file->size,"chunk_size" => 500000);

    $response = $OoyalaObj->post("/v2/assets",$responseBody);
    $upload_urls = $OoyalaObj->get("/v2/assets/".$response->embed_code."/uploading_urls");

    $url_json_string = "{";
    foreach($upload_urls as $key => $url){
        if($key+1 != count($upload_urls)){
            $url_json_string .= '"' . $key . '":"' . $url . '",';
        }else {
            $url_json_string .= '"' . $key . '":"' . $url . '"';
        }   
    }
    $url_json_string .= "}";
    echo $url_json_string;
}

?>

Then I have the curlTransfer.php:

    <?php
echo "starting curl transfer";
echo $_POST['filechunk'] . " is the blob";
if(isset($_FILES['filechunk']) && isset($_POST['url'])){
    echo "first test passed";
    $url = $_POST['url'];
    //print_r(file_get_contents($_FILES['filechunk']));
    $content = file_get_contents($_FILES['filechunk']);
    print_r($content);
    $ch = curl_init($url);
            curl_setopt ($ch, CURLOPT_RETURNTRANSFER, true);
            curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
            curl_setopt ($ch, CURLOPT_HTTPHEADER, Array("Content-Type: multipart/mixed"));
            curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "PUT");
            curl_setopt($ch, CURLOPT_POSTFIELDS, $content);

        try {
             //echo 'success'; 
             return httpRequest($ch);
         }catch (Exception $e){
             throw $e;
         }
}        
/****Code from Ooyala****/    

function httpRequest($ch){

    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
    $response = curl_exec($ch);
    if(curl_error($ch)){
        curl_close($ch);
        return curl_error($ch);

     }

     $head=curl_getinfo($ch);
     $content = $head["content_type"];
     $code = $head["http_code"];
     curl_close($ch);
}

?>

And the OoyalaApi.php is here (I saved a copy on my server): https://github.com/ooyala/php-v2-sdk/blob/master/OoyalaApi.php

I apologize in advance if the code is messy and there's a lot of parts commented out. I have changed this code so much and I cannot get it. I appreciate all of your time and effort.

EDIT

I went back to trying FileReader out as this post Send ArrayBuffer with other string in one Ajax call through jQuery kinda worked for me, but I think it would be safer to read it using readAsArrayBuffer and now I am having trouble saving the array buffer chunks in some sort of array...

No correct solution

OTHER TIPS

We have implemented ooyala file chunk upload in Ruby On Rails by referring this. We have used the entire JS file as it is from this link.

https://github.com/ooyala/backlot-ingestion-library

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top