locked
Upload File + XHR + PHP

    Question

  • Hi Guys, i'm going crazy trying to upload a file to my server.

    I'm using the blob sample as a starter and my function is here below. I also created the php file that doesn't seem to be able to process the file. I appriciate if anyone could correct what i'm missing:

    function openImage() {
            // Verify that we are currently not snapped, or that we can unsnap to open the picker
            var currentState = Windows.UI.ViewManagement.ApplicationView.value;
            if (currentState === Windows.UI.ViewManagement.ApplicationViewState.snapped && !Windows.UI.ViewManagement.ApplicationView.tryUnsnap()) {
                // fail gracefully if we can't unsnap
                WinJS.log && WinJS.Log("This functionality requires the app to not be snapped", "sample", "status");
                return;
            }
    
            var picker = new Windows.Storage.Pickers.FileOpenPicker();
            picker.fileTypeFilter.replaceAll([".jpg", ".bmp", ".gif", ".png"]);
            picker.pickSingleFileAsync().done(function (file) {
                // Check that the picker returned a file. The picker will return null if the user clicked cancel.
                if (file) {
                    var imageBlobUrl = URL.createObjectURL(file, {oneTimeOnly: true});
                    document.getElementById("image").src = imageBlobUrl;
                    console.log("send");
    
                //HERE IS THE PROBLEM
                    WinJS.xhr({ type: "POST", url: "http://localhost/upload.php", data: file });
    
                    // Show status
                    actionsChangeVisibility("visible");
                    WinJS.log && WinJS.log("The src of Image has been set to: " + imageBlobUrl, "sample", "status");
                }
                else {
                    WinJS.log && WinJS.log("No file was selected", "sample", "status");
                }
            }, BlobSample.asyncError);
        }

    my upload.php:

    $blob = (isset($_POST['data']) ? $_POST['data'] : false);
    if ($blob) {
    file_put_contents($blob, file_get_contents($blob));
    }

    please help, i'm stuck on this for days :)

    Sunday, November 24, 2013 3:47 PM

Answers

  • Hi Magal,

    I found a document that might help you: How to upload binary data with WinJS.xhr. The same thing that you are facing, I can only ensure that you send a correct blob file to the server.

    You need to validate following things:

    1. Set a correct App capability declaration
    2. Convert the bitmap to blob by using MSApp.createBlobFromRandomAccessStream.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Monday, November 25, 2013 2:46 AM
    Moderator