microsoftgraph · dan-silver · Nov 1, 2016 · Oct 26, 2016 · Oct 26, 2016
diff --git a/README.md b/README.md
@@ -132,8 +132,26 @@ client
  })
 
 ````
-### `.put()`
-Use `.put()` to upload files to Microsoft Graph with streams.
+### `.put()` and `.putStream()`
+
+You can upload files to the graph using `.put()`. For example, this can be used to update a profile picture from an HTML input form. See the [browser sample](samples/browser) for complete code.
+
+```javascript
+var file = document.querySelector('input[type=file]').files[0];
+
+client
+ .api('/me/photo/$value')
+ .put(file, (err, res) => {
+ if (err) {
+ console.log(err);
+ return;
+ }
+ console.log("We've updated your picture!");
+ });
+```
+
+
+Use `.putStream()` to upload files to Microsoft Graph with Node.js streams.
 ````javascript
 
 // Upload a file to OneDrive

diff --git a/lib/graph-js-sdk-web.js b/lib/graph-js-sdk-web.js
@@ -167,6 +167,13 @@ class GraphRequest {
  .post(url)
  .send(content), callback);
  }
+ put(content, callback) {
+ let url = this.buildFullUrl();
+ return this.sendRequestAndRouteResponse(request
+ .put(url)
+ .type('application/octet-stream')
+ .send(content), callback);
+ }
  create(content, callback) {
  return this.post(content, callback);
  }
@@ -234,7 +241,7 @@ class GraphRequest {
  }
  });
  }
- put(stream, callback) {
+ putStream(stream, callback) {
  this.config.authProvider((err, accessToken) => {
  if (err === null && accessToken !== null) {
  let url = this.buildFullUrl();

diff --git a/lib/index.d.ts b/lib/index.d.ts
@@ -55,6 +55,7 @@ export declare class GraphRequest {
  delete(callback?: GraphRequestCallback): Promise<any> | void;
  patch(content: any, callback?: GraphRequestCallback): Promise<any> | void;
  post(content: any, callback?: GraphRequestCallback): Promise<any> | void;
+ put(content: any, callback?: GraphRequestCallback): Promise<any> | void;
  create(content: any, callback?: GraphRequestCallback): Promise<any> | void;
  update(content: any, callback?: GraphRequestCallback): Promise<any> | void;
  del(callback?: GraphRequestCallback): Promise<any> | void;
@@ -63,7 +64,7 @@ export declare class GraphRequest {
  private routeResponseToCallback(requestBuilder, callback);
  private sendRequestAndRouteResponse(requestBuilder, callback?);
  getStream(callback: GraphRequestCallback): void;
- put(stream: any, callback: Function): void;
+ putStream(stream: any, callback: Function): void;
  private configureRequest(requestBuilder, accessToken);
  getResultIterator(): IterableIterator<(callback: any) => void>;
  query(queryDictionaryOrString: string | {

diff --git a/lib/index.js b/lib/index.js
diff --git a/lib/index.js.map b/lib/index.js.map
diff --git a/samples/browser/index.html b/samples/browser/index.html
@@ -22,12 +22,42 @@
 }
 console.log(res);
 });
+
+function updateProfilePicture() {
+var file = document.querySelector('input[type=file]').files[0];
+var reader = new FileReader();
+
+reader.addEventListener("load", function () {
+client
+.api('/me/photo/$value')
+.put(file, (err, res) => {
+if (err) {
+console.log(err);
+return;
+}
+console.log("We've updated your picture!");
+});
+}, false);
+
+if (file) {
+reader.readAsDataURL(file);
+}
+}
 </script>
 </head>
 <body>
-Open your browser JavaScript console to see the result!
+
+<p>
+By loading this page, we called /me endpoint on the Microsoft Graph. Open your browser JavaScript console to see the result!
+</p>
+<br>
+
+<p>
+Also, you can update your profile picture:
+<input type="file" onchange="updateProfilePicture()"><br>
+</p>
 <br>
+<p>Please check the Node.js sample for more examples on calling the Graph. This sample is just for how to include the SDK in an HTML page</p>
 
-Please check the Node.js sample for tons of examples on calling the graph. This sample is just for how to include the sdk in an HTML page
 </body>
 </html>
diff --git a/samples/node/node-sample.js b/samples/node/node-sample.js
@@ -259,7 +259,7 @@ client
 let photoReadStream = fs.createReadStream('../logo.png');
 client
  .api('/me/drive/root/children/logo234.png/content')
- .put(photoReadStream, (err) => {
+ .putStream(photoReadStream, (err) => {
  console.log(err);
  });
 
@@ -277,7 +277,7 @@ let profilePhotoReadStream = fs.createReadStream('me.jpg');
 
 client
  .api('/me/photo/$value')
- .put(profilePhotoReadStream, (err) => {
+ .putStream(profilePhotoReadStream, (err) => {
  if (err) {
  console.log(err);
  return;

diff --git a/src/index.ts b/src/index.ts
@@ -274,6 +274,17 @@ export class GraphRequest {
  );
  }
 
+ put(content:any, callback?:GraphRequestCallback):Promise<any>|void {
+ let url = this.buildFullUrl();
+ return this.sendRequestAndRouteResponse(
+ request
+ .put(url)
+ .type('application/octet-stream')
+ .send(content),
+ callback
+ );
+ }
+
  // request aliases
  // alias for post
  create(content:any, callback?:GraphRequestCallback):Promise<any>|void {
@@ -361,7 +372,7 @@ export class GraphRequest {
  });
  }
 
- put(stream:any, callback:Function) {
+ putStream(stream:any, callback:Function) {
  this.config.authProvider((err, accessToken) => {
  if (err === null && accessToken !== null) {
  let url = this.buildFullUrl();