1. Building blocks
  2. Files

Files building block

With the files block you can upload, sync, edit, and share files right inside your application. The files block has a number of nice features as seen below.

Cloud files
Comments
File previews
File uploader
File versioning
Notifications
Thumbnails
WebDAV

Get started

Follow the steps below to get started in minutes!

1. Create account

Sign up for an account on https://get.weavy.com.

2. Create environment

Now that you have an account go ahead and create your first environment. The entry-level is free, making it a great starting point. Make a note of the environment url as you'll need it later.

3. Create API key

Next, navigate to your environment and create an API key. Take note of the created key as you'll need it the next step.

4. Create access token

For the building block to be fully functional your need to supply it with an access_token for a user (the building block communicates with the Weavy environment and the token is used to identify the user and authorize access).

In a real world application, issuing access tokens is done with a server-to-server call from your backend to the Weavy environment, but in this guide we'll use a curl command to simplify things.

Replace {WEAVY-SERVER} and {API-KEY} with the values from step 2 and 3 above and then run the following command in your terminal.

curl -X POST https://{WEAVY-SERVER}/api/users/demouser/tokens -H "Authorization: Bearer {API-KEY}"

Then copy the access_token from the response since it's needed in the final step.

{"access_token":"wyu_qf2llm...","expires_in":3600}

5. Add building block

Finally, you'll want to add the <wy-files> building block to your application. Copy the snippet below and replace the {WEAVY-SERVER} and {ACCESS-TOKEN} placeholders for a functional example.

<!doctype html>
<html>
  <head>
    <script src="https://{WEAVY-SERVER}/uikit-web/weavy.js"></script>
    <script>
        const weavy = new Weavy();
        weavy.url = "https://{WEAVY-SERVER}";
        weavy.tokenFactory = async () => "{ACCESS-TOKEN}";
    </script>
  </head>
  <body>
    <wy-files uid="demofiles"></wy-files>
  </body>
</html>

You should now have a fully functional files block in your application. Click "Add files" to upload a file and preview it.

If things are not working as expected, check the output in the dev-tools window of your browser for any warnings or errors. Or join our community in Discord and ask for help!

If you want to try out the building block real quick and don't want to mess around in your existing application just yet, you can use a coding playground like JSFiddle - just paste the snippet in the HTML-part, edit the {WEAVY-SERVER} and {ACCESS-TOKEN} and run it!

Next steps

This guide was intentionally very simple to get you started quickly, and we've taken some shortcuts such as hardcoding the access_token. As a next step we suggest reading more about how to install the UIKit and how to authenticate and sync users etc.

Later on you probably want to add some styling to make it fit better into your UI. You might also want to learn more about the Web API and how to configure webhooks to listen for events etc.

If you are using a JS-framework and are curious about how to integrate Weavy you can find help in our guides for Angular and React.