<!DOCTYPE html>
<!-- Generated by pkgdown: do not edit by hand --><html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Storage • firebase</title>
<!-- favicons --><link rel="icon" type="image/png" sizes="16x16" href="../favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="../favicon-32x32.png">
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="../apple-touch-icon.png">
<link rel="apple-touch-icon" type="image/png" sizes="120x120" href="../apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" type="image/png" sizes="76x76" href="../apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" type="image/png" sizes="60x60" href="../apple-touch-icon-60x60.png">
<!-- jquery --><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script><!-- Bootstrap --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha256-bZLfwXAP04zRMK2BjiO8iu9pf4FbLqX6zitd+tIvLhE=" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha256-nuL8/2cJ5NDSSwnKD8VqreErSWHtnEP9E7AySL+1ev4=" crossorigin="anonymous"></script><!-- bootstrap-toc --><link rel="stylesheet" href="../bootstrap-toc.css">
<script src="../bootstrap-toc.js"></script><!-- Font Awesome icons --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/v4-shims.min.css" integrity="sha256-wZjR52fzng1pJHwx4aV2AO3yyTOXrcDW7jBpJtTwVxw=" crossorigin="anonymous">
<!-- clipboard.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js" integrity="sha256-inc5kl9MA1hkeYUt+EC3BhlIgyp/2jDIyBLS6k3UxPI=" crossorigin="anonymous"></script><!-- headroom.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/headroom.min.js" integrity="sha256-AsUX4SJE1+yuDu5+mAVzJbuYNPHj/WroHuZ8Ir/CkE0=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/jQuery.headroom.min.js" integrity="sha256-ZX/yNShbjqsohH1k95liqY9Gd8uOiE1S4vZc+9KQ1K4=" crossorigin="anonymous"></script><!-- pkgdown --><link href="../pkgdown.css" rel="stylesheet">
<script src="../pkgdown.js"></script><meta property="og:title" content="Storage">
<meta property="og:description" content="firebase">
<meta property="og:image" content="/logo.png">
<!-- mathjax --><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js" integrity="sha256-nvJJv9wWKEm88qvoQl9ekL2J+k/RWIsaSScxxlsrv8k=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/config/TeX-AMS-MML_HTMLorMML.js" integrity="sha256-84DKXVJXs0/F8OTMzX4UR909+jtl4G7SPypPavF+GfA=" crossorigin="anonymous"></script><!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target="#toc">
    

    <div class="container template-article">
      <header><div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">
        <a class="navbar-link" href="../index.html">firebase</a>
        <span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="">1.0.1.9000</span>
      </span>
    </div>

    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
<li>
  <a href="../reference/index.html">Reference</a>
</li>
<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Articles
     
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu" role="menu">
<li>
      <a href="../articles/analytics.html">Storage</a>
    </li>
    <li>
      <a href="../articles/demo.html">Demo</a>
    </li>
    <li>
      <a href="../articles/email-link.html">Email Link</a>
    </li>
    <li>
      <a href="../articles/email-password.html">Email &amp; Password</a>
    </li>
    <li>
      <a href="../articles/flow.html">flow</a>
    </li>
    <li>
      <a href="../articles/get-started.html">Get Started</a>
    </li>
    <li>
      <a href="../articles/manage.html">Manage Users</a>
    </li>
    <li>
      <a href="../articles/oauth-providers.html">Oauth Providers</a>
    </li>
    <li>
      <a href="../articles/phone.html">phone</a>
    </li>
    <li>
      <a href="../articles/social.html">Social Sites</a>
    </li>
    <li>
      <a href="../articles/state-persistence.html">state-persistence</a>
    </li>
    <li>
      <a href="../articles/storage.html">Storage</a>
    </li>
    <li>
      <a href="../articles/ui.html">Prebuilt UI</a>
    </li>
  </ul>
</li>
<li>
  <a href="../news/index.html">Changelog</a>
</li>
      </ul>
<ul class="nav navbar-nav navbar-right">
<li>
  <a href="https://github.com/JohnCoene/firebase/" class="external-link">
    <span class="fab fa-github fa-lg"></span>
     
  </a>
</li>
      </ul>
</div>
<!--/.nav-collapse -->
  </div>
<!--/.container -->
</div>
<!--/.navbar -->

      

      </header><div class="row">
  <div class="col-md-9 contents">
    <div class="page-header toc-ignore">
      <h1 data-toc-skip>Storage</h1>
            
      
      <small class="dont-index">Source: <a href="https://github.com/JohnCoene/firebase/blob/HEAD/vignettes/storage.Rmd" class="external-link"><code>vignettes/storage.Rmd</code></a></small>
      <div class="hidden name"><code>storage.Rmd</code></div>

    </div>

    
    
