index.html

---
layout: default
language: en
head:
  - <link rel="alternate" href="/" hreflang="en" />
  - <link rel="alternate" href="/fr/" hreflang="fr" />
---

<div id="splash-container">
  {% include menu.html context="homepage" %}
  <link rel="stylesheet" href="/css/landing-page.css">
  <div id="splash">
    <div class="row">
	  <div class="col-sm-12">
        <div class="iframe-wrapper onlyForDesktop">
          <iframe id="appframe" frameborder="0" src="https://demo.filestash.app/login?type=webdav&url=https://webdav.filestash.app/" allow="fullscreen;speaker"></iframe>
          <div class="arrow-top">
            <i class="arrow top"></i>
            <i class="arrow top"></i>
            try me
            <i class="arrow top"></i>
            <i class="arrow top"></i>
          </div>
        </div>
	    <div class="hgroup">
		  <h1>Filestash</h1>
		  <h2>
            turns your <br>
            <noscript>
              <a href="{% post_url 2019-11-26-ftp-web-client %}">FTP</a> / <a href="{% post_url 2021-10-18-webdav-client %}">WebDav</a> / <a href="{% post_url 2020-04-30-sftp-browser %}">SFTP</a> / <a href="{% post_url 2019-11-21-s3-browser %}">S3</a> / <a href="{% post_url 2019-11-21-s3-browser %}">Minio</a> / Git / <a href="{% post_url 2020-01-04-ldap-browser %}">LDAP</a> / Google drive / Dropbox server / <a href="{% post_url 2019-11-21-s3-browser %}">Storj</a>
            </noscript>
            <span id="typing"></span> <br>
            into this
            <span class="arrow-right onlyForDesktop">
              <i class="arrow right"></i>
              <i class="arrow right"></i>
              <i class="arrow right"></i>
            </span>
          </h2>
	    </div>

        <div class="screenshot onlyForMobile">
          <img alt="Filestash screenshot" src="/img/screenshots/viewerpage.png" />
        </div>

        <script src="/js/typed.min.js"></script>
        <script>
          new Typed('#typing', {
              strings: [
                  "rock solid FTP server",
                  "rock solid SFTP server",
                  "shiny S3 buckets",
                  "shiny Minio server",
                  "awesome Webdav server",
                  "awesome CardDav/CalDav server",
                  "Backblaze B2",
                  "backend systems",
                  "reliable Git repo",
                  "reliable mysql server",
                  "old school LDAP server",
                  "boring Google Drive",
                  "boring Dropbox",
              ],
              typeSpeed: 50,
              backSpeed: 30,
              startDelay: 100,
              backDelay: 500,
              smartBackspace: true,
              loop: true
          });
        </script>

        <p class="button">
          <a class="btn" href="{% link _docs/index.md %}">Start now</a>
	    </p>

      </div>
    </div>
  </div>
  <div id="waveshape"></div>
</div>
<div id="bring-your-own">
  <div class="container">
    <h3>Bring your own backend:</h3>
    <div class="center backend-list">
      <strong><a href="{% post_url 2019-11-21-s3-browser %}">S3</a></strong>
      <strong><a href="{% post_url 2020-04-30-sftp-browser %}">SFTP</a></strong>
      <strong><a href="{% post_url 2019-11-26-ftp-web-client %}">FTP</a></strong>
      <strong><a href="{% post_url 2019-11-26-ftp-web-client %}">FTPS</a></strong>
      <strong><a href="{% post_url 2019-11-21-s3-browser %}">Minio</a></strong>
      <strong>Backblaze</strong>
      <strong>GIT</strong>
      <strong>Github</strong>
      <strong>Gitlab</strong>
      <strong><a href="{% post_url 2021-10-18-webdav-client %}">WebDav</a></strong>
      <strong><a href="{% post_url 2020-01-04-ldap-browser %}">LDAP</a></strong>
      <strong>CalDAV</strong>
      <strong>CardDAV</strong>
      <strong>Mysql</strong>
      <strong>Dropbox</strong>
      <strong>Google Drive</strong>
      <strong>Gogs</strong>
      <strong>Gitea</strong>
    </div>
    <style>
      #bring-your-own {
          background: var(--bg-color);
          border-bottom: 1px solid rgba(0,0,0,0.05);
          padding: 50px  0 90px 0;
      }
      #bring-your-own {
          opacity: 0.8;
          text-align: center;
          color: var(--dark);
          font-size: 1.2rem;
          font-weight: bold;
      }
      #bring-your-own .backend-list strong{
          text-shadow: 1px 0px 5px rgba(0,0,0,0.1);
          display: inline-block;
          padding: 0 10px;
          font-size: 1.1rem;
          min-width: 60px;
          font-weight: bold;
          opacity: 0.8;
          letter-spacing: 0.05rem;
          color: var(--dark);
          opacity: 0.8;
      }
      #bring-your-own .backend-list strong a {
          color: inherit;
      }
    </style>
  </div>
