{"action":"created","comment":{"url":"https://api.github.com/repos/18F/calc/pulls/comments/70962912","id":70962912,"diff_hunk":"@@ -19,6 +19,109 @@\n     <a href=\"https://standards.usa.gov/\">U.S. Web Design Standards (USWDS)</a>.\n   </p>\n \n+  <h2 id=\"upload\">Upload</h2>\n+\n+  <p>\n+    Our upload widget is implemented using the techniques outlined in\n+    <a href=\"http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/\">Styling &amp; Customizing File Inputs the Smart Way</a> and\n+    <a href=\"https://css-tricks.com/drag-and-drop-file-uploading/\">Drag\n+    and Drop File Uploading</a> by Osvaldas Valutis.\n+  </p>\n+\n+  <p>\n+    The upload widget's <code>&lt;input&gt;</code> element does not currently\n+    support the <code>multiple</code> attribute, however&mdash;it is intended\n+    for single-file uploads only.\n+  </p>\n+\n+  {% example %}\n+  <form enctype=\"multipart/form-data\">\n+    <div class=\"upload\">\n+      <input type=\"file\" name=\"file\" id=\"file\">","path":"styleguide/templates/styleguide.html","position":22,"original_position":22,"commit_id":"065f051ad779902ee5d4934f3dad148a2f9d09cc","original_commit_id":"065f051ad779902ee5d4934f3dad148a2f9d09cc","user":{"login":"jseppi","id":697848,"avatar_url":"https://avatars.githubusercontent.com/u/697848?v=3","gravatar_id":"","url":"https://api.github.com/users/jseppi","html_url":"https://github.com/jseppi","followers_url":"https://api.github.com/users/jseppi/followers","following_url":"https://api.github.com/users/jseppi/following{/other_user}","gists_url":"https://api.github.com/users/jseppi/gists{/gist_id}","starred_url":"https://api.github.com/users/jseppi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jseppi/subscriptions","organizations_url":"https://api.github.com/users/jseppi/orgs","repos_url":"https://api.github.com/users/jseppi/repos","events_url":"https://api.github.com/users/jseppi/events{/privacy}","received_events_url":"https://api.github.com/users/jseppi/received_events","type":"User","site_admin":false},"body":"Sure thing!","created_at":"2016-07-15T12:19:18Z","updated_at":"2016-07-15T12:19:18Z","html_url":"https://github.com/18F/calc/pull/387#discussion_r70962912","pull_request_url":"https://api.github.com/repos/18F/calc/pulls/387","_links":{"self":{"href":"https://api.github.com/repos/18F/calc/pulls/comments/70962912"},"html":{"href":"https://github.com/18F/calc/pull/387#discussion_r70962912"},"pull_request":{"href":"https://api.github.com/repos/18F/calc/pulls/387"}}},"pull_request":{"url":"https://api.github.com/repos/18F/calc/pulls/387","id":77464489,"html_url":"https://github.com/18F/calc/pull/387","diff_url":"https://github.com/18F/calc/pull/387.diff","patch_url":"https://github.com/18F/calc/pull/387.patch","issue_url":"https://api.github.com/repos/18F/calc/issues/387","number":387,"state":"open","locked":false,"title":"[WIP] Add upload widget","user":{"login":"toolness","id":124687,"avatar_url":"https://avatars.githubusercontent.com/u/124687?v=3","gravatar_id":"","url":"https://api.github.com/users/toolness","html_url":"https://github.com/toolness","followers_url":"https://api.github.com/users/toolness/followers","following_url":"https://api.github.com/users/toolness/following{/other_user}","gists_url":"https://api.github.com/users/toolness/gists{/gist_id}","starred_url":"https://api.github.com/users/toolness/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/toolness/subscriptions","organizations_url":"https://api.github.com/users/toolness/orgs","repos_url":"https://api.github.com/users/toolness/repos","events_url":"https://api.github.com/users/toolness/events{/privacy}","received_events_url":"https://api.github.com/users/toolness/received_events","type":"User","site_admin":false},"body":"**[The current work-in-progress can temporarily be viewed here.](http://54.87.247.188/styleguide/#upload)**\r\n\r\n## To Do\r\n\r\n- [x] Add unit tests. Maybe take inspiration from [bootstrap's test suite](https://github.com/twbs/bootstrap/tree/master/js/tests#readme)?\r\n- [x] ~~Consider integrating [dragula](https://github.com/bevacqua/dragula).~~ Looks like it'll take some time to understand dragula and integrate it, so I'd rather do that in a separate PR.\r\n- [ ] Consider filing a separate PR that fixes #389, and filing this on top of that.\r\n- [x] Maybe add `aria-hidden=\"true\"` to `<span class=\"js-only\">or drag and drop here.</span>` since it's not really relevant to non-sighted users (I think?).\r\n\r\n## Notes\r\n\r\n* One frustrating thing about using HTML5 Drag-and-Drop is that once you opt-in to it, you also have to do any file uploads via Ajax, because `<input type=\"file\">` is read-only.  So we'll have to support that out-of-the-box too.\r\n* This widget provides visual feedback when the user is dragging a file over it, it's just currently very subtle (switches background from off-white to white).  We can make it more obvious easily, though.\r\n* The widget works without degradation in IE11 and the latest versions of Chrome, Firefox, Edge, and Safari.\r\n* The widget reads fine on NVDA and VoiceOver. We dynamically add `aria-live=\"polite\"` to the upload widget so that its changes are narrated to the user.\r\n","created_at":"2016-07-14T14:22:13Z","updated_at":"2016-07-15T12:19:18Z","closed_at":null,"merged_at":null,"merge_commit_sha":"e124ebeca515a2712a0451cee4f4ba9e2d44a56c","assignee":null,"assignees":[],"milestone":null,"commits_url":"https://api.github.com/repos/18F/calc/pulls/387/commits","review_comments_url":"https://api.github.com/repos/18F/calc/pulls/387/comments","review_comment_url":"https://api.github.com/repos/18F/calc/pulls/comments{/number}","comments_url":"https://api.github.com/repos/18F/calc/issues/387/comments","statuses_url":"https://api.github.com/repos/18F/calc/statuses/065f051ad779902ee5d4934f3dad148a2f9d09cc","head":{"label":"18F:upload-widget","ref":"upload-widget","sha":"065f051ad779902ee5d4934f3dad148a2f9d09cc","user":{"login":"18F","id":6233994,"avatar_url":"https://avatars.githubusercontent.com/u/6233994?v=3","gravatar_id":"","url":"https://api.github.com/users/18F","html_url":"https://github.com/18F","followers_url":"https://api.github.com/users/18F/followers","following_url":"https://api.github.com/users/18F/following{/other_user}","gists_url":"https://api.github.com/users/18F/gists{/gist_id}","starred_url":"https://api.github.com/users/18F/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/18F/subscriptions","organizations_url":"https://api.github.com/users/18F/orgs","repos_url":"https://api.github.com/users/18F/repos","events_url":"https://api.github.com/users/18F/events{/privacy}","received_events_url":"https://api.github.com/users/18F/received_events","type":"Organization","site_admin":false},"repo":{"id":26967517,"name":"calc","full_name":"18F/calc","owner":{"login":"18F","id":6233994,"avatar_url":"https://avatars.githubusercontent.com/u/6233994?v=3","gravatar_id":"","url":"https://api.github.com/users/18F","html_url":"https://github.com/18F","followers_url":"https://api.github.com/users/18F/followers","following_url":"https://api.github.com/users/18F/following{/other_user}","gists_url":"https://api.github.com/users/18F/gists{/gist_id}","starred_url":"https://api.github.com/users/18F/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/18F/subscriptions","organizations_url":"https://api.github.com/users/18F/orgs","repos_url":"https://api.github.com/users/18F/repos","events_url":"https://api.github.com/users/18F/events{/privacy}","received_events_url":"https://api.github.com/users/18F/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/18F/calc","description":"An estimator for hourly rates on professional services contracts","fork":false,"url":"https://api.github.com/repos/18F/calc","forks_url":"https://api.github.com/repos/18F/calc/forks","keys_url":"https://api.github.com/repos/18F/calc/keys{/key_id}","collaborators_url":"https://api.github.com/repos/18F/calc/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/18F/calc/teams","hooks_url":"https://api.github.com/repos/18F/calc/hooks","issue_events_url":"https://api.github.com/repos/18F/calc/issues/events{/number}","events_url":"https://api.github.com/repos/18F/calc/events","assignees_url":"https://api.github.com/repos/18F/calc/assignees{/user}","branches_url":"https://api.github.com/repos/18F/calc/branches{/branch}","tags_url":"https://api.github.com/repos/18F/calc/tags","blobs_url":"https://api.github.com/repos/18F/calc/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/18F/calc/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/18F/calc/git/refs{/sha}","trees_url":"https://api.github.com/repos/18F/calc/git/trees{/sha}","statuses_url":"https://api.github.com/repos/18F/calc/statuses/{sha}","languages_url":"https://api.github.com/repos/18F/calc/languages","stargazers_url":"https://api.github.com/repos/18F/calc/stargazers","contributors_url":"https://api.github.com/repos/18F/calc/contributors","subscribers_url":"https://api.github.com/repos/18F/calc/subscribers","subscription_url":"https://api.github.com/repos/18F/calc/subscription","commits_url":"https://api.github.com/repos/18F/calc/commits{/sha}","git_commits_url":"https://api.github.com/repos/18F/calc/git/commits{/sha}","comments_url":"https://api.github.com/repos/18F/calc/comments{/number}","issue_comment_url":"https://api.github.com/repos/18F/calc/issues/comments{/number}","contents_url":"https://api.github.com/repos/18F/calc/contents/{+path}","compare_url":"https://api.github.com/repos/18F/calc/compare/{base}...{head}","merges_url":"https://api.github.com/repos/18F/calc/merges","archive_url":"https://api.github.com/repos/18F/calc/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/18F/calc/downloads","issues_url":"https://api.github.com/repos/18F/calc/issues{/number}","pulls_url":"https://api.github.com/repos/18F/calc/pulls{/number}","milestones_url":"https://api.github.com/repos/18F/calc/milestones{/number}","notifications_url":"https://api.github.com/repos/18F/calc/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/18F/calc/labels{/name}","releases_url":"https://api.github.com/repos/18F/calc/releases{/id}","deployments_url":"https://api.github.com/repos/18F/calc/deployments","created_at":"2014-11-21T16:22:24Z","updated_at":"2016-07-14T22:57:21Z","pushed_at":"2016-07-14T23:01:10Z","git_url":"git://github.com/18F/calc.git","ssh_url":"git@github.com:18F/calc.git","clone_url":"https://github.com/18F/calc.git","svn_url":"https://github.com/18F/calc","homepage":"https://calc.gsa.gov/","size":13572,"stargazers_count":73,"watchers_count":73,"language":"Python","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":38,"mirror_url":null,"open_issues_count":42,"forks":38,"open_issues":42,"watchers":73,"default_branch":"develop"}},"base":{"label":"18F:develop","ref":"develop","sha":"7a958df214d55f17f60f6a0e1cc8df89239f65e7","user":{"login":"18F","id":6233994,"avatar_url":"https://avatars.githubusercontent.com/u/6233994?v=3","gravatar_id":"","url":"https://api.github.com/users/18F","html_url":"https://github.com/18F","followers_url":"https://api.github.com/users/18F/followers","following_url":"https://api.github.com/users/18F/following{/other_user}","gists_url":"https://api.github.com/users/18F/gists{/gist_id}","starred_url":"https://api.github.com/users/18F/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/18F/subscriptions","organizations_url":"https://api.github.com/users/18F/orgs","repos_url":"https://api.github.com/users/18F/repos","events_url":"https://api.github.com/users/18F/events{/privacy}","received_events_url":"https://api.github.com/users/18F/received_events","type":"Organization","site_admin":false},"repo":{"id":26967517,"name":"calc","full_name":"18F/calc","owner":{"login":"18F","id":6233994,"avatar_url":"https://avatars.githubusercontent.com/u/6233994?v=3","gravatar_id":"","url":"https://api.github.com/users/18F","html_url":"https://github.com/18F","followers_url":"https://api.github.com/users/18F/followers","following_url":"https://api.github.com/users/18F/following{/other_user}","gists_url":"https://api.github.com/users/18F/gists{/gist_id}","starred_url":"https://api.github.com/users/18F/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/18F/subscriptions","organizations_url":"https://api.github.com/users/18F/orgs","repos_url":"https://api.github.com/users/18F/repos","events_url":"https://api.github.com/users/18F/events{/privacy}","received_events_url":"https://api.github.com/users/18F/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/18F/calc","description":"An estimator for hourly rates on professional services contracts","fork":false,"url":"https://api.github.com/repos/18F/calc","forks_url":"https://api.github.com/repos/18F/calc/forks","keys_url":"https://api.github.com/repos/18F/calc/keys{/key_id}","collaborators_url":"https://api.github.com/repos/18F/calc/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/18F/calc/teams","hooks_url":"https://api.github.com/repos/18F/calc/hooks","issue_events_url":"https://api.github.com/repos/18F/calc/issues/events{/number}","events_url":"https://api.github.com/repos/18F/calc/events","assignees_url":"https://api.github.com/repos/18F/calc/assignees{/user}","branches_url":"https://api.github.com/repos/18F/calc/branches{/branch}","tags_url":"https://api.github.com/repos/18F/calc/tags","blobs_url":"https://api.github.com/repos/18F/calc/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/18F/calc/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/18F/calc/git/refs{/sha}","trees_url":"https://api.github.com/repos/18F/calc/git/trees{/sha}","statuses_url":"https://api.github.com/repos/18F/calc/statuses/{sha}","languages_url":"https://api.github.com/repos/18F/calc/languages","stargazers_url":"https://api.github.com/repos/18F/calc/stargazers","contributors_url":"https://api.github.com/repos/18F/calc/contributors","subscribers_url":"https://api.github.com/repos/18F/calc/subscribers","subscription_url":"https://api.github.com/repos/18F/calc/subscription","commits_url":"https://api.github.com/repos/18F/calc/commits{/sha}","git_commits_url":"https://api.github.com/repos/18F/calc/git/commits{/sha}","comments_url":"https://api.github.com/repos/18F/calc/comments{/number}","issue_comment_url":"https://api.github.com/repos/18F/calc/issues/comments{/number}","contents_url":"https://api.github.com/repos/18F/calc/contents/{+path}","compare_url":"https://api.github.com/repos/18F/calc/compare/{base}...{head}","merges_url":"https://api.github.com/repos/18F/calc/merges","archive_url":"https://api.github.com/repos/18F/calc/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/18F/calc/downloads","issues_url":"https://api.github.com/repos/18F/calc/issues{/number}","pulls_url":"https://api.github.com/repos/18F/calc/pulls{/number}","milestones_url":"https://api.github.com/repos/18F/calc/milestones{/number}","notifications_url":"https://api.github.com/repos/18F/calc/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/18F/calc/labels{/name}","releases_url":"https://api.github.com/repos/18F/calc/releases{/id}","deployments_url":"https://api.github.com/repos/18F/calc/deployments","created_at":"2014-11-21T16:22:24Z","updated_at":"2016-07-14T22:57:21Z","pushed_at":"2016-07-14T23:01:10Z","git_url":"git://github.com/18F/calc.git","ssh_url":"git@github.com:18F/calc.git","clone_url":"https://github.com/18F/calc.git","svn_url":"https://github.com/18F/calc","homepage":"https://calc.gsa.gov/","size":13572,"stargazers_count":73,"watchers_count":73,"language":"Python","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":38,"mirror_url":null,"open_issues_count":42,"forks":38,"open_issues":42,"watchers":73,"default_branch":"develop"}},"_links":{"self":{"href":"https://api.github.com/repos/18F/calc/pulls/387"},"html":{"href":"https://github.com/18F/calc/pull/387"},"issue":{"href":"https://api.github.com/repos/18F/calc/issues/387"},"comments":{"href":"https://api.github.com/repos/18F/calc/issues/387/comments"},"review_comments":{"href":"https://api.github.com/repos/18F/calc/pulls/387/comments"},"review_comment":{"href":"https://api.github.com/repos/18F/calc/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/18F/calc/pulls/387/commits"},"statuses":{"href":"https://api.github.com/repos/18F/calc/statuses/065f051ad779902ee5d4934f3dad148a2f9d09cc"}}}}
{"actor":{"display_login":"jseppi"}}