Windows store apps JS : uploading a video file with WinJS.xhr

Question

I've some trouble into uploading a video to a form. In my case, I need to upload some data with my video, so I left BackgroundUploader to use WinJS.xhr. But I can't figure it out how to convert my video file into something readable for my php.

My code:

    var clickPicker = function () {

    openPicker = Windows.Storage.Pickers.FileOpenPicker();

    // We set the default location to the video library 
    openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.videosLibrary;
    // Set de view to thumbnail 
    openPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;

    // Extension allowed to be taken
    openPicker.fileTypeFilter.replaceAll([".mp4", ".avi"]);

    openPicker.pickSingleFileAsync().done(function (file) {

        uploadInit(file);

    }, function (err) {

        // MISTAAAAAAAAAAAAAAAAKEEEEEEEEE
        console.log(err.message);

    });

};

var uploadInit = function (file) {

    // Creating the blob
    var objectURL = window.URL.createObjectURL(file);

    var url = "http://localhost/vdm_bo/videos/uploader";

    var d = new Date();

    var data = new FormData();
    data.append("data[Video][pseudo]", 'H4mm3R');
    data.append('data[Video][postal_code]', '67340');
    // Converting date to a datetile mysql
    data.append('data[Video][date]', ISODateString(d));
    data.append('data[Video][age]', '24');
    data.append("data[Video][email]", 'bliblu@hotmail.fr');
    data.append("data[Video][question_selected]", 'qA');
    data.append("data[Video][video_file]", file, file.name);

    WinJS.xhr({
        type: "POST",
        url: url,
        data: data
    }).done(function (res) {

        console.log('succes');

    }, function (err) {

        console.log(err.message);

    }, function (res) {

    });

};

So, to debug this I serialize the answer, and here is what I get : When uploading with the file (without blob) :

s:36:"[object Windows.Storage.StorageFile]";

When uploading with blob (window.URL.createObjectURL(file))

s:41:"blob:9A06AB11-8609-42DC-B0A9-7FB416E70A9D";

And when I'm uploading the video just with my html form

a:5:{s:4:"name";s:36:"9147cb17e216d5182908ad370ff16914.mp4";s:4:"type";s:9:"video/mp4";s:8:"tmp_name";s:23:"C:\wamp\tmp\php13C8.tmp";s:5:"error";i:0;s:4:"size";i:26454182;}

Does anyone have a clue how to make it work ? Or maybe I do it all wrong and it's not the way I'm suppose to convert my file (It's the way to do for images, maybe not for video)

Answer 1

Okay, I found a way to do that. First ou need to get the file with getFileAsync() and not the Picker. Then you can create a blob with the stream of your file and add this blob to your form. Here my code

        var videosLibrary = Windows.Storage.KnownFolders.videosLibrary;

    videosLibrary.getFileAsync(file.name).then(
        function completeFile(file) {
            return file.openAsync(Windows.Storage.FileAccessMode.readWrite);
        }).then(
            function completeStream(stream) {

                var d = new Date();
                // Do processing. 
                var blob = MSApp.createBlobFromRandomAccessStream("video/mp4", stream);

                var data = new FormData();
                data.append("data[Video][pseudo]", 'H4mm3R');
                data.append('data[Video][postal_code]', '67340');
                // Converting date to a datetile mysql
                data.append('data[Video][date]', ISODateString(d));
                data.append('data[Video][age]', '24');
                data.append("data[Video][email]", 'bliblu@hotmail.fr');
                data.append("data[Video][question_selected]", 'qA');
                data.append("data[Video][video_file]", blob, file.name);

                return WinJS.xhr({ type: "POST", url: "http://localhost/vdm_bo/videos/uploader", data: data });
        }).then(
            function (request) {
                console.log("uploaded file");
            }, 
            function (error) {
               console.log("error uploading file");
    });