How to get an [object File] from FilePicker like from <input type=file> for XHR POST Request?

Question

Hello again, now I need an [object File] from FilePicker to send it via XHR Post Request.
A solution with <input type=file> works, but it'll be better with WinRT's FilePicker due to I need an image-only thumbnail view.
The solution is 

input.addEventListener("change", function () {
            var file = this.files[0];<span style="font-family:arial,sans-serif; font-size:x-small"><span style="white-space:nowrap"><br/>formdata.append("photo", file);
                      log('file: ' + file)
                      var fd = new FormData();
                      fd.append('photo', file);
                      var xhr = new XMLHttpRequest();
                      MethodWithNoParametrs('photos.getWallUploadServer').then(function (result) {
                          xhr.open('POST', JSON.parse(result.responseText).response.upload_url + '&access_token=' + vk.Token);
                          xhr.send(fd);
                          xhr.onload = function () {
                              var json = JSON.parse(xhr.responseText);
                              log(xhr.responseText);
                              log(xhr.statusText);
                              Method('photos.saveWallPhoto?server=' + json.server + '&photo=' + json.photo + '&hash=' + json.hash).then(function (result) {
                                  log(result.responseText);
                                  Method('wall.post?attachment='+JSON.parse(result.responseText).response[0].id).then(function (result) {
                                      log(result.responseText);
                                  }, function (err) {
                                      log(err);
                                  });
                              })
                              
                          }
                      });</span></span>

So I need a variant with a FilePicker. 
[object Blob] appended to a FormData didnt work.
file from picker couldnt be appended to a FormData.
The only class which works is [object File] from <input type=file>. So the server can understand only this class.

So... how can I get this class using FilePicker? 

Answer 1

Hi Moushen,

I am not sure what you are asking for.  The Pickers do return file object.

If you are asking how to use XHR to upload a particular format for your server, you will need to understand what that format is.  The best way to accomplish this is to use a successful case and compare that to the XHR case.  You can use a tool like fiddler (http://fiddler2.com) to inspect the HTTP traffic and see what your differences are. 

-Jeff

---

Jeff Sanders (MSFT)

Answer 2

Hi Jeff,
The Pickers return [object Windows.Storage.File] (smth like this) which cant be appended to FormData to send over XHR.
[object Windows.Storage.File] != [object File] from input.. 

Answer 3

Hi Moushen,

Try this code (it takes a file from the FilePicker):

function sendFile(file) {
    
        file.openAsync(Windows.Storage.FileAccessMode.read).then(function (stream) {
            var blob = msWWA.createBlobFromRandomAccessStream(file.contentType, stream);
            var fbURL = "http://jpswin8server/";
            var formData = new FormData();
            formData.append("source", blob);            formData.append("access_token", "token");
            WinJS.xhr({ type: "POST", url: fbURL, data: formData, }).then(
                    function (response) {
                c(response);
            },
                    function (err) {
                e(err);
            });
        });

    }

-Jeff

---

Jeff Sanders (MSFT)

Answer 4

Hello again, Jeff,
The code gets [object Blob], not [object File], so it doesn't work.
The server doesnt understand Blobs, only [object File]. This is bad.

I'll talk to API's developers so they will do support of [object Blob], I hope :)
If you have got any another ideas,  send it!
Btw thanks for the help! 

Answer 5

Maybe we could ask this question in another way.

How to transfer the fileListByPicker from

 

openPicker.pickMultipleFilesAsync().then(function (fileListByPicker) {

    ...

});

 

to the same type with the fileListByInput as follows

 

<input type='file' name='file' id='inputFiles' multiple>

<script>

var fileListByInput = documents.getElementsById('inputFiles').files;

</script>

 

So that we could append these files into FormData one by one.

Answer 6

Hello Sars C,

picker.pickMultipleFilesAsync() gives a file array, and file[0] (for example) is [object Windows.Storage.StorageFile], not [object File] which gives <input type=file>. 
Pickers must be better than html's inputs and must replace them.  

I have another question: can I set <input type="file">'s view to thumbnail and display only images? That's the only reason why I use Pickers.

Answer 7

Hi Moushen,

The Blob is not a type once it gets sent.  The Blob is simply a wrapper for a file stream type.  The file has to be streamed over HTTP to be sent correctly.  You cannot send a 'file' as an object over HTTP (it must be encoded) and the blob wraps this stream representation.

Here is another thread where we are discussing sending a file to the facebook API over HTTP.  It may help you:send a http(post) message

-Jeff

---

Jeff Sanders (MSFT)

Answer 8

But how can I send a photo with Picker EXACTLY like with the input?

Btw the code from the thread didn't work for me :(
 

Answer 9

This is a really old thread by now, but here is the solution I found that should satisfy the original question:

MSApp.createFileFromStorageFile(storageFile)

More Info:  http://msdn.microsoft.com/en-us/library/windows/apps/hh831249.aspx