</div>

<h2 id="introduce-second-heading">
  An easy to use product that integrates with your data and your processes <br><br>
  <a href="/pricing/?modal=enterprise" class="btn light">Chat with Us</a>
</h2>

<div class="social-proof">
  <div>
    <a href="https://www.media.mit.edu/posts/file-sharing/"><img src="http://archive.kerjean.me/public/2022/mit.png" /></a>
  </div>
  <div>
    <img src="http://archive.kerjean.me/public/2022/schneider-electric.png" />
  </div>
  <div>
    <img src="http://archive.kerjean.me/public/2022/krtk.png" />
  </div>
  <div>
    <img src="http://archive.kerjean.me/public/2022/singapore.png" />
  </div>
</div>
<div class="social-proof">
  <div>
    <img src="http://archive.kerjean.me/public/2022/insa-toulouse.png" />
  </div>
  <div>
    <img src="http://archive.kerjean.me/public/2022/university_clermont.png" />
  </div>
</div>

<style>
  .social-proof {
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow-x: hidden;
      margin: 30px 0;
  }
  .social-proof img {
      width: 240px;
      height: 50px;
      filter: grayscale(100) brightness(100) invert(0.5);
  }
</style>

<div class="reviews">
  <div class="review">
    My company required a custom plugin derived from the original open source repo. The developer provided such great support during the first meetings, that my company immediately opened an enterprise account with Filestash. The support and development of our own custom plugin was fantastic!
    <br/><br/><a rel="nofollow" href="https://www.linkedin.com/in/davidcarrillojr/"><strong>David C.</strong></a>
  </div>
  <div class="review">
    If you need a file manager, get filestash. The product is easy to use, easy to configure, very secure, and works very well. Mickael has been outstanding with his customer support, helping us customize the app to fit our specific requirements. I can't say enough good things about his app, and him. If you are looking for a fast, efficient, and streamlined front-end GUI to manage files, look no further.
    <br/><br/><a rel="nofollow" href="https://www.linkedin.com/in/chris-meng-41b8b297/"><strong>Chris M.</strong></a></div>
</div>
<style>
  .reviews {
      display: flex;
      max-width: 1200px;
      margin: 30px auto 0 auto;
  }
  .reviews > .review {
      width: 50%;
      padding: 30px;
      text-align: justify;
      margin: 15px;

      border: 1px dashed #e2e2e2;
      font-size: 0.9rem;
  }
</style>

