Attachments.me connecting SkyDrive with Gmail and tips for other SkyDrive developers

Over the past few months we’ve seen great apps integrate with SkyDrive, for example document readers like GoodReader or Bookviser and productivity apps like Podio or RightSignature. But we also heard that developers wanted greater flexibility in file types supported by SkyDrive. And as more and more developers have been building Windows 8 apps, they’ve appreciated the Windows 8 file picker integration with SkyDrive and wanted us to similarly make it simple to integrate a SkyDrive file picker with their websites.

 

Based on this feedback, we recently released an update for the SkyDrive developer experience to

  1. Remove all API restrictions related to photo resolution and content types
  2. Provide a new, easy-to-use file picker API for websites (similar to our file picker for Windows 8 apps)

 
We’re seeing many apps take advantage of these updates to unlock new possibilities. Today, we’re happy to share a very exciting new experience—Attachments.me is using these new updates to connect SkyDrive with Gmail. Using Attachments.me’s Chrome extension, you can now send and access SkyDrive files directly in Gmail. Additionally, you can create rules to automatically save certain attachments to SkyDrive (e.g. “whenever John Doe sends me an attachment, save it to my “Files from John” folder in SkyDrive). We think this will be a pretty compelling integration for people that want to use SkyDrive but are still using Gmail.

 

5383.SkyDrive-Integration-in-Gmail_thumb_73FE01D9

 

SkyDrive integration in Gmail, via Attachments.me

 

And then just this past weekend at the TechCrunch Disrupt Hackathon, there were numerous teams building apps using the SkyDrive APIs. One standout was Aniden’s David Chien, who integrated SkyDrive into his Windows 8 app, Cliphoarder. In an interesting use of the snap functionality in Windows 8, Cliphoarder allows you to clip text and images out of any website and save them to your SkyDrive automatically. The app isn’t available in the Windows Store quite yet, but here’s a sneak peek at what David was able to make in just 24 hours.

 

7357.Cliphoarder-app_thumb_39365903

 

Cliphoarder app

 

It’s innovative scenarios like these that showcase the power of SkyDrive and keep pushing us and our partners to continue to find more ways to give you the world’s most versatile cloud storage service.

 

Today, we also wanted to provide more details on how any developer can take advantage of these updates to:

 

  • Upload full resolution pictures from your app
  • Use SkyDrive to backup app data
  • Enable any web app with personal cloud storage using our new file picker

 

Uploading full-resolution pictures

By default, if an uploaded photo is larger than 2048 × 2048 pixels in size, SkyDrive automatically tries to shrink it so that it fits within this 2048 × 2048 pixel size constraint. We think that provides a good default balance between a high quality picture but also not using up tons of storage. But there are times you really want the full resolution, and so you override this behavior when using the SkyDrive REST API. To do this, apps should set the downsize_photo_uploads query-string parameter to false—for example, /FOLDER_ID/files?downsize_photo_uploads=false for POST or /FOLDER_ID/files/FILENAME?downsize_photo_uploads=false for PUT.

 

The code excerpts below show how to upload a photo that will not be downsized, using JavaScript in a web application and C# in a Windows Store app.

 

JavaScript (Web)

function uploadFile() {
    WL.login({
        scope: "wl.skydrive_update"
    }).then(
        function (response) {
            WL.upload({
                path: folder_id + "?downsize_photo_uploads=false",
                element: "file",
                overwrite: "rename"
            }).then(
                function (response) {
                    document.getElementById("info").innerText =
                        "File uploaded.";
                },
                function (responseFailed) {
                    document.getElementById("info").innerText =
                        "Error uploading file: " + responseFailed.error.message;
                }
            );                    
        },
        function (responseFailed) {
            document.getElementById("info").innerText =
                "Error signing in: " + responseFailed.error.message;
        }
    );
}

C# (Windows 8)

private System.Threading.CancellationTokenSource ctsUpload;

private async void btnUploadFile_Click(object sender, RoutedEventArgs e)
{
    try
    {
        var picker = new Windows.Storage.Pickers.FileOpenPicker();
        picker.ViewMode = Windows.Storage.Pickers.PickerViewMode.Thumbnail;
        picker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.PicturesLibrary;
        picker.FileTypeFilter.Add("*");
        Windows.Storage.StorageFile file = await picker.PickSingleFileAsync();
        if (file != null)
        {
            this.progressBar.Value = 0;
            var progressHandler = new Progress<LiveOperationProgress>(
                (progress) => { this.progressBar.Value = progress.ProgressPercentage; });
            this.ctsUpload = new System.Threading.CancellationTokenSource();
            LiveConnectClient liveClient = new LiveConnectClient(this.session);
            await liveClient.BackgroundUploadAsync("folder.8c8ce076ca27823f.8C8CE076CA27823F!134"+ "?downsize_photo_uploads=false" ,
                "MyUploadedPicture.jpg", file, true, this.ctsUpload.Token, progressHandler);
            this.infoTextBlock.Text = "Upload completed.";
        }
    }
    catch (System.Threading.Tasks.TaskCanceledException)
    {
        this.infoTextBlock.Text = "Upload cancelled.";
    }
    catch (LiveConnectException exception)
    {
        this.infoTextBlock.Text = "Error uploading file: " + exception.Message;
    }
}

private void btnCancelUpload_Click(object sender, RoutedEventArgs e)
{
    if (this.ctsUpload != null)
    {
        this.ctsUpload.Cancel();
    }
}

For more examples of how to upload photos to SkyDrive from your favorite platform, please see our documentation.

 

Best practices for storing app data in SkyDrive

