locked
FileSavepicker

    Question

  • Hello

    I want to ask a question about filesavepicker.

    When you use fileopenpicker, it open all files, drives etc. I was ok with fileopenpicker.

    When i implement filesavepicker then i get trouble getting my desired result.

    I was opening picture in my app when saving, it get saved. But i get 0 kb byte file in my picture folder.

    I want to use filesavepicker saving my files with editing done or where i choose.

    Which is best method for images to save. I use bottom saveasync not worked, checked doc and their find it return empty 0kb byte. (Example in word we edit and we can save in document etc. Is filesavepicker is for saving edited file or no?)

    var savePicker = new Windows.Storage.Pickers.FileSavePicker();
    savePicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.pictureLibrary;
    savePicker.fileTypeChoices.insert("Images", [".png"]);
    
    savePicker.suggestedFileName = "photo";
    
    savePicker.pickSaveFileAsync().then(function (file) {
        if (file) {
                  Windows.Storage.CachedFileManager.deferUpdates(file);
                    Windows.Storage.FileIO.writeTextAsync(file, file.name).done(function () {
                    Windows.Storage.CachedFileManager.completeUpdatesAsync(file).done(function (updateStatus) {
                    if (updateStatus === Windows.Storage.Provider.FileUpdateStatus.complete) {
                        WinJS.log && WinJS.log("File " + file.name + " was saved.", "sample", "status");
                    } else {
                        WinJS.log && WinJS.log("File " + file.name + " couldn't be saved.", "sample", "status");
                    }
                });
            });
        } else {
            WinJS.log && WinJS.log("Operation cancelled.", "sample", "status");
        }
    });

    Thanks

    I checked every where but it only write on my file. I use code from tutorial and same result.

    I got writting on my file. But i selected image and select get writting on file. Not selected image.

    Can anybody answers which method instead of   code

    Windows.Storage.FileIO.writeTextAsync

    i use to get image when saving. It save as png format but content is text, instead of image.

    Thanks

    • Edited by n ahmed Friday, April 18, 2014 3:46 PM
    Thursday, April 17, 2014 12:50 AM

Answers

  • Once you open picker returns your file, you can turn the storage file into an image by using:

       var image = new Image();
    fileOpenPicker.pickSingleFileAsync().done( function(file){
       image.src = URL.createObjectURL(file, { oneTimeOnly: true });
    });
    
    At this point you'll have your image in an Image object which you can use for editing and such. Once you're ready to save the image, you can call the savePicker.pickSaveFileAsync() to let your user choose where to save it. You may have to convert the image object to a blob(I forget if this was necessary lol).  

    Thursday, April 17, 2014 7:12 PM

All replies

  • From looking at the code you have given, it seems like you created an empty file with no content, and saved it. The pickSaveFileAsync() method returns an empty file with the properties that you set such as the name, starting location to save, and type of file. 

    This is explained more in detail here: http://msdn.microsoft.com/en-us/library/windows/apps/windows.storage.pickers.filesavepicker.picksavefileasync.aspx

    To actually write to the file, you may want to use openAsync() method on your storage file which will grant you access to writing content to the file.

    This reference may help with that: http://msdn.microsoft.com/en-us/library/windows/apps/windows.storage.storagefile.aspx

    Hope this helps!

    Thursday, April 17, 2014 4:29 AM
  • Hi

    I was asking for saving a image, which i capture through webcam. How to give user capabilities to save that captured image through savepicker. For example openpicker bring files and you edit them and then save them using savepicker.

    Thanks  for Your answer. I know the ref material. But actually finding my desired result was not their or i missed something which was related. I was not trying to write on file but save my capture image. (like local storage, which auto save file as soon you capture or edit a image. But i want through that savepicker.

    I find this bottom method, might be do the trick for me.

    fileSavePicker.pickSaveFileAndContinue();

    Thanks

    Thursday, April 17, 2014 8:25 AM
  • Hello,

          To be clear, what I meant by writing to the file was saving the image to the file. 

    This line of code creates the empty file that you will be saving to:

    savePicker.pickSaveFileAsync().then(function (file) { ...

    This line of code is what is actually being saved(written) to the file:

     Windows.Storage.FileIO.writeTextAsync(file, file.name).done(function () { ...

    So from these lines of code, all that was saved to the file was the file name("file.name"), which is why you have a 0kb file instead of your image.

    Where is your image after you use the openpicker? Did you draw the image on a canvas or save it to a variable? Wherever it may be, you need to get that information and write it to the file created by the pickSaveFileAsync() method to actually save your image using the savePicker.

    I hope this helps you understand it better

    Thursday, April 17, 2014 5:06 PM
  • Hi

    from ref:

    When the call to this method completes successfully, it returns a storageFile object that was created to represent the saved file. The file name, extension, and location of this storageFile match those specified by the user, but the file has no content.

    To save the content of the file, your app must write the content to this storageFile.

    I was able to write on this file and saved . which got 12kb byte.

    But i was looking for image which i loaded through openpicker in my image box.

    I think i  need storagefile this method.

    storageFile.copyAndReplaceAsync(fileToReplace).done( /* Your success and error handlers */ );

    thanks

    Thursday, April 17, 2014 5:31 PM
  • Once you open picker returns your file, you can turn the storage file into an image by using:

       var image = new Image();
    fileOpenPicker.pickSingleFileAsync().done( function(file){
       image.src = URL.createObjectURL(file, { oneTimeOnly: true });
    });
    
    At this point you'll have your image in an Image object which you can use for editing and such. Once you're ready to save the image, you can call the savePicker.pickSaveFileAsync() to let your user choose where to save it. You may have to convert the image object to a blob(I forget if this was necessary lol).  

    Thursday, April 17, 2014 7:12 PM