Get the file on the server side with php and a windows 8 application

Question

I'm trying to upload a file on a server (currently on my local wamp), with a Windows 8 application running with HTML and JavaScript. So this is my code :

(function () {
    "use strict";

    WinJS.Binding.optimizeBindingReferences = true;

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {

            } else {

            }
            args.setPromise(WinJS.UI.processAll().then(function () {

                document.getElementById('boutonEnvoyer').onclick = function () {

                    var selector = Windows.Storage.Pickers.FileOpenPicker();

                    selector.fileTypeFilter.replaceAll(["*"]);

                    selector.pickSingleFileAsync().then(function (file) {

                        if (!file) {
                            console.log('No file selected');
                            return;
                        }

                        var url = 'http://192.168.10.28/videomaton/index.php';

                        UploadImage(url, fichier);

                    });

                };

                var UploadImage = function (urlString, file) {

                    try {

                        var uri = Windows.Foundation.Uri(urlString);
                        var uploader = new Windows.Networking.BackgroundTransfer.BackgroundUploader();

                        //Set a header to be able to save the file
                        uploader.setRequestHeader("Filename", file.name);

                        //Create the operation
                        var upload = uploader.createUpload(uri, file);

                        upload.startAsync().then(

                            function succes(res) {
                                console.log('goodgame');
                            },
                            function error(res) {
                                console.log(res);
                            },
                            function progression(res) {
                                var pourcent = Math.round(res.progress.bytesSent * 100 / res.progress.totalBytesToSend);
                                console.log(pourcent + '%');
                            }
                        );

                    } catch (err) {

                        console.log('try and catch missed');

                    }

                };

            }));
        }
    };

    app.oncheckpoint = function (args) {
    };

    app.start();
})();

This seems to work, but here is my problem, my javascript consol progress until 100% and say "goodgame". But on my server side, I got nothing.

Here is my php code :

$arr = get_defined_vars();

ob_start();
var_dump($arr);
$result = ob_get_clean();

file_put_contents('fichier.txt', $result);

And when I look into this "fichier.txt" _Files is empty, but I've a line with HTTP_FILENAME => 7.jpg (which is the name of my image that I'm trying to upload).

Thanks you for your help ! H4mm3R

Answer 1

You need to send a multipart/form-data request.

Try (pseudocode):

var contentPart = new Windows.Networking.BackgroundTransfer.BackgroundTransferContentPart("myField", file.name);
contentPart.SetFile(file)

var parts = [];
parts.push(contentPart);

var uploader = new Windows.Networking.BackgroundTransfer.BackgroundUploader();
uploader.createUploadAsync(uri, parts).then(function (upload) {
    upload.startAsync().then( ... );
});

Then check for the file in the PHP $_FILES variable.