With our most recent release, there’s no longer any restriction on the types of files that can be uploaded to SkyDrive via our API. As part of this change, we’ve also changed our policies to allow apps to back up a user’s data to SkyDrive.

 

One question that has since come up is how apps should store data so that app backups don’t end up cluttering up a user’s SkyDrive. Our recommendation is that apps should store data using the following folder hierarchy:

[SkyDrive root]
 '- ApplicationData
  '- [Application Name] ([Publisher Name or Company Name])
e.g. Photosky (Contoso)

The application name should be provided as a human readable name that the end user understands, while the publisher name should be included in parenthesis in the folder name to disambiguate your app from another app that may have the same name.

The SkyDrive file picker for web apps

Shortly after we launched the SkyDrive API, we began to get feedback from web developers about how difficult it was to actually integrate opening or saving files to SkyDrive. And at the same time, developers were finding this very easy when building Windows 8 apps. The key problem was that app developers would need to re-implement the SkyDrive file picker to create a great experience when accessing or saving files to SkyDrive.

 

To address this feedback we’ve created a SkyDrive file picker for web apps. The SkyDrive file picker makes it easy easy to give your website the ability to open and save files to SkyDrive with just a few lines of JavaScript code.

 

Instantiating the SkyDrive file picker is done using either the WL.ui or WL.fileDialog methods from the JavaScript library, depending on whether your app will use the standard SkyDrive file picker button shown below or whether it will launch the file picker based on a custom action on your website (such as the user clicking a specific link or button).

 

1565.SkyDrive-File-picker-save-and-open-buttons_thumb_77BBA6A9

 

Standard SkyDrive file picker buttons

 

The following code excerpt shows how to create a SkyDrive file picker button that can be used to open files from SkyDrive which can then be processed by your app.

<div id="downloadFile_div">SkyDrive open button to appear here</div>

WL.ui({
    name: "skydrivepicker",
    element: "downloadFile_div",
    mode: "open",
    select: "multi",
    onselected: onDownloadFileCompleted,
    onerror: onDownloadFileError
});

function onDownloadFileCompleted(response) {
    var msg = "";
    // For each folder selected...
    if (response.data.folders.length > 0) {
        for (folder = 0; folder < response.data.folders.length; folder++) {
            // Use folder IDs to iterate through child folders and files as needed.
            msg += "\n" + response.data.folders[folder].id;
        }
    }
    // For each file selected...
    if (response.data.files.length > 0) {
        for (file = 0; file < response.data.files.length; file++) {
            // Use file IDs to iterate through files as needed.
            msg += "\n" + response.data.files[file].id;
        }
    }
    document.getElementById("info").innerText =
        "Selected folders/files:" + msg;
};

function onDownloadFileError(responseFailed) {
    document.getElementById("info").innerText =
        "Error getting folder/file info: " + responseFailed.error.message;
}

When the user clicks the SkyDrive file picker button that results from the above code, they will see the following dialog box and can then choose which file they want to share with your web app:

5734.SkyDrive-File-picker-open-dialog_thumb_6FC40447

SkyDrive file picker, Open dialog box

 

Creating a file picker that enables the user to save a file to SkyDrive is similarly straightforward. The following code sample shows how to create a standard HTML button which will launch the Save dialog when clicked:

<form>
    <input id="file" name="file" type="file" />
</form>

<button onclick="uploadFile_fileDialog()">Save file with SkyDrive file picker (calling WL.filedialog)</button>



function uploadFile_fileDialog() {
    WL.fileDialog({
        mode: "save"
    }).then(
        function (response) {
            WL.upload({
                path: response.data.folders[0].id,
                element: "file",
                overwrite: "rename"
            }).then(
                function (response) {
                    document.getElementById("info").innerText =
                        "File uploaded.";
                },
                function (responseFailed) {
                    document.getElementById("info").innerText =
                        "Error uploading file: " + responseFailed.error.message;
                }
            );
        },
        function (responseFailed) {
            document.getElementById("info").innerText =
                "Error getting folder info: " + responseFailed.error.message;
        }
    );  
}

2438.SkyDrive-File-picker-save-dialog_thumb_2EB584E3

 

SkyDrive file picker, Save dialog box

 

You can try out the SkyDrive file picker by visiting our interactive SDK.

 

Learn more at TechCrunch Disrupt

To recap, we’ve lifted restrictions on uploading full resolution images and non-document file types. You can learn more about the SkyDrive API by visiting dev.live.com. We’ve also introduced a SkyDrive file picker for web apps, which you can add to your site by incorporating our JavaScript API and try out in our interactive SDK.

 

If you’d like to talk to us in person about adding SkyDrive to your website or app, we’ll be at the TechCrunch Disrupt conference in San Francisco this week. We’ll be showing off SkyDrive and talking about APIs.

 

As always—if you have any questions, either post them in the comments here or on our developer forums, where members of our team are always available.

 

Dare Obasanjo,

Lead Program Manager, Live Connect Platform


Tags: , , , , , ,


6 Responses to Attachments.me connecting SkyDrive with Gmail and tips for other SkyDrive developers

  1. tushar says:

    I am trying to use uplaod file using SkyDrive file picker, Open dialog box
    I Copied following code to .html file

    Save file with SkyDrive file picker (calling WL.filedialog)
    And function uploadFile_fileDialog()
    To the .Js file.

    But unable to run and cause lots of error .
    What are more stuff required to proceed
    Please guide me.

    Can we upload a file directly to specified folder of onedrive
    on single button click

  2. Way cool! Some very valid points! I appreciate you penning this post plus the rest of the website is also very good.

    Here is my web-site prefabricated homes lebanon

  3. usa says:

    Great post.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>