locked
Using FormData with blob image data to upload images

    Question

  • In an HTML Metro-Style app, I am trying to upload images to Facebook but I am finding that the filename parameter in the image source FormData field is not getting set.  Looking at the data sent in the body of the post, I notice that in the source section the filename field is blank.  How do I get the FormData.append() method to add the filename that I pass in to the filename field in the Multi-part post body?

    Content-Disposition: form-data; name="source"; filename=""

    Content-Type: image/jpg

    function UploadPhoto(uploadData, photo, index){
        return new WinJS.Promise(function (complete, error, progress) {
            photo.PhotoStorage.openAsync(Windows.Storage.FileAccessMode.read).then(function (imageStream) {
                var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings,
                accessToken = roamingSettings.values["Facebook.AccessToken"],
                filename = "Photo.jpg",
                message = "Message",
                data = new FormData(),
                blob = msWWA.createBlobFromRandomAccessStream("image/jpg", imageStream);
                data.append("access_token", accessToken);
                data.append("message",      message);
                data.append("source",       blob, filename);
                
                var options = {
                    url: "https://graph.facebook.com/me/photos?access_token=" + accessToken,
                    type: "POST",
                    data: data,
                };
    
                WinJS.xhr(options).then(function (response) {
                    var result = JSON.parse(response.responseText);
                    return result.id;
                },
                function (errorResponse) {
                    var result = JSON.parse(errorResponse.responseText);
                    console.error(result.error.message);
                    error(result);
                    
            });
            });
        });
    }
    


    Michael S. Scherotter
    Principal Architect Evangelist Microsoft Corporation,
    Blog, Twitter, Facebook

    Sunday, January 01, 2012 9:55 AM

Answers

  • I just figured it out.  It's a hack but it works:

    data.append("source\"; filename=\"" + filename + "\"", blob);
    
    

     Michael


    Michael S. Scherotter
    Principal Architect Evangelist Microsoft Corporation,
    Blog, Twitter, Facebook

    Tuesday, January 03, 2012 5:48 AM

All replies

  • It seems like the FormData append method isn't implemented with the optional third parameter (the filename):

    http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html#the-append()-method

    Michael


    Michael S. Scherotter
    Principal Architect Evangelist Microsoft Corporation,
    Blog, Twitter, Facebook

    Tuesday, January 03, 2012 4:43 AM
  • I just figured it out.  It's a hack but it works:

    data.append("source\"; filename=\"" + filename + "\"", blob);
    
    

     Michael


    Michael S. Scherotter
    Principal Architect Evangelist Microsoft Corporation,
    Blog, Twitter, Facebook

    Tuesday, January 03, 2012 5:48 AM
  • I am still having problems, even with this workaround. With the workaround my XHR request contains the filename parameter twice, and it seems my service is taking the last one - which is causing it to continue to error out. Is there any other workaround? I don't know that I can get the service changed and I am stuck at the moment.

    Content-Disposition: form-data; name="Filedata"; filename="myfile.png"; filename=""

    Tuesday, February 14, 2012 3:26 PM
  • Hi Matt,

    Send me an email from here:

    http://blogs.msdn.com/jpsanders/contact.aspx


    Jeff Sanders (MSFT)

    Thursday, February 16, 2012 6:44 PM
    Moderator
  • Jeff - thanks for the offer. The service provider actually updated their endpoint to help us work around it. I assume this will be fixed in the next SDK refresh so for now it's become a nonissue for us. Thanks again

    Thursday, February 16, 2012 9:52 PM
  • Excellent!

    Jeff Sanders (MSFT)

    Friday, February 17, 2012 12:36 PM
    Moderator