How to connect to the Fuga Cloud Object Store using Flask

Estimated time to read: 3 minutes

The possibilities with the Fuga Object Store are endless. One of the scenarios is connecting your Flask application to the Fuga Object Store, this way you can access for example images on your Store! In this tutorial, we will teach you how to make a simple Flask file upload application that uses the Fuga Object Store.

API keys and creating a bucket

To get started with credentials and creating a bucket, see our getting started tutorial.

Attaching the container to an existing Flask application

Next up is installing boto, this package is required because it allows us to easily connect to the Fuga Object Store. Install the boto package in your Flask project with the following command:
```
pip install boto
```
Create a new folder for your project, for example, flaskfuga:
```
mkdir flaskfuga
```
Open the folder:
```
cd flaskfuga
```
Create a new Python file within your flaskfuga folder called something like ‘object_store.py’:
```
touch object_store.py
```
Open object_store.py in your favorite editor and copy and paste the Python code from our GitHub.

Uploading files to your Fuga Object Store container

Create a new app.py in your flaskfuga folder using the following command:
```
touch app.py
```

Open the app.py file in your favorite editor and copy paste the following:

from flask import Flask, render_template, request
from object_store import FugaObjectStore

ACCESS_KEY = 'YOUR_ACCESS_KEY_HERE'
SECRET_KEY = 'YOUR_SECRET_KEY_HERE'
CONTAINER_NAME = 'YOUR_CONTAINER_NAME_HERE'


app = Flask(__name__)


@app.route('/')
def index():
    return render_template('index.html')


@app.route('/upload', methods=["POST"])
def upload_file():
    file = request.files['file']

    with FugaObjectStore(ACCESS_KEY, SECRET_KEY, CONTAINER_NAME) as fuga:
        fuga.upload(file, file.filename)

    return render_template("index.html")


@app.route('/list-images', methods=["GET"])
def list_images():
    html = ""

    with FugaObjectStore(ACCESS_KEY, SECRET_KEY, CONTAINER_NAME) as fuga:
        files = fuga.list()
        for file in files:
            current_file = fuga.get(file)
            html += "<image src='data:image/png;base64, " + current_file + "'>"

    return html


if __name__ == '__main__':
    app.run()

Place your own access and secret keys in the correct variables
Make sure your flaskfuga directory contains a directory called templates, create it with the following command:
```
mkdir templates
```
Next up is creating a view for our file upload. Create a file in your templates called index.html.

Copy paste the following code inside index.html:

<html>
<head>
    <title>Upload to Fuga Object Storage</title>
</head>
<body>
    <h1>Upload to Fuga Object Storage</h1>
    <table>
    <tr>
        <td>
        <form action="/upload" method="POST" enctype="multipart/form-data">
            <input type="file" name="file"/>
            <br />
            <input type="submit" value="Upload File" />
        </form>
        </td>
    </tr>
    </table>
</body>
</html>

Run your Flask application with:
```
python app.py
```
Head to http://127.0.0.1:5000/ to use your Flask application
Try to upload an image and check on your Fuga Cloud Dashboard if the image has been added to your Fuga Object Store container.

Listing stored images from your Fuga Object Store

Add the following method to your app.py:

@app.route('/list-images', methods=["GET"])
def list_images():
   files = fuga.get_files()
   html = ""
   for file in files:
       html += "<image src='data:image/png;base64, " + fuga.get_file(file) + "'>"
   return html

Save the changes and restart your Flask application.
```
python app.py
```
Now you are able to retrieve your uploaded images on http://127.0.0.1:5000/list-images

See our GitHub page for the full project.