How to connect to the Fuga Cloud Object Store using Flask

Connecting to the Fuga Object Store with Flask

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

To connect to your Fuga Object Store access and secret keys are required. If you already have these you can skip this chapter.

To list and create API keys for the Object Store we need the Fuga OpenStack CLI. If you haven’t installed it yet check out our tutorial.
After following the tutorial for your operating system it’s time to list the credentials. We need the credentials to access our Object Store container in later steps.
To list all the credentials, enter the command:

openstack ec2 credentials list

If the list of credentials is empty, a new pair of credentials can be generated with:

openstack ec2 credentials create

Either copy the Access and Secret key to the clipboard or save them temporarily

Creating a Fuga Object Store container

Open your Fuga Dashboard and open the ‘Object Store’ section.
Click on ‘Containers’ and create a new container.

We now have a container that is ready to be used in the upcoming steps.

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 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.