<!--
You can `npm run web:update:frontpage:code:sample` to render this code snippet and
save it as a layout partial
-->
<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">$ npm install uppy --save</div></pre></td></tr></table></figure>

<figure class="highlight js"><figcaption><span>api-usage-example.ejs</span><a href="/examples/../api-usage-example.ejs">view raw</a></figcaption><table><tr><td class="code"><pre><div class="line"><span class="keyword">import</span> Uppy <span class="keyword">from</span> <span class="string">'uppy/lib/core'</span></div><div class="line"><span class="keyword">import</span> Dashboard <span class="keyword">from</span> <span class="string">'uppy/lib/plugins/Dashboard'</span></div><div class="line"><span class="keyword">import</span> Tus10 <span class="keyword">from</span> <span class="string">'uppy/lib/plugins/Tus10'</span></div><div class="line"><span class="keyword">import</span> Informer <span class="keyword">from</span> <span class="string">'uppy/lib/plugins/Informer'</span></div><div class="line"><span class="keyword">import</span> MetaData <span class="keyword">from</span> <span class="string">'uppy/lib/plugins/MetaData'</span></div><div class="line"> </div><div class="line"><span class="keyword">const</span> uppy = Uppy({autoProceed: <span class="literal">false</span>})</div><div class="line">  .use(Dashboard, {trigger: <span class="string">'#select-files'</span>})</div><div class="line">  .use(Informer, {target: Dashboard})</div><div class="line">  .use(Tus10, {endpoint: <span class="string">'://master.tus.io/files/'</span>})</div><div class="line">  .use(MetaData, {</div><div class="line">    fields: [</div><div class="line">      { id: <span class="string">'resizeTo'</span>, name: <span class="string">'Resize to'</span>, value: <span class="number">1200</span>, placeholder: <span class="string">'specify future image size'</span> },</div><div class="line">      { id: <span class="string">'description'</span>, name: <span class="string">'Description'</span>, value: <span class="string">'none'</span>, placeholder: <span class="string">'describe what the file is for'</span> }</div><div class="line">    ]</div><div class="line">  })</div><div class="line">  .run()</div><div class="line"> </div><div class="line">uppy.on(<span class="string">'core:success'</span>, (fileCount) =&gt; {</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">`Upload complete. We uploaded <span class="subst">${fileCount}</span> files!`</span>)</div><div class="line">})</div></pre></td></tr></table></figure>
