locked
WinJS xhr download file to local folder/replace existing

    Question

  • I am downloading an image from url and saving it to local folder.  I would like to use replace Existing method.  The file is created but is empty.  I am missing a step somewhere.  How do I save the xhr reponse as the local file?

    var myImage = "http://www.somesite.com/image.gif"
    
       WinJS.xhr({
         url: myImage,
         responseType: "blob",
         headers: {
         "If-Modified-Since": "Mon, 27 Mar 1972 00:00:00 GMT"
          }
        }).done(
             function completed(result) {
             var newFile = result.response;
                 
          // Get the app's local folder.
               var localFolder =    Windows.Storage.ApplicationData.current.localFolder;
    
         // Create a new file in the current local folder.
              var fileName = "myLocalImage.gif";
              var CreationCollisionOption = Windows.Storage.CreationCollisionOption;
              var newFilePromise = localFolder.createFileAsync(fileName, CreationCollisionOption.replaceExisting);
    
     newFilePromise.done(function createFileSuccess() {
        // CreateFile completed successfully.
           var msgtext = "File created successfully!";
           var msg = new Windows.UI.Popups.MessageDialog(msgtext);
          msg.showAsync();
          return false;
    
     
     
    
    
    

    Thursday, February 05, 2015 4:49 PM

Answers

  • You need to get a blob as your response from xhr and stream it into the StorageFile you just created.  (I don't know the sample code off-hand...)

    Another option is to use the BackgroundTransfer API:
    https://msdn.microsoft.com/en-us/library/windows/apps/Hh700370.aspx

    FYI, for all the async methods you're using, you should try the '.then' continuation approach.  It would eliminate the nested brackets.

    For example, your series of async methods above would look like this:

    var myImage = "http://www.somesite.com/image.gif"
    
       WinJS.xhr({
         url: myImage,
         responseType: "blob",
         headers: {
         "If-Modified-Since": "Mon, 27 Mar 1972 00:00:00 GMT"
          }
        }).then(
             function completed(result) {
             var newFile = result.response;
                 
          // Get the app's local folder.
               var localFolder =    Windows.Storage.ApplicationData.current.localFolder;
    
         // Create a new file in the current local folder.
              var fileName = "myLocalImage.gif";
              var CreationCollisionOption = Windows.Storage.CreationCollisionOption;
             return localFolder.createFileAsync(fileName, CreationCollisionOption.replaceExisting);
    
     }).then(function createFileSuccess() {
        // CreateFile completed successfully.
           var msgtext = "File created successfully!";
           var msg = new Windows.UI.Popups.MessageDialog(msgtext);
          return msg.showAsync();
          }).done(function (){
    //whatever else you need to do after the showAsync call
    });
    


    Lee McPherson

    • Marked as answer by hxnwx Monday, March 16, 2015 8:03 PM
    Friday, February 06, 2015 12:17 AM
  • Hi hxnwx,

    As I know Background transfer is designed to receive some big files instead of the small files.

    I believe you would interested with this documentation: How to download a file with WinJS.xhr, in the Downloading different types of content section it told how to work with BLOB.

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Wednesday, February 18, 2015 6:55 AM
    Moderator

All replies

  • You need to get a blob as your response from xhr and stream it into the StorageFile you just created.  (I don't know the sample code off-hand...)

    Another option is to use the BackgroundTransfer API:
    https://msdn.microsoft.com/en-us/library/windows/apps/Hh700370.aspx

    FYI, for all the async methods you're using, you should try the '.then' continuation approach.  It would eliminate the nested brackets.

    For example, your series of async methods above would look like this:

    var myImage = "http://www.somesite.com/image.gif"
    
       WinJS.xhr({
         url: myImage,
         responseType: "blob",
         headers: {
         "If-Modified-Since": "Mon, 27 Mar 1972 00:00:00 GMT"
          }
        }).then(
             function completed(result) {
             var newFile = result.response;
                 
          // Get the app's local folder.
               var localFolder =    Windows.Storage.ApplicationData.current.localFolder;
    
         // Create a new file in the current local folder.
              var fileName = "myLocalImage.gif";
              var CreationCollisionOption = Windows.Storage.CreationCollisionOption;
             return localFolder.createFileAsync(fileName, CreationCollisionOption.replaceExisting);
    
     }).then(function createFileSuccess() {
        // CreateFile completed successfully.
           var msgtext = "File created successfully!";
           var msg = new Windows.UI.Popups.MessageDialog(msgtext);
          return msg.showAsync();
          }).done(function (){
    //whatever else you need to do after the showAsync call
    });
    


    Lee McPherson

    • Marked as answer by hxnwx Monday, March 16, 2015 8:03 PM
    Friday, February 06, 2015 12:17 AM
  • I guess that is where I'm getting stuck.  I am creating a file with no problem, but it is empty.  I not actually doing anything with the blob response I get.  So that is my question.  Can I not feed the response to the created file?  Is streaming the only way to accomplish this?

    I have looked into Background Transfer and might end up doing this but my files are small and wanted to try the simpler method first.  Thanks for your help.

     
    Friday, February 06, 2015 2:49 PM
  • I remember being frustrated that there are no good examples of how to do this in javascript.  I don't remember exactly how I did it, but this sounds familiar:

    https://social.msdn.microsoft.com/Forums/en-US/46d43cee-8764-4a20-9c89-02d0c8ec3170/downloading-via-xhr-and-writing-large-files-using-winjs-fails-with-message-not-enough-storage-is?forum=winappswithhtml5


    Lee McPherson

    Saturday, February 07, 2015 8:04 PM
  • Hi hxnwx,

    As I know Background transfer is designed to receive some big files instead of the small files.

    I believe you would interested with this documentation: How to download a file with WinJS.xhr, in the Downloading different types of content section it told how to work with BLOB.

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Wednesday, February 18, 2015 6:55 AM
    Moderator
  • Monday, March 16, 2015 8:02 PM