<div class="section level2">
<h2 id="introduction">Introduction<a class="anchor" aria-label="anchor" href="#introduction"></a>
</h2>
<p>Firebase comes with many features, it is not limited to
authentication. This document covers <a href="https://firebase.google.com/docs/storage" class="external-link">Firebase Storage</a>, a
storage system akin to AWS S3 though more flexible.</p>
<p>Firebase Storage stores files, you can add files, download files,
delete files, and list the files. These files can be in buckets, or
directories.</p>
<p>This requires the authentication to work, which has the advantage of
easily ensuring that only those who may access certain files can.</p>
<p>Let’s start from a basic application that features authentication.
The app below uses the pre-built UI, probably the simplest app that can
be made using Firebase.</p>
<div class="sourceCode" id="cb1"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="kw"><a href="https://rdrr.io/r/base/library.html" class="external-link">library</a></span><span class="op">(</span><span class="va"><a href="https://shiny.rstudio.com/" class="external-link">shiny</a></span><span class="op">)</span></span>
<span><span class="kw"><a href="https://rdrr.io/r/base/library.html" class="external-link">library</a></span><span class="op">(</span><span class="va"><a href="https://firebase.john-coene.com/" class="external-link">firebase</a></span><span class="op">)</span></span>
<span></span>
<span><span class="va">ui</span> <span class="op">&lt;-</span> <span class="fu"><a href="https://rdrr.io/pkg/shiny/man/fluidPage.html" class="external-link">fluidPage</a></span><span class="op">(</span></span>
<span>  <span class="fu"><a href="../reference/dependencies.html">useFirebase</a></span><span class="op">(</span><span class="op">)</span>, <span class="co"># import dependencies</span></span>
<span>  <span class="fu"><a href="../reference/dependencies.html">firebaseUIContainer</a></span><span class="op">(</span><span class="op">)</span>,</span>
<span>  <span class="fu"><a href="../reference/reqSignin.html">reqSignin</a></span><span class="op">(</span><span class="fu"><a href="https://rstudio.github.io/htmltools/reference/builder.html" class="external-link">h4</a></span><span class="op">(</span><span class="st">"Logged in!"</span><span class="op">)</span><span class="op">)</span> <span class="co"># hide from UI</span></span>
<span><span class="op">)</span></span>
<span></span>
<span><span class="va">server</span> <span class="op">&lt;-</span> <span class="kw">function</span><span class="op">(</span><span class="va">input</span>, <span class="va">output</span><span class="op">)</span><span class="op">{</span></span>
<span>  <span class="va">f</span> <span class="op">&lt;-</span> <span class="va"><a href="../reference/FirebaseUI.html">FirebaseUI</a></span><span class="op">$</span></span>
<span>    <span class="fu">new</span><span class="op">(</span><span class="op">)</span><span class="op">$</span> <span class="co"># instantiate</span></span>
<span>    <span class="fu">set_providers</span><span class="op">(</span> <span class="co"># define providers</span></span>
<span>      email <span class="op">=</span> <span class="cn">TRUE</span>, </span>
<span>      google <span class="op">=</span> <span class="cn">TRUE</span></span>
<span>    <span class="op">)</span><span class="op">$</span></span>
<span>    <span class="fu">launch</span><span class="op">(</span><span class="op">)</span> <span class="co"># launch</span></span>
<span><span class="op">}</span></span>
<span></span>
<span><span class="fu"><a href="https://rdrr.io/pkg/shiny/man/shinyApp.html" class="external-link">shinyApp</a></span><span class="op">(</span><span class="va">ui</span>, <span class="va">server</span><span class="op">)</span></span></code></pre></div>
</div>
<div class="section level2">
<h2 id="initialise">Initialise<a class="anchor" aria-label="anchor" href="#initialise"></a>
</h2>
<p>To use the storage we need to Initialise it client-side, it’s very
simple.</p>
<div class="sourceCode" id="cb2"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="kw"><a href="https://rdrr.io/r/base/library.html" class="external-link">library</a></span><span class="op">(</span><span class="va"><a href="https://shiny.rstudio.com/" class="external-link">shiny</a></span><span class="op">)</span></span>
<span><span class="kw"><a href="https://rdrr.io/r/base/library.html" class="external-link">library</a></span><span class="op">(</span><span class="va"><a href="https://firebase.john-coene.com/" class="external-link">firebase</a></span><span class="op">)</span></span>
<span></span>
<span><span class="va">ui</span> <span class="op">&lt;-</span> <span class="fu"><a href="https://rdrr.io/pkg/shiny/man/fluidPage.html" class="external-link">fluidPage</a></span><span class="op">(</span></span>
<span>  <span class="fu"><a href="../reference/dependencies.html">useFirebase</a></span><span class="op">(</span><span class="op">)</span>, <span class="co"># import dependencies</span></span>
<span>  <span class="fu"><a href="../reference/dependencies.html">firebaseUIContainer</a></span><span class="op">(</span><span class="op">)</span>,</span>
<span>  <span class="fu"><a href="../reference/reqSignin.html">reqSignin</a></span><span class="op">(</span><span class="fu"><a href="https://rstudio.github.io/htmltools/reference/builder.html" class="external-link">h4</a></span><span class="op">(</span><span class="st">"Logged in!"</span><span class="op">)</span><span class="op">)</span> <span class="co"># hide from UI</span></span>
<span><span class="op">)</span></span>
<span></span>
<span><span class="va">server</span> <span class="op">&lt;-</span> <span class="kw">function</span><span class="op">(</span><span class="va">input</span>, <span class="va">output</span><span class="op">)</span><span class="op">{</span></span>
<span>  <span class="va">f</span> <span class="op">&lt;-</span> <span class="va"><a href="../reference/FirebaseUI.html">FirebaseUI</a></span><span class="op">$</span></span>
<span>    <span class="fu">new</span><span class="op">(</span><span class="op">)</span><span class="op">$</span> <span class="co"># instantiate</span></span>
<span>    <span class="fu">set_providers</span><span class="op">(</span> <span class="co"># define providers</span></span>
<span>      email <span class="op">=</span> <span class="cn">TRUE</span>, </span>
<span>      google <span class="op">=</span> <span class="cn">TRUE</span></span>
<span>    <span class="op">)</span><span class="op">$</span></span>
<span>    <span class="fu">launch</span><span class="op">(</span><span class="op">)</span> <span class="co"># launch</span></span>
<span></span>
<span>  <span class="va">s</span> <span class="op">&lt;-</span> <span class="va"><a href="../reference/Storage.html">Storage</a></span><span class="op">$</span><span class="fu">new</span><span class="op">(</span><span class="op">)</span> <span class="co"># initialise</span></span>
<span><span class="op">}</span></span>
<span></span>
<span><span class="fu"><a href="https://rdrr.io/pkg/shiny/man/shinyApp.html" class="external-link">shinyApp</a></span><span class="op">(</span><span class="va">ui</span>, <span class="va">server</span><span class="op">)</span></span></code></pre></div>
</div>
<div class="section level2">
<h2 id="reference">Reference<a class="anchor" aria-label="anchor" href="#reference"></a>
</h2>
<p>A crucial concept with the <code>Storage</code> is the idea of the
reference. The reference is the path, directory, or bucket one is
currently working with.</p>
<p>This is defined by a method on its own, methods used subsequently
will then use this as reference.</p>
<p>For instance one can reference the file <code>test.png</code> even if
it does not exist, then calling the method to upload a file will upload
the file as <code>test.png</code>. <em>Make sure you keep track of
this.</em></p>
</div>
<div class="section level2">
<h2 id="response">Response<a class="anchor" aria-label="anchor" href="#response"></a>
</h2>
<p>Much of JavaScript works asynchronously, it’s certainly one of its
strong points. This means that when a function is called we do not
receive the result from said function straight away, we get a promise
back. Exactly like the R {promises} package.</p>
<p>Hence when triggering a sign in with other classes of the package the
response is not returned by the same function. This is because the
results of the authentication are returned later, and we cannot know
when.</p>
<p>The same applies to the storage: when we upload a file we cannot know
whether the upload was successful at the time of the upload, only later,
and so on for every action we take on the storage.</p>
<p>Therefore, upon performing such actions (upload, delete, etc.) we
(optionally) specify a <code>response</code>. This response identifier
can then be used with the <code>get_response</code> method to retrieve
the results of said operation: <code>get_response</code> acts exactly
like any other shiny <code>input</code>.</p>
</div>
<div class="section level2">
<h2 id="upload">Upload<a class="anchor" aria-label="anchor" href="#upload"></a>
</h2>
<p>We can then upload a file with the <code>upload_file</code>
method.</p>
<p>Note that below we use a file on disk but you can use uploaded files:
the method accepts the path to a file which can be obtained from a file
upload in Shiny.</p>
<p>We also set the reference (<code>ref</code>) to
<code>test.png</code>, we’ll be working with this file; it does not
exist yet, we’ll create it, download it, delete it, etc.</p>
<p>The button to upload is only rendered if the user is logged in. The
button triggers to <code>upload_file</code> method that uploads a file
from the disk.</p>
<p>We then retrieve and print the result of the upload with the
<code>get_response</code> method.</p>
<p>Note that you can set <code>response</code> to <code>FALSE</code> if
you do not want to retrieve the results.</p>
<div class="sourceCode" id="cb3"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb3-1"><a href="#cb3-1" tabindex="-1"></a><span class="fu">library</span>(shiny)</span>
<span id="cb3-2"><a href="#cb3-2" tabindex="-1"></a><span class="fu">library</span>(firebase)</span>
<span id="cb3-3"><a href="#cb3-3" tabindex="-1"></a></span>
<span id="cb3-4"><a href="#cb3-4" tabindex="-1"></a>ui <span class="ot">&lt;-</span> <span class="fu">fluidPage</span>(</span>
<span id="cb3-5"><a href="#cb3-5" tabindex="-1"></a>  <span class="fu">useFirebase</span>(), <span class="co"># import dependencies</span></span>
<span id="cb3-6"><a href="#cb3-6" tabindex="-1"></a>  <span class="fu">firebaseUIContainer</span>(),</span>
<span id="cb3-7"><a href="#cb3-7" tabindex="-1"></a>  <span class="fu">reqSignin</span>(<span class="fu">h4</span>(<span class="st">"Logged in!"</span>)), <span class="co"># hide from UI</span></span>
<span id="cb3-8"><a href="#cb3-8" tabindex="-1"></a>  <span class="fu">uiOutput</span>(<span class="st">"uploadUI"</span>)</span>
<span id="cb3-9"><a href="#cb3-9" tabindex="-1"></a>)</span>
<span id="cb3-10"><a href="#cb3-10" tabindex="-1"></a></span>
<span id="cb3-11"><a href="#cb3-11" tabindex="-1"></a>server <span class="ot">&lt;-</span> <span class="cf">function</span>(input, output){</span>
<span id="cb3-12"><a href="#cb3-12" tabindex="-1"></a>  f <span class="ot">&lt;-</span> FirebaseUI<span class="sc">$</span></span>
<span id="cb3-13"><a href="#cb3-13" tabindex="-1"></a>    <span class="fu">new</span>()<span class="sc">$</span> <span class="co"># instantiate</span></span>
<span id="cb3-14"><a href="#cb3-14" tabindex="-1"></a>    <span class="fu">set_providers</span>( <span class="co"># define providers</span></span>
<span id="cb3-15"><a href="#cb3-15" tabindex="-1"></a>      <span class="at">email =</span> <span class="cn">TRUE</span>, </span>
<span id="cb3-16"><a href="#cb3-16" tabindex="-1"></a>      <span class="at">google =</span> <span class="cn">TRUE</span></span>
<span id="cb3-17"><a href="#cb3-17" tabindex="-1"></a>    )<span class="sc">$</span></span>
<span id="cb3-18"><a href="#cb3-18" tabindex="-1"></a>    <span class="fu">launch</span>() <span class="co"># launch</span></span>
<span id="cb3-19"><a href="#cb3-19" tabindex="-1"></a></span>
<span id="cb3-20"><a href="#cb3-20" tabindex="-1"></a>  s <span class="ot">&lt;-</span> Storage<span class="sc">$</span><span class="fu">new</span>()</span>
<span id="cb3-21"><a href="#cb3-21" tabindex="-1"></a>    <span class="sc">$</span><span class="fu">ref</span>(<span class="st">"test.png"</span>)</span>
<span id="cb3-22"><a href="#cb3-22" tabindex="-1"></a>  </span>
<span id="cb3-23"><a href="#cb3-23" tabindex="-1"></a>  <span class="co"># upload a file</span></span>
<span id="cb3-24"><a href="#cb3-24" tabindex="-1"></a>  output<span class="sc">$</span>uploadUI <span class="ot">&lt;-</span> <span class="fu">renderUI</span>({</span>
<span id="cb3-25"><a href="#cb3-25" tabindex="-1"></a>    f<span class="sc">$</span><span class="fu">req_sign_in</span>()</span>
<span id="cb3-26"><a href="#cb3-26" tabindex="-1"></a></span>
<span id="cb3-27"><a href="#cb3-27" tabindex="-1"></a>    <span class="fu">actionButton</span>(<span class="st">"upload"</span>, <span class="st">"Upload Image"</span>)</span>
<span id="cb3-28"><a href="#cb3-28" tabindex="-1"></a>  })</span>
<span id="cb3-29"><a href="#cb3-29" tabindex="-1"></a></span>
<span id="cb3-30"><a href="#cb3-30" tabindex="-1"></a>  <span class="fu">observeEvent</span>(input<span class="sc">$</span>upload, {</span>
<span id="cb3-31"><a href="#cb3-31" tabindex="-1"></a>    s<span class="sc">$</span><span class="fu">upload_file</span>(<span class="st">"/path/to/file.png"</span>)</span>
<span id="cb3-32"><a href="#cb3-32" tabindex="-1"></a>  })</span>
<span id="cb3-33"><a href="#cb3-33" tabindex="-1"></a></span>
<span id="cb3-34"><a href="#cb3-34" tabindex="-1"></a>  <span class="fu">observeEvent</span>(s<span class="sc">$</span><span class="fu">get_response</span>(), {</span>
<span id="cb3-35"><a href="#cb3-35" tabindex="-1"></a>    <span class="fu">print</span>(s<span class="sc">$</span><span class="fu">get_response</span>())</span>
<span id="cb3-36"><a href="#cb3-36" tabindex="-1"></a>  })</span>
<span id="cb3-37"><a href="#cb3-37" tabindex="-1"></a>}</span>
<span id="cb3-38"><a href="#cb3-38" tabindex="-1"></a></span>
<span id="cb3-39"><a href="#cb3-39" tabindex="-1"></a><span class="fu">shinyApp</span>(ui, server)</span></code></pre></div>
</div>
<div class="section level2">
<h2 id="download">Download<a class="anchor" aria-label="anchor" href="#download"></a>
</h2>
<p>Once the file uploaded we can add a button to download the file. It
does not truly download the file but will retrieve a valid URL to it.
You may then do what you want with said link, download the file with
{httr} (or {httr2}), use it as <code>src</code> atribute for a an
<code>&lt;img/&gt;</code> tag, etc.</p>
<div class="sourceCode" id="cb4"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb4-1"><a href="#cb4-1" tabindex="-1"></a><span class="fu">library</span>(shiny)</span>
<span id="cb4-2"><a href="#cb4-2" tabindex="-1"></a><span class="fu">library</span>(firebase)</span>
<span id="cb4-3"><a href="#cb4-3" tabindex="-1"></a></span>
<span id="cb4-4"><a href="#cb4-4" tabindex="-1"></a>ui <span class="ot">&lt;-</span> <span class="fu">fluidPage</span>(</span>
<span id="cb4-5"><a href="#cb4-5" tabindex="-1"></a>  <span class="fu">useFirebase</span>(), <span class="co"># import dependencies</span></span>
<span id="cb4-6"><a href="#cb4-6" tabindex="-1"></a>  <span class="fu">firebaseUIContainer</span>(),</span>
<span id="cb4-7"><a href="#cb4-7" tabindex="-1"></a>  <span class="fu">reqSignin</span>(<span class="fu">h4</span>(<span class="st">"Logged in!"</span>)), <span class="co"># hide from UI</span></span>
<span id="cb4-8"><a href="#cb4-8" tabindex="-1"></a>  <span class="fu">uiOutput</span>(<span class="st">"uploadUI"</span>),</span>
<span id="cb4-9"><a href="#cb4-9" tabindex="-1"></a>  <span class="fu">uiOutput</span>(<span class="st">"downloadUI"</span>)</span>
<span id="cb4-10"><a href="#cb4-10" tabindex="-1"></a>)</span>
<span id="cb4-11"><a href="#cb4-11" tabindex="-1"></a></span>
<span id="cb4-12"><a href="#cb4-12" tabindex="-1"></a>server <span class="ot">&lt;-</span> <span class="cf">function</span>(input, output){</span>
<span id="cb4-13"><a href="#cb4-13" tabindex="-1"></a>  f <span class="ot">&lt;-</span> FirebaseUI<span class="sc">$</span></span>
<span id="cb4-14"><a href="#cb4-14" tabindex="-1"></a>    <span class="fu">new</span>()<span class="sc">$</span> <span class="co"># instantiate</span></span>
<span id="cb4-15"><a href="#cb4-15" tabindex="-1"></a>    <span class="fu">set_providers</span>( <span class="co"># define providers</span></span>
<span id="cb4-16"><a href="#cb4-16" tabindex="-1"></a>      <span class="at">email =</span> <span class="cn">TRUE</span>, </span>
<span id="cb4-17"><a href="#cb4-17" tabindex="-1"></a>      <span class="at">google =</span> <span class="cn">TRUE</span></span>
<span id="cb4-18"><a href="#cb4-18" tabindex="-1"></a>    )<span class="sc">$</span></span>
<span id="cb4-19"><a href="#cb4-19" tabindex="-1"></a>    <span class="fu">launch</span>() <span class="co"># launch</span></span>
<span id="cb4-20"><a href="#cb4-20" tabindex="-1"></a></span>
<span id="cb4-21"><a href="#cb4-21" tabindex="-1"></a>  s <span class="ot">&lt;-</span> Storage<span class="sc">$</span><span class="fu">new</span>()</span>
<span id="cb4-22"><a href="#cb4-22" tabindex="-1"></a>    <span class="sc">$</span><span class="fu">ref</span>(<span class="st">"test.png"</span>)</span>
<span id="cb4-23"><a href="#cb4-23" tabindex="-1"></a>  </span>
<span id="cb4-24"><a href="#cb4-24" tabindex="-1"></a>  <span class="co"># upload a file</span></span>
<span id="cb4-25"><a href="#cb4-25" tabindex="-1"></a>  output<span class="sc">$</span>uploadUI <span class="ot">&lt;-</span> <span class="fu">renderUI</span>({</span>
<span id="cb4-26"><a href="#cb4-26" tabindex="-1"></a>    f<span class="sc">$</span><span class="fu">req_sign_in</span>()</span>
<span id="cb4-27"><a href="#cb4-27" tabindex="-1"></a></span>
<span id="cb4-28"><a href="#cb4-28" tabindex="-1"></a>    <span class="fu">actionButton</span>(<span class="st">"upload"</span>, <span class="st">"Upload Image"</span>)</span>
<span id="cb4-29"><a href="#cb4-29" tabindex="-1"></a>  })</span>
<span id="cb4-30"><a href="#cb4-30" tabindex="-1"></a></span>
<span id="cb4-31"><a href="#cb4-31" tabindex="-1"></a>  <span class="fu">observeEvent</span>(input<span class="sc">$</span>upload, {</span>
<span id="cb4-32"><a href="#cb4-32" tabindex="-1"></a>    s<span class="sc">$</span><span class="fu">upload_file</span>(<span class="st">"/path/to/file.png"</span>)</span>
<span id="cb4-33"><a href="#cb4-33" tabindex="-1"></a>  })</span>
<span id="cb4-34"><a href="#cb4-34" tabindex="-1"></a></span>
<span id="cb4-35"><a href="#cb4-35" tabindex="-1"></a>  <span class="fu">observeEvent</span>(s<span class="sc">$</span><span class="fu">get_response</span>(), {</span>
<span id="cb4-36"><a href="#cb4-36" tabindex="-1"></a>    <span class="fu">print</span>(s<span class="sc">$</span><span class="fu">get_response</span>())</span>
<span id="cb4-37"><a href="#cb4-37" tabindex="-1"></a>  })</span>
<span id="cb4-38"><a href="#cb4-38" tabindex="-1"></a>  </span>
<span id="cb4-39"><a href="#cb4-39" tabindex="-1"></a>  <span class="co"># download a file</span></span>
<span id="cb4-40"><a href="#cb4-40" tabindex="-1"></a>  output<span class="sc">$</span>downloadUI <span class="ot">&lt;-</span> <span class="fu">renderUI</span>({</span>
<span id="cb4-41"><a href="#cb4-41" tabindex="-1"></a>    f<span class="sc">$</span><span class="fu">req_sign_in</span>()</span>
<span id="cb4-42"><a href="#cb4-42" tabindex="-1"></a></span>
<span id="cb4-43"><a href="#cb4-43" tabindex="-1"></a>    <span class="fu">actionButton</span>(<span class="st">"download"</span>, <span class="st">"Download Image"</span>)</span>
<span id="cb4-44"><a href="#cb4-44" tabindex="-1"></a>  })</span>
<span id="cb4-45"><a href="#cb4-45" tabindex="-1"></a></span>
<span id="cb4-46"><a href="#cb4-46" tabindex="-1"></a>  <span class="fu">observeEvent</span>(input<span class="sc">$</span>download, {</span>
<span id="cb4-47"><a href="#cb4-47" tabindex="-1"></a>    s<span class="sc">$</span><span class="fu">download_file</span>(<span class="st">"dl"</span>)</span>
<span id="cb4-48"><a href="#cb4-48" tabindex="-1"></a>  })</span>
<span id="cb4-49"><a href="#cb4-49" tabindex="-1"></a></span>
<span id="cb4-50"><a href="#cb4-50" tabindex="-1"></a>  <span class="fu">observeEvent</span>(s<span class="sc">$</span><span class="fu">get_response</span>(<span class="st">"dl"</span>), {</span>
<span id="cb4-51"><a href="#cb4-51" tabindex="-1"></a>    <span class="fu">print</span>(s<span class="sc">$</span><span class="fu">get_response</span>(<span class="st">"dl"</span>))</span>
<span id="cb4-52"><a href="#cb4-52" tabindex="-1"></a>  })</span>
<span id="cb4-53"><a href="#cb4-53" tabindex="-1"></a>}</span>
<span id="cb4-54"><a href="#cb4-54" tabindex="-1"></a></span>
<span id="cb4-55"><a href="#cb4-55" tabindex="-1"></a><span class="fu">shinyApp</span>(ui, server)</span></code></pre></div>
</div>
<div class="section level2">
<h2 id="delete">Delete<a class="anchor" aria-label="anchor" href="#delete"></a>
</h2>
<p>To delete a file simply call the <code>delete_file</code> method.</p>
<div class="sourceCode" id="cb5"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb5-1"><a href="#cb5-1" tabindex="-1"></a><span class="fu">library</span>(shiny)</span>
<span id="cb5-2"><a href="#cb5-2" tabindex="-1"></a><span class="fu">library</span>(firebase)</span>
<span id="cb5-3"><a href="#cb5-3" tabindex="-1"></a></span>
<span id="cb5-4"><a href="#cb5-4" tabindex="-1"></a>ui <span class="ot">&lt;-</span> <span class="fu">fluidPage</span>(</span>
<span id="cb5-5"><a href="#cb5-5" tabindex="-1"></a>  <span class="fu">useFirebase</span>(), <span class="co"># import dependencies</span></span>
<span id="cb5-6"><a href="#cb5-6" tabindex="-1"></a>  <span class="fu">firebaseUIContainer</span>(),</span>
<span id="cb5-7"><a href="#cb5-7" tabindex="-1"></a>  <span class="fu">reqSignin</span>(<span class="fu">h4</span>(<span class="st">"Logged in!"</span>)), <span class="co"># hide from UI</span></span>
<span id="cb5-8"><a href="#cb5-8" tabindex="-1"></a>  <span class="fu">uiOutput</span>(<span class="st">"uploadUI"</span>),</span>
<span id="cb5-9"><a href="#cb5-9" tabindex="-1"></a>  <span class="fu">uiOutput</span>(<span class="st">"downloadUI"</span>),</span>
<span id="cb5-10"><a href="#cb5-10" tabindex="-1"></a>  <span class="fu">uiOutput</span>(<span class="st">"deleteUI"</span>)</span>
<span id="cb5-11"><a href="#cb5-11" tabindex="-1"></a>)</span>
<span id="cb5-12"><a href="#cb5-12" tabindex="-1"></a></span>
<span id="cb5-13"><a href="#cb5-13" tabindex="-1"></a>server <span class="ot">&lt;-</span> <span class="cf">function</span>(input, output){</span>
<span id="cb5-14"><a href="#cb5-14" tabindex="-1"></a>  f <span class="ot">&lt;-</span> FirebaseUI<span class="sc">$</span></span>
<span id="cb5-15"><a href="#cb5-15" tabindex="-1"></a>    <span class="fu">new</span>()<span class="sc">$</span> <span class="co"># instantiate</span></span>
<span id="cb5-16"><a href="#cb5-16" tabindex="-1"></a>    <span class="fu">set_providers</span>( <span class="co"># define providers</span></span>
<span id="cb5-17"><a href="#cb5-17" tabindex="-1"></a>      <span class="at">email =</span> <span class="cn">TRUE</span>, </span>
<span id="cb5-18"><a href="#cb5-18" tabindex="-1"></a>      <span class="at">google =</span> <span class="cn">TRUE</span></span>
<span id="cb5-19"><a href="#cb5-19" tabindex="-1"></a>    )<span class="sc">$</span></span>
<span id="cb5-20"><a href="#cb5-20" tabindex="-1"></a>    <span class="fu">launch</span>() <span class="co"># launch</span></span>
<span id="cb5-21"><a href="#cb5-21" tabindex="-1"></a></span>
<span id="cb5-22"><a href="#cb5-22" tabindex="-1"></a>  s <span class="ot">&lt;-</span> Storage<span class="sc">$</span><span class="fu">new</span>()</span>
<span id="cb5-23"><a href="#cb5-23" tabindex="-1"></a>    <span class="sc">$</span><span class="fu">ref</span>(<span class="st">"test.png"</span>)</span>
<span id="cb5-24"><a href="#cb5-24" tabindex="-1"></a>  </span>
<span id="cb5-25"><a href="#cb5-25" tabindex="-1"></a>  <span class="co"># upload a file</span></span>
<span id="cb5-26"><a href="#cb5-26" tabindex="-1"></a>  output<span class="sc">$</span>uploadUI <span class="ot">&lt;-</span> <span class="fu">renderUI</span>({</span>
<span id="cb5-27"><a href="#cb5-27" tabindex="-1"></a>    f<span class="sc">$</span><span class="fu">req_sign_in</span>()</span>
<span id="cb5-28"><a href="#cb5-28" tabindex="-1"></a></span>
<span id="cb5-29"><a href="#cb5-29" tabindex="-1"></a>    <span class="fu">actionButton</span>(<span class="st">"upload"</span>, <span class="st">"Upload Image"</span>)</span>
<span id="cb5-30"><a href="#cb5-30" tabindex="-1"></a>  })</span>
<span id="cb5-31"><a href="#cb5-31" tabindex="-1"></a></span>
<span id="cb5-32"><a href="#cb5-32" tabindex="-1"></a>  <span class="fu">observeEvent</span>(input<span class="sc">$</span>upload, {</span>
<span id="cb5-33"><a href="#cb5-33" tabindex="-1"></a>    s<span class="sc">$</span><span class="fu">upload_file</span>(<span class="st">"/path/to/file.png"</span>)</span>
<span id="cb5-34"><a href="#cb5-34" tabindex="-1"></a>  })</span>
<span id="cb5-35"><a href="#cb5-35" tabindex="-1"></a></span>
<span id="cb5-36"><a href="#cb5-36" tabindex="-1"></a>  <span class="fu">observeEvent</span>(s<span class="sc">$</span><span class="fu">get_response</span>(), {</span>
<span id="cb5-37"><a href="#cb5-37" tabindex="-1"></a>    <span class="fu">print</span>(s<span class="sc">$</span><span class="fu">get_response</span>())</span>
<span id="cb5-38"><a href="#cb5-38" tabindex="-1"></a>  })</span>
<span id="cb5-39"><a href="#cb5-39" tabindex="-1"></a>  </span>
<span id="cb5-40"><a href="#cb5-40" tabindex="-1"></a>  <span class="co"># download a file</span></span>
<span id="cb5-41"><a href="#cb5-41" tabindex="-1"></a>  output<span class="sc">$</span>downloadUI <span class="ot">&lt;-</span> <span class="fu">renderUI</span>({</span>
<span id="cb5-42"><a href="#cb5-42" tabindex="-1"></a>    f<span class="sc">$</span><span class="fu">req_sign_in</span>()</span>
<span id="cb5-43"><a href="#cb5-43" tabindex="-1"></a></span>
<span id="cb5-44"><a href="#cb5-44" tabindex="-1"></a>    <span class="fu">actionButton</span>(<span class="st">"download"</span>, <span class="st">"Download Image"</span>)</span>
<span id="cb5-45"><a href="#cb5-45" tabindex="-1"></a>  })</span>
<span id="cb5-46"><a href="#cb5-46" tabindex="-1"></a></span>
<span id="cb5-47"><a href="#cb5-47" tabindex="-1"></a>  <span class="fu">observeEvent</span>(input<span class="sc">$</span>download, {</span>
<span id="cb5-48"><a href="#cb5-48" tabindex="-1"></a>    s<span class="sc">$</span><span class="fu">download_file</span>(<span class="st">"dl"</span>)</span>
<span id="cb5-49"><a href="#cb5-49" tabindex="-1"></a>  })</span>
<span id="cb5-50"><a href="#cb5-50" tabindex="-1"></a></span>
<span id="cb5-51"><a href="#cb5-51" tabindex="-1"></a>  <span class="fu">observeEvent</span>(s<span class="sc">$</span><span class="fu">get_response</span>(<span class="st">"dl"</span>), {</span>
<span id="cb5-52"><a href="#cb5-52" tabindex="-1"></a>    <span class="fu">print</span>(s<span class="sc">$</span><span class="fu">get_response</span>(<span class="st">"dl"</span>))</span>
<span id="cb5-53"><a href="#cb5-53" tabindex="-1"></a>  })</span>
<span id="cb5-54"><a href="#cb5-54" tabindex="-1"></a>  </span>
<span id="cb5-55"><a href="#cb5-55" tabindex="-1"></a>  <span class="co"># delete file</span></span>
<span id="cb5-56"><a href="#cb5-56" tabindex="-1"></a>  output<span class="sc">$</span>deleteUI <span class="ot">&lt;-</span> <span class="fu">renderUI</span>({</span>
<span id="cb5-57"><a href="#cb5-57" tabindex="-1"></a>    f<span class="sc">$</span><span class="fu">req_sign_in</span>()</span>
<span id="cb5-58"><a href="#cb5-58" tabindex="-1"></a></span>
<span id="cb5-59"><a href="#cb5-59" tabindex="-1"></a>    <span class="fu">actionButton</span>(<span class="st">"delete"</span>, <span class="st">"Delete Image"</span>)</span>
<span id="cb5-60"><a href="#cb5-60" tabindex="-1"></a>  })</span>
<span id="cb5-61"><a href="#cb5-61" tabindex="-1"></a></span>
<span id="cb5-62"><a href="#cb5-62" tabindex="-1"></a>  <span class="fu">observeEvent</span>(input<span class="sc">$</span>delete, {</span>
<span id="cb5-63"><a href="#cb5-63" tabindex="-1"></a>    s<span class="sc">$</span><span class="fu">delete_file</span>(<span class="st">"del"</span>)</span>
<span id="cb5-64"><a href="#cb5-64" tabindex="-1"></a>  })</span>
<span id="cb5-65"><a href="#cb5-65" tabindex="-1"></a></span>
<span id="cb5-66"><a href="#cb5-66" tabindex="-1"></a>  <span class="fu">observeEvent</span>(s<span class="sc">$</span><span class="fu">get_response</span>(<span class="st">"del"</span>), {</span>
<span id="cb5-67"><a href="#cb5-67" tabindex="-1"></a>    <span class="fu">print</span>(s<span class="sc">$</span><span class="fu">get_response</span>(<span class="st">"del"</span>))</span>
<span id="cb5-68"><a href="#cb5-68" tabindex="-1"></a>  })</span>
<span id="cb5-69"><a href="#cb5-69" tabindex="-1"></a>}</span>
<span id="cb5-70"><a href="#cb5-70" tabindex="-1"></a></span>
<span id="cb5-71"><a href="#cb5-71" tabindex="-1"></a><span class="fu">shinyApp</span>(ui, server)</span></code></pre></div>
</div>
<div class="section level2">
<h2 id="other-methods">Other Methods<a class="anchor" aria-label="anchor" href="#other-methods"></a>
</h2>
<p>There are other methods to list files, and retrieve metadata but they
work exactly like all others so we’ll live it at that</p>
</div>
  </div>

  <div class="col-md-3 hidden-xs hidden-sm" id="pkgdown-sidebar">

        <nav id="toc" data-toggle="toc"><h2 data-toc-skip>Contents</h2>
    </nav>
</div>

</div>



      <footer><div class="copyright">
  <p></p>
<p>Developed by John Coene.</p>
</div>

<div class="pkgdown">
  <p></p>
<p>Site built with <a href="https://pkgdown.r-lib.org/" class="external-link">pkgdown</a> 2.0.7.</p>
</div>

      </footer>
</div>

  


  

  </body>
</html>
