https://uppy.io/assets/js/30a09441.cc0b624d.js

1"use strict";(globalThis.webpackChunkuppy_io=globalThis.webpackChunkuppy_io||[]).push([[5771],{4937:e=>{e.exports=JSON.parse('{"permalink":"/blog/2016/09/0.10","editUrl":"https://github.com/transloadit/uppy.io/tree/main/blog/2016-09-0.10.md","source":"@site/blog/2016-09-0.10.md","title":"Uppy 0.10: Getting together, the future, Google Drive UI, exposed events","description":"Hi! Another month has passed and we have just released a new version of Uppy.","date":"2016-09-28T00:00:00.000Z","tags":[],"readingTime":5.6,"hasTruncateMarker":true,"authors":[{"email":"[email protected]","name":"Artur Paikin","id":"artur","tagline":"Developer","imageURL":"https://github.com/arturi.png","key":"arturi","page":null}],"frontMatter":{"title":"Uppy 0.10: Getting together, the future, Google Drive UI, exposed events","date":"2016-09-28T00:00:00.000Z","authors":["arturi"],"published":true,"slug":"2016/09/0.10"},"unlisted":false,"prevItem":{"title":"Uppy 0.11: StatusBar, research, https and API docs","permalink":"/blog/2016/11/0.11"},"nextItem":{"title":"Uppy 0.9: Making Progress, then pause & resume. Remote file uploads, Informer.","permalink":"/blog/2016/08/0.9.0"}}')},9289:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>o,default:()=>c,frontMatter:()=>a,metadata:()=>s,toc:()=>d});var s=n(4937),r=n(74848),i=n(28453);const a={title:"Uppy 0.10: Getting together, the future, Google Drive UI, exposed events",date:new Date("2016-09-28T00:00:00.000Z"),authors:["arturi"],published:!0,slug:"2016/09/0.10"},o=void 0,l={authorsImageUrls:[void 0]},d=[{value:"Thinking about the future \ud83d\udd2e",id:"thinking-about-the-future-",level:2},{value:"Dashboard: refreshed look and new features",id:"dashboard-refreshed-look-and-new-features",level:2},{value:"Google Drive UI improved",id:"google-drive-ui-improved",level:2},{value:"Listen to events",id:"listen-to-events",level:2},{value:"But wait, there\u2019s more!",id:"but-wait-theres-more",level:2},{value:"Release Notes",id:"release-notes",level:2}];function h(e){const t={a:"a",code:"code",h2:"h2",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.p,{children:"Hi! Another month has passed and we have just released a new version of Uppy.\nHere\u2019s what we\u2019ve been up to."}),"\n",(0,r.jsx)(t.h2,{id:"thinking-about-the-future-",children:"Thinking about the future \ud83d\udd2e"}),"\n",(0,r.jsx)(t.p,{children:"We have been spending quite a lot of time thinking about Uppy's future and the\ndirection in which we would like to take this project. Our primary concern is\nmaking Uppy as flexible as possible as well as compatible with popular\nlibraries, such as React and React Native. We also want to make it easy to port\nUppy to any environments or ecosystems that are not officially supported."}),"\n",(0,r.jsxs)(t.p,{children:["We have done a lot of research. We created\n",(0,r.jsx)(t.a,{href:"https://github.com/hedgerh/uppy-react",children:"prototypes of Uppy React components"}),' and\nwe also created a new module that we like to call "Uppy Base."\n',(0,r.jsx)(t.a,{href:"https://github.com/hedgerh/uppy-base",children:(0,r.jsx)(t.code,{children:"uppy-base"})})," is a thin module containing\nreusable functionality from some of our plugins that can be used in any\necosystem or environment, without being opinionated about the UI."]}),"\n",(0,r.jsxs)(t.p,{children:["Finally, we are also discussing using ",(0,r.jsx)(t.a,{href:"https://github.com/reactjs/redux",children:"Redux"}),"\nas the internal state management store within Uppy. You can see some drafts\nunder the ",(0,r.jsx)(t.code,{children:"src/experimental"})," folder (EDIT: this folder has since been removed)."]}),"\n",(0,r.jsxs)(t.p,{children:["Have a look at the\n",(0,r.jsx)(t.a,{href:"https://github.com/hedgerh/uppy-base",children:"Uppy Base repository here"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["Check out\n",(0,r.jsx)(t.a,{href:"https://github.com/hedgerh/uppy-react",children:"our Uppy React wrapper and components"}),",\nwhich are built on top of Uppy Base."]}),"\n",(0,r.jsxs)(t.p,{children:["Finally, we have played a bit with ",(0,r.jsx)(t.a,{href:"https://github.com/css-modules",children:"CSS Modules"}),"\nand ",(0,r.jsx)(t.a,{href:"https://github.com/rtsao/csjs",children:"CSJS"}),". We have also tried generating preview\nthumbnails in Web Workers, as well as with\n",(0,r.jsx)(t.a,{href:"https://github.com/nodeca/pica",children:"Pica library"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["We would love to hear feedback on all of this. Please join our discussion at:\n",(0,r.jsx)(t.a,{href:"https://github.com/transloadit/uppy/issues/116",children:"https://github.com/transloadit/uppy/issues/116"})]}),"\n",(0,r.jsx)(t.p,{children:"You are, of course, more than welcome to chime in on other issues or to open new\nones!"}),"\n",(0,r.jsx)(t.h2,{id:"dashboard-refreshed-look-and-new-features",children:"Dashboard: refreshed look and new features"}),"\n",(0,r.jsxs)(t.p,{children:["In an attempt to be brave and keep things simple, we have removed the dashed\nborder from inside the Dashboard, rewritten its layout with flexbox, and tried\nout a new\n",(0,r.jsx)(t.a,{href:"https://cloud.githubusercontent.com/assets/1199054/18763191/35d31ddc-80da-11e6-9a2c-c46388857135.png",children:"blend-in-with-the-background-and-blur"}),"\nmode."]}),"\n",(0,r.jsx)(t.img,{alt:"Refreshed Dashboard UI",src:"/img/blog/0.10/dashboard-sep-27-2016.jpg"}),"\n",(0,r.jsxs)(t.p,{children:["Uppy now also has the option to render the Dashboard inline on the page, instead\nof the default full modal dialog. To try it out, set ",(0,r.jsx)(t.code,{children:"inline: true"})," in options,\nlike this: ",(0,r.jsx)(t.code,{children:"uppy.use(Dashboard, {target: '.myContainer', inline: true})"}),"."]}),"\n",(0,r.jsx)(t.p,{children:"We have also added a circular progress bar that shows total upload progress,\ncombined with a pause all / resume all button, and an info panel that shows\nspeed, ETA and status for all uploads currently in progress. So you'll have\nsomething fun and useful to look at while you are waiting!"}),"\n",(0,r.jsx)(t.img,{alt:"Dashboard UI with global pause/resume buttons and a status bar \u2014 progress speed & ETA",src:"/img/blog/0.10/dashboard-pause-resume-sep-27-2016.jpg"}),"\n",(0,r.jsx)(t.p,{children:"Be sure not to miss out on the new Copy Link button that appears after a\nsuccessful upload, right where the edit button usually is. We know, that\u2019s\npretty exciting! And it gets even better: when you click on it, the link is\ncopied to your clipboard. Or, in less capable browsers, a window pops up with a\ntext link, so you can copy it yourself. Bananas!"}),"\n",(0,r.jsx)(t.h2,{id:"google-drive-ui-improved",children:"Google Drive UI improved"}),"\n",(0,r.jsx)(t.p,{children:"The UI for Google Drive has received a fresh new redesign. Check it out!"}),"\n",(0,r.jsx)(t.img,{alt:"The redesigned file browser UI for Google Drive",src:"/img/blog/0.10/google-drive-ui-sep-27-2016.jpg"}),"\n",(0,r.jsx)(t.h2,{id:"listen-to-events",children:"Listen to events"}),"\n",(0,r.jsxs)(t.p,{children:["We have finally begun to expose events on the ",(0,r.jsx)(t.code,{children:"uppy"})," instance, so you can now\nsubscribe to them and use them in your app. For example, in order to display an\nimage in your UI after it has been successfully uploaded:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-javascript",children:"uppy.on('core:upload-success', (id, url) => {\n\tconst img = new Image();\n\timg.width = 300;\n\timg.alt = id;\n\timg.src = url;\n\tdocument.body.appendChild(img);\n});\n"})}),"\n",(0,r.jsxs)(t.p,{children:["There is also ",(0,r.jsx)(t.code,{children:"core:upload-progress"})," to track progress and ",(0,r.jsx)(t.code,{children:"core:success"})," for\nwhen all uploads are complete. The\n",(0,r.jsx)(t.a,{href:"https://github.com/transloadit/uppy/#api",children:"event documentation"})," is quite small\nright now, we\u2019ll be adding more once we sort out the API."]}),"\n",(0,r.jsx)(t.h2,{id:"but-wait-theres-more",children:"But wait, there\u2019s more!"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"i18n strings now extend default en_US dictionary: if a certain string is not\navailable in a language, the English string will be displayed."}),"\n",(0,r.jsxs)(t.li,{children:["Updated readme: improved usage docs and CDN links. Check out\n",(0,r.jsx)(t.a,{href:"https://github.com/transloadit/uppy/#usage",children:"the new usage section"})," for\nyourself. Import, require or script tag? In any case, we\u2019ve got your back."]}),"\n",(0,r.jsxs)(t.li,{children:["Capabilities: we have added ",(0,r.jsx)(t.code,{children:"capabilities"})," to the state. For example, if 'tus'\nresumable uploader is used, ",(0,r.jsx)(t.code,{children:"capabilities.resumable === true"})," is added to the\nstate, so it is easy to check what upload capabilities are available. More to\ncome."]}),"\n"]}),"\n",(0,r.jsx)(t.h2,{id:"release-notes",children:"Release Notes"}),"\n",(0,r.jsx)(t.p,{children:"Here is the full list of changes for version 0.10.0:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["core: expose some events/APIs/callbacks to the user: ",(0,r.jsx)(t.code,{children:"onFileUploaded"}),",\n",(0,r.jsx)(t.code,{children:"onFileSelected"}),", ",(0,r.jsx)(t.code,{children:"onAllUploaded"}),", ",(0,r.jsx)(t.code,{children:"addFile"})," (or ",(0,r.jsx)(t.code,{children:"parseFile"}),"), open modal...\n(@arturi, @hedgerh)"]}),"\n",(0,r.jsx)(t.li,{children:"core: how would Uppy work without the UI, if one wants to Uppy to just add\nfiles and upload, while rendering preview and UI by themselves #116 \u2014\ndiscussion Part 1 (@arturi, @hedgerh)"}),"\n",(0,r.jsxs)(t.li,{children:["core: refactor towards react compatibility as discu

1ssed in\n",(0,r.jsx)(t.a,{href:"https://github.com/transloadit/uppy/issues/110",children:"https://github.com/transloadit/uppy/issues/110"})," (@hedgerh)"]}),"\n",(0,r.jsxs)(t.li,{children:["core: CSS modules? allow bundling of CSS in JS for simple use in NPM? See\n",(0,r.jsx)(t.a,{href:"https://github.com/transloadit/uppy/issues/120#issuecomment-242455042",children:"https://github.com/transloadit/uppy/issues/120#issuecomment-242455042"}),", try\n",(0,r.jsx)(t.a,{href:"https://github.com/rtsao/csjs",children:"https://github.com/rtsao/csjs"})," \u2014 verdict: not yet, try again later (@arturi,\n@hedgerh)"]}),"\n",(0,r.jsx)(t.li,{children:"core: try Web Workers and FileReaderSync for image resizing again \u2014 still\nslow, probably message payload between webworker and regular thread is huge\n(@arturi)"}),"\n",(0,r.jsxs)(t.li,{children:["core: i18n strings should extend default ",(0,r.jsx)(t.code,{children:"en_US"})," dictionary \u2014 if a certain\nstring in not available in German, English should be displayed (@arturi)"]}),"\n",(0,r.jsx)(t.li,{children:"dashboard: refactor to smaller components, pass props down (@arturi)"}),"\n",(0,r.jsx)(t.li,{children:"dashboard: option to render Dashboard inline instead of a modal dialog\n(@arturi)"}),"\n",(0,r.jsx)(t.li,{children:"dashboard: global circular progress bar, try out different designs for total\nupload speed and ETA (@arturi)"}),"\n",(0,r.jsx)(t.li,{children:"dashboard: show total upload speed and ETA, for all files (@arturi)"}),"\n",(0,r.jsxs)(t.li,{children:["dashboard: copy link to uploaded file button, cross-browser (@arturi)\n(",(0,r.jsx)(t.a,{href:"http://i.imgur.com/b1I

1o34n.png",children:"http://i.imgur.com/b1Io34n.png"}),") (@arturi)"]}),"\n",(0,r.jsx)(t.li,{children:"dashobard: refreshed design and grand refactor (@arturi)"}),"\n",(0,r.jsxs)(t.li,{children:["dashboard: improve file paste the best we can\n",(0,r.jsx)(t.a,{href:"http://stackoverflow.com/a/22940020",children:"http://stackoverflow.com/a/22940020"})," (@arturi)"]}),"\n",(0,r.jsx)(t.li,{children:"provider: abstract google drive into provider plugin for reuse (@hedgerh)"}),"\n",(0,r.jsx)(t.li,{children:"google drive: improve UI (@hedgerh)"}),"\n",(0,r.jsxs)(t.li,{children:["tus: add ",(0,r.jsx)(t.code,{children:"resumable"})," capability flag (@arturi)"]}),"\n",(0,r.jsx)(t.li,{children:"tus: start fixing pause/resume issues and race conditions (@arturi)"}),"\n",(0,r.jsxs)(t.li,{children:["test: working Uppy example on Require Bin \u2014 latest version straight from NPM\n",(0,r.jsx)(t.a,{href:"http://requirebin.com/?gist=54e076cccc929cc567cb0aba38815105",children:"http://requirebin.com/?gist=54e076cccc929cc567cb0aba38815105"})," (@arturi\n@account)"]}),"\n",(0,r.jsxs)(t.li,{children:["meta: update readme docs, add unpkg CDN links\n(",(0,r.jsx)(t.a,{href:"https://unpkg.com/uppy/dist/uppy.min.css",children:"https://unpkg.com/uppy/dist/uppy.min.css"}),") (@arturi)"]}),"\n",(0,r.jsx)(t.li,{children:"meta: write 0.10 release blog post (@arturi)"}),"\n"]}),"\n",(0,r.jsx)(t.p,{children:"We\u2019ll see you in about a month!"}),"\n",(0,r.jsx)(t.p,{children:"The Uppy Team"})]})}function c(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},28453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>o});var s=n(96540);const r={},i=s.createContext(r);function a(e){const t=s.useContext(i);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]);