locked
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? 
    Friday, December 30, 2011 2:42 PM

All replies

  • 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)
    Friday, December 30, 2011 3:47 PM
    Moderator
  • 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.. 
    Friday, December 30, 2011 4:50 PM
  • 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)
    Friday, December 30, 2011 8:24 PM
    Moderator
  • 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! 
    Saturday, December 31, 2011 5:33 AM
  • 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.

    Saturday, December 31, 2011 7:39 AM
  • 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.

    Saturday, December 31, 2011 8:04 AM
  • 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)
    Tuesday, January 3, 2012 1:16 PM
    Moderator
  • 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 :(
     
    Tuesday, January 3, 2012 3:55 PM
  • 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

    Wednesday, October 31, 2012 10:03 PM