DEV Community

Cover image for Appwrite Storage service
Yash Patel
Yash Patel

Posted on • Updated on

Appwrite Storage service

Introduction

Our Applications need more than just database, they need storage in order to save files or binary data and appwrite comes bundled with an extensive storage API. Its very sleek and easy to use. It has API to upload, download, preview and even manipulate images.

Appwrite Storage

Image description

An extensive storage API that allows us to manage our projects
files. It also supports uploading and downloading of files.
It also supports previewing images and manipulating images by providing various parameters.

Implementation

Image description

Talking about implementation, right now the upright mounts of volume using the host machines storage for providing storage so it uses local file system to store all the files, that are uploaded to appwrite. Appwrite also comes with clam ab integrated its an internet antivirus for protecting your user against the malicious files. clam av scans all the files in the storage to make sure it is safe. Apart from that the support for external object storage services like AWS storage, digital ocean spaces or other similar
service is on its way. You can check the progress in the utopia php storage library where they are implementing those storage
services.

Services

Image description

Appwrite API provides few services to handle storage data first one is create a file, list files, get file, file preview, file
download and file view.

createFile()

import 'dart:io';
import 'package:appwrite/appwrite.dart';

void main() { // Init SDK
  Client client = Client();
  Storage storage = Storage(client);

  client
    .setEndpoint('https://[HOSTNAME_OR_IP]/v1') // Your API Endpoint
    .setProject('5df5acd0d48c2') // Your project ID
  ;
  Future result = storage.createFile(
    file: await MultipartFile.fromPath('file', './path-to-files/image.jpg', 'image.jpg'),
  );

  result
    .then((response) {
      print(response);
    }).catchError((error) {
      print(error.response);
  });
}
Enter fullscreen mode Exit fullscreen mode

Create file allows us to upload file from our Application to the appwrite storage here is the example code from
flutter where we can call storage.create file and we can pass the file in flutter it should be passed as an instance of multipart file and similar API are provided across different sdks where we can use this similar method to create a file or upload a file to the appwrite server.

listFiles()

import 'package:appwrite/appwrite.dart';

void main() { // Init SDK
  Client client = Client();
  Storage storage = Storage(client);

  client
    .setEndpoint('https://[HOSTNAME_OR_IP]/v1') // Your API Endpoint
    .setProject('5df5acd0d48c2') // Your project ID
  ;
  Future result = storage.listFiles(
  );

  result
    .then((response) {
      print(response);
    }).catchError((error) {
      print(error.response);
  });
}
Enter fullscreen mode Exit fullscreen mode

list files will list files from the storage or to be exact it lists the metadata of files like name read and write permission of the files.

getFile()

import 'package:appwrite/appwrite.dart';

void main() { // Init SDK
  Client client = Client();
  Storage storage = Storage(client);

  client
    .setEndpoint('https://[HOSTNAME_OR_IP]/v1') // Your API Endpoint
    .setProject('5df5acd0d48c2') // Your project ID
  ;
  Future result = storage.getFile(
    fileId: '[FILE_ID]',
  );

  result
    .then((response) {
      print(response);
    }).catchError((error) {
      print(error.response);
  });
}
Enter fullscreen mode Exit fullscreen mode

In get file we can pass a individual file id to get the metadata of a individual file using get file method.

getFilePreview()

import 'package:appwrite/appwrite.dart';

void main() { // Init SDK
  Client client = Client();
  Storage storage = Storage(client);

  client
    .setEndpoint('https://[HOSTNAME_OR_IP]/v1') // Your API Endpoint
    .setProject('5df5acd0d48c2') // Your project ID
  ;
}

//displaying image
FutureBuilder(
  future: storage.getFilePreview(
    fileId: '[FILE_ID]',
  ), //works for both public file and private file, for private files you need to be logged in
  builder: (context, snapshot) {
    return snapshot.hasData && snapshot.data != null
      ? Image.memory(
          snapshot.data,
        )
      : CircularProgressIndicator();
  },
);
Enter fullscreen mode Exit fullscreen mode

Image description

We have a important function get file preview and especially
for images we can use this method to manipulate image, so to get file preview requires file id parameter apart from that there
are few optional parameters that will help us get the images
in particular shape and size that we want right now. It supports passing width and height to crop passing background color and
image quality as well as the output format like png, jpg,
and webp apart from that more features like border, border radius and opacity are coming up in the next versions of appwrite.

getFileDownload()

import 'package:appwrite/appwrite.dart';

void main() { // Init SDK
  Client client = Client();
  Storage storage = Storage(client);

  client
    .setEndpoint('https://[HOSTNAME_OR_IP]/v1') // Your API Endpoint
    .setProject('5df5acd0d48c2') // Your project ID
  ;
}

//displaying image
FutureBuilder(
  future: storage.getFileDownload(
    fileId: '[FILE_ID]',
  ), //works for both public file and private file, for private files you need to be logged in
  builder: (context, snapshot) {
    return snapshot.hasData && snapshot.data != null
      ? Image.memory(
          snapshot.data,
        )
      : CircularProgressIndicator();
  },
);
Enter fullscreen mode Exit fullscreen mode

This method when working with web returns the storage url with the
content disposition header so that a download is triggered this endpoint is especially useful in web applications where we want to download the file instead of opening the file in the browser itself.

getFileView()

import 'package:appwrite/appwrite.dart';

void main() { // Init SDK
  Client client = Client();
  Storage storage = Storage(client);

  client
    .setEndpoint('https://[HOSTNAME_OR_IP]/v1') // Your API Endpoint
    .setProject('5df5acd0d48c2') // Your project ID
  ;
}

//displaying image
FutureBuilder(
  future: storage.getFileView(
    fileId: '[FILE_ID]',
  ), //works for both public file and private file, for private files you need to be logged in
  builder: (context, snapshot) {
    return snapshot.hasData && snapshot.data != null
      ? Image.memory(
          snapshot.data,
        )
      : CircularProgressIndicator();
  },
);
Enter fullscreen mode Exit fullscreen mode

This method is similar to get file download but this will return without the content disposition header so that file if possible will be previewed in the browser instead of download but for flutter both the get file view and download work in the similar way.

Using Storage in Console

let us go to appwrite console for this you should already have a project and you should be logged in to your
console and select the project I am using the water tracker
project.

Image description

Right now there are no any files so right from console we can tap
on + on right button order to upload a file.

Image description

So let me upload an image and like database, we have a similar permission structure for files so we can provide read access
and write access to our files in the similar way that we provide
access to database items using user id team id role or wildcard
let me tap create once I create the file is
uploaded we can preview the file right here we can also edit and update the metadata like permissions and we can open the file in new window see this is get file view and then we can download the image this will trigger file download that is get file download we can also delete the file by tapping delete so this is how easily we can manage storage right from the console.

Image description

Discussion (0)