Openstad
  • Introductie
  • Projectmanagement
    • Algemene kaders
    • Participatieprocessen
      • Voorkeurspeiling
      • Wedstrijd
      • Participatief begroten
  • Digitale tools
    • OpenStad CMS basis
      • Inloggen
      • De bouwstenen
      • Live in-page editing
      • Bewerkmodus (Draft)
      • Versiebeheer
    • Participatieprocessen
      • Voorkeurspeiling
      • Wedstrijd
      • Participatief begroten
    • How-to's
      • Nieuwe site aanmaken
      • Nieuwe pagina's toevoegen
      • Pagina's vullen
      • Inzendingen uploaden
      • Inzendingen weergeven
      • Filteren en categoriseren van inzendingen
      • Likes verzamelen
      • Reacties en argumenten
      • Interactieve kaart
      • Polygonen
      • Newsletter
      • Moderatie
      • Unieke stemcodes
      • Stemmen
      • Gebruikersbeheer
      • Gebruikers anonimiseren per website
      • Inzendingen exporteren en importeren
      • Vormgeving & logo aanpassen
      • E-mail notificaties
    • Widgets referentie
      • Accordeon
      • Agenda
      • Arguments
      • Columns
      • Slider
      • Counter
      • Date countdown bar
      • Ideas map
      • Ideeën op een kaart (Kaart applicatie)
      • iFrame
      • Image
      • Info bar
      • Link or button
      • List
      • Like
      • Location
      • Participatory budgeting
      • Keuzewijzer
      • Keuzewijzer resultaten
      • Rich text
      • Resource admin buttons
      • Resource overview
      • Resource form
      • Resource representation
      • Resource raw widget
      • Resource image
      • Speech bubble
      • Share widgets
      • Title
      • User remove form
      • Video upload
      • Video 3d party
      • Vorige volgende knoppen
    • Algemeen
      • Terminologie
      • Waarschuwingen
      • Adminpanel
      • Adminpanel (beta)/React admin
      • Page Settings
      • OpenStad hoofdmenu
        • Tags
        • Global
        • Open palette
        • Clear cache
        • Pages
        • Users
        • Images
        • Files
        • Workflow
        • Logout
      • Styles for the container
      • Interactieve kaart thema iconen
      • Inzendingen (ideas)
      • Artikelen (articles)
      • Gebruikers (users)
      • Authenticatie methodes
      • Rollen
      • URL's
      • Testen
      • Raw
      • Resources
  • Technical documentation (English)
    • Architecture
    • Getting started
    • Deploying to production
      • Kubernetes
      • Installing on Digital ocean with Kubernetes
      • Backups
      • Deploying a custom image
    • Frontend: CMS
      • Apostrophe CMS
      • The Openstad version of ApostropheCMS
      • Using openstad-components
      • Configuration
    • Frontend: Components
      • Use and configuration
      • Publishing
      • Components
        • Choices Guide
        • Ideas On Map
    • Api
      • Site
      • Idea
      • Argument
      • Vote
      • Article
      • Newsletter Signup
      • User
      • Auth
      • Resource & Data permissions
      • Pagination and search
      • Email settings
      • Database migrations
      • API configuration
    • oAuth2
      • Oauth2 configuration
    • Management panel
      • Management Panel configuration
    • Image server
    • Contributing & versioning
    • Git flow
    • Roadmap
Powered by GitBook
On this page
  • Prerequisites
  • Installation
  • Clients
  • Uploading an image
  • Displaying & Resizing image
  1. Technical documentation (English)

Image server

PreviousManagement Panel configurationNextContributing & versioning

Last updated 3 years ago

The image server is a simple nodejs express server that allows images to be uploaded with Multer and resizes the based on url scheme, resizing is done with the library.

See: https://github.com/Amsterdam/openstad-image-server

Http-bearer is used fo validating requests so only registered clients can upload images.

Knex migrations create the clients table for registering clients that are allowed to use the API.

Prerequisites

Installation

1. Run npm install

npm i

2. Configure .env

DB_NAME=
DB_USER=
DB_PASSWORD=
PORT_API=
PORT_IMAGE_SERVER=
IMAGES_DIR=
THROTTLE_CC_PROCESSORS=4
THROTTLE_CC_PREFETCHER= 20
THROTTLE_CC_REQUESTS= 100
APP_URL=
CACHE_TTS=
CACHE_OPTIMIZED_TTS=
CACHE_OPTIMIZED_TTS=

The app url is used to return a full url after upload.

Images directory defaults to images, if doesn't get created, create it manually.

3. Install knex globally

npm install knex -g

4. Run knex migration

knex migrate:latest

5. Add a client to mysql

6. Run the server

Run npm (or pm2, or whatever runner you use).

npm run start

Clients

For every site create a row in the MySQL clients table. Generate a random token that's safe. Currently there is no interface for creating so create it command line or through an mysql interface like sequelpro or phpmyadmin. The seed will generate one if the ENV values is

Uploading an image

Example with node.js, using node-fetch & form-data. Pass the access_token that you've generated for the client, can be in url or as header "Bearer: ${token}" make sure it's over HTTPS.

const FormData = require('form-data');
const fetch = require('node-fetch');

exports.upload = function (token, buffer, fileName) {
  const form = new FormData();
  form.append('image', buffer, fileName);
  form.append('field', 'files');

  return fetch(process.env.IMAGE_API_URL+ '/image?access_token=' + process.env.IMAGE_API_ACCESS_TOKEN, {
    method: 'POST',
    body: form,
  })
  .then(function(res) {
    return res.json();
  })
  .then(function(json) {
    //json.url
  })
  .catch(function(err) {
    // handle error
  })
}

Displaying & Resizing image

Example for creating a thumbnail resize and crop:

http://imageserver.com/image/path.png/:/rs=w:350,h:250;cp=w:350,h:250

For throttle see options in .

For all options (resizing, cropping, filter, etc) check .

node-steam
Git
Node.js and npm
ImageMagick
MySQL
node-steam
node-steam
See clients