<div id="github-events"></div>
<script defer>
 // https://github.com/azer/relative-date/blob/master/lib/relative-date.js
 function relativeDate(input,reference){
     let SECOND = 1000,
         MINUTE = 60 * SECOND,
         HOUR = 60 * MINUTE,
         DAY = 24 * HOUR,
         WEEK = 7 * DAY,
         YEAR = DAY * 365,
         MONTH = YEAR / 12;

     let formats = [
         [ 0.7 * MINUTE, 'just now' ],
         [ 1.5 * MINUTE, 'a minute ago' ],
         [ 60 * MINUTE, 'minutes ago', MINUTE ],
         [ 1.5 * HOUR, 'an hour ago' ],
         [ DAY, 'hours ago', HOUR ],
         [ 2 * DAY, 'yesterday' ],
         [ 7 * DAY, 'days ago', DAY ],
         [ 1.5 * WEEK, 'a week ago'],
         [ MONTH, 'weeks ago', WEEK ],
         [ 1.5 * MONTH, 'a month ago' ],
         [ YEAR, 'months ago', MONTH ],
         [ 1.5 * YEAR, 'a year ago' ],
         [ Number.MAX_VALUE, 'years ago', YEAR ]
     ];

     !reference && ( reference = (new Date).getTime() );
     reference instanceof Date && ( reference = reference.getTime() );
     input instanceof Date && ( input = input.getTime() );

     var delta = reference - input,
         format, i, len;

     for(i = -1, len=formats.length; ++i < len; ){
         format = formats[i];
         if(delta < format[0]){
             return format[2] == undefined ? format[1] : Math.round(delta/format[2]) + ' ' + format[1];
         }
     };
 }
 fetch("https://api.github.com/repos/mickael-kerjean/filestash/events")
     .then((r) => r.json())
     .then((r) => {
         document.getElementById("github-events").innerHTML = r.map((e) => {
             switch(e.type) {
                 case "WatchEvent":
                     return `
<div>
  <img src="${e.actor.avatar_url}"/>
  <div>
    <div class="ellipsis"><a rel="nofollow" href="https://github.com/${e.actor.login}">${e.actor.login}</a> like us</div>
    <div class="date">${relativeDate(new Date(e.created_at))}</div>
  </div>
</div>`
                 case "ForkEvent":
                     return `<div>
   <img src="${e.actor.avatar_url}"/>
   <div><div class="ellipsis"><a href="https://github.com/${e.actor.login}">${e.actor.login}</a> is exploring our code</div>
   <div class="date">${relativeDate(new Date(e.created_at))}</div></div>
</div>`
                     break;
                 case "PullRequestEvent":
                     return `<div>
   <img src="${e.actor.avatar_url}"/>
   <div><div class="ellipsis"><a href="https://github.com/${e.actor.login}">${e.actor.login}</a> is contributing</div>
   <div class="date">${relativeDate(new Date(e.created_at))}</div></div>
</div>`
                     break;
                 default:
                     return ""
             }
             return
         }).join("")
 })
 .catch((err) => console.log(err))
</script>
<style>
 #github-events {
     display: flex;
     overflow-x: hidden;
     height: 80px;
 }
 #github-events > div { clear: left; margin: 0 10px 10px 0; border: 1px dashed #e2e2e2; padding: 10px; font-size: 0.9rem; min-width: 290px; }
 #github-events .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 #github-events .date { margin-top: 5px; }
 #github-events img { width: 45px; height: 45px; float: left; padding-right: 7px; filter: grayscale(100%); }
</style>


<div id="features">
    <div class="container large">
        <div class="row features main">
            <div class="feature">
                <img alt="screenshot of Filestash when uploading files/folders" loading="lazy" class="fancy pull-left hidden-xs" src="/img/screenshots/feature1.png" />
                <h3>Manage your data online</h3>
                <p>
                    Filestash lets you access and manage your data in a simple way regardless of where that data is stored
                </p>
                <img alt="screenshot of Filestash when uploading files/folders" loading="lazy" class="fancy visible-xs" src="/img/screenshots/feature1.png" />
            </div>
            <div class="feature">
                <img alt="screenshot while creating a shared link" loading="lazy" class="fancy pull-right hidden-xs" src="/img/screenshots/feature_share_0000.png" />
                <h3>Collaborate</h3>
                <p>
                    With its flexible sharing mechanism, Filestash allows the creation of shared links that can be mounted as a network drive
                </p>
                <img alt="screenshot while creating a shared link" loading="lazy" class="fancy visible-xs" src="/img/screenshots/feature_share_0000.png" />
            </div>

            <div class="feature">
                <img alt="Filestash as a photo gallery" loading="lazy" class="fancy pull-left hidden-xs" src="/img/screenshots/feature_image_0000.jpg" />
                <h3>Explore your Photos</h3>
                <p>
                    Upload your photos and share a link with someone else. The image viewer exposes all the metadata in your pictures
                </p>
                <img alt="Filestash as a photo gallery" loading="lazy" class="fancy visible-xs" src="/img/screenshots/feature_image_0000.jpg" />
            </div>
            <div class="feature">
                 <img alt="Filestash as a media viewer" loading="lazy" class="fancy pull-right hidden-xs" src="/img/screenshots/feature_media.png" />
                <h3>Enjoy your media</h3>
                <p>
                  Filestash lets you stream your videos and music straight from your browser
                </p>
                <img alt="Filestash as a media viewer" loading="lazy" class="fancy visible-xs" src="/img/screenshots/feature_media.png" />
            </div>

            <div class="feature">
                <img alt="org-mode client" loading="lazy" class="fancy pull-left hidden-xs" src="/img/screenshots/feature_orgmode_0000.png" />
                <h3>Take notes</h3>
                <p>
                  Filestash's powerful editor supports <i>org-mode</i>. It can be used to create reports, notes, agendas and todos
                </p>
                <img alt="org-mode client" loading="lazy" class="fancy visible-xs" src="/img/screenshots/feature_orgmode_0000.png" />
            </div>

            <div class="feature">
                <img alt="example of login screen after configuring Filestash" loading="lazy" class="fancy pull-right hidden-xs" src="/img/screenshots/feature3.png" />
                <h3>Make it exactly the way you need it</h3>
                <p>
                    Filestash can be configured to fit your use case. In need of more flexibility? Create your own plugin and make it happen
                </p>
                <img alt="example of login screen after configuring Filestash" loading="lazy" class="fancy visible-xs" src="/img/screenshots/feature3.png" />
            </div>

            <br><br><br><br><br>
        </div>
    </div>

    <div class="call-to-action">
        <h2>Ready to get started?</h2>
        <a class="btn light" href="{% link _docs/index.md %}">GETTING STARTED</a>
        <a class="btn light" href="https://demo.filestash.app">DEMO</a>
    </div>

    <div class="container">
        <h2 class="center"> More Features</h2>
        <div class="row">
            <div class="col-sm-4 feature center">
		        <h3>Open Source</h3>
		        <p>Our entire source code is available on github</p>
	        </div>
            <div class="col-sm-4 feature center">
		        <h3>Low resources</h3>
		        <p>It doesn't take a supercomputer to run Filestash</p>
	        </div>
            <div class="col-sm-4 feature center">
		        <h3>Powerful Search</h3>
		        <p>To let you find your files in an instant</p>
	        </div>
        </div>
        <div class="row">
            <div class="col-sm-4 feature center">
                <h3>Video transcoding</h3>
                <p>Automatically transcode videos on demand</p>
            </div>
            <div class="col-sm-4 feature center">
		        <h3>Network Drive</h3>
		        <p>Shared links are full fledged network drives</p>
	        </div>
            <div class="col-sm-4 feature center">
                <h3>Image optimisation</h3>
                <p>Pictures are transcoded on demand to fit your screen without waste</p>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4 feature center">
		        <h3>Works everywhere</h3>
		        <p>The web app works flawlessly on all devices</p>
	        </div>
            <div class="col-sm-4 feature center">
		        <h3>Super fast</h3>
		        <p>The web app is designed to feel extremely fast</p>
	        </div>
            <div class="col-sm-4 feature center">
		        <h3>No bloat</h3>
		        <p>Our software is laser focused but extensible</p>
	        </div>
	    </div>
        <div class="row">
            <div class="col-sm-4 feature center">
		        <h3>Secure</h3>
		        <p>We've passed an aggressive security audit to deploy in a F500 company</p>
	        </div>
            <div class="col-sm-4 feature center">
		        <h3>Quick Access</h3>
		        <p>Your most visited files are pinned to your homepage for quick access</p>
	        </div>
            <div class="col-sm-4 feature center">
		        <h3>Admin area</h3>
		        <p>An easy to use admin panel to configure your instance</p>
	        </div>
        </div>
        <div class="row">
            <div class="col-sm-4 feature center">
		        <h3>Shortcuts</h3>
		        <p>A range of keyboard shortcuts to do things faster</p>
	        </div>
            <div class="col-sm-4 feature center">
                <h3>Database plugins</h3>
                <p>New connectors to explore data in relational databases</p>
            </div>
            <div class="col-sm-4 feature center">
                <h3>Simple & powerful</h3>
		        <p>Our only mission: "Filestash let you manage your data"</p>
            </div>
        </div>
    </div>
</div>

<script type="application/ld+json">
  {
      "@context": "https://schema.org",
      "@type": "WebSite",
      "url": "{{ site.url }}",
      "potentialAction": {
          "@type": "SearchAction",
          "target": {
              "@type": "EntryPoint",
              "urlTemplate": "{{ site.url }}/search?q={search_term_string}"
          },
          "query-input": "required name=search_term_string"
      }
  }
</script>

{% include footer.html %}