Shadis

Shadis is a self-hostable platform for video and image uploads from screencapturing software like ShareX. Its highlight features are:

• An elegant and functional user interface for presenting your files
• Password-protected dashboard for managing your uploads
• Straightforward system for converting videos to GIFs
• Twitter and OpenGraph metadata for instant visibility of the images and videos in URL-cards of popular messaging programs like Slack, Discord, Skype, etc.

See it for yourself!

• Shadis for screenshots: link
• Shadis for screencaptures: link

Requirements

This project was built with webspace hosts in mind. These providers usually don't grant shell access, nor do they allow the installation of additional software. Thus, Shadis explicitly keeps the dependance on uncommon software at a minimum. The following technologies are used on the server-side:

• Apache HTTP Server
• MySQL
• PHP
• ImageMagick

Hosting providers typically don't boast with their ImageMagick support, so make sure to dig around in their support pages first. A list of providers which are known to have ImageMagick preinstalled can be seen here.

Getting Started

Shadis is still in beta and will not be released as a pre-compiled package until it reaches a stable stage. That said, it already is possible to generate fully functional production builds.

Generating a production build

First, download Shadis and its necessary dependencies by following the setup instructions below. You should then be able to compile the code via yarn build. Follow the instructions in the console should an error happen while compiling.

The contents in the build directory can then be deployed to a PHP web-server.

Preparing the Database

Currently, Shadis is unable to create all the necessary database tables on its own

You can execute the SQL queries shown below in order to create the needed tables manually. Feel free to change the table names; just keep in mind that you need to assign them in config.php later on.

Click me to show the SQL queries

CREATE TABLE IF NOT EXISTS `shadis`.`shadis_users`(
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `username` VARCHAR(50) NOT NULL UNIQUE,
  `password` VARCHAR(255) NOT NULL,
  PRIMARY KEY(`id`)
);

CREATE TABLE IF NOT EXISTS `shadis`.`shadis_files`(
  `id` char(8) NOT NULL,
  `token` char(16) NOT NULL,
  `extension` varchar(5) NOT NULL,
  `width` int(255) NOT NULL,
  `height` int(255) NOT NULL,
  `thumb_height` int(255) NOT NULL,
  `timestamp` int(11) NOT NULL,
  `title` varchar(255) NOT NULL,
  `has_gif` tinyint(1) NOT NULL DEFAULT '0',
  PRIMARY KEY(`id`),
  UNIQUE (`id`),
  UNIQUE (`token`)
);

CREATE TABLE IF NOT EXISTS `shadis`.`shadis_file_tasks`(
  `id` char(8) NOT NULL,
  `gif` tinyint(1) NOT NULL DEFAULT '0',
  `thumbnail` tinyint(1) NOT NULL DEFAULT '0',
  PRIMARY KEY(`id`),
  UNIQUE (`id`)
);

Configuring

Shadis will not function properly without configuring it first.

You can find a sample configuration file inside the subdirectory protected. Rename config.sample.php to config.php and fill in the necessary data in the config file. You will find an explanation of each mandatory data field.

Development

This project was bootstrapped with Create React App as the front-end and uses PHP as the back-end. You can find the front-end code in src and the back-end code in public.

This guide assumes you use yarn as the default package manager

Requirements

• Node.js (>= 13.5.0)
• yarn 1.x (preferred over npm)
• Apache HTTP Server
• MySQL
• PHP
• ImageMagick

Setup

Note that this repository uses submodules which need to be cloned seperately. To achieve this, you can add the following argument when cloning:

git clone --recurse-submodules https://github.com/Pogodaanton/Shadis.git

Afterwards, you can install the necessary dependencies

cd shadis
yarn

Make sure to configure Shadis and create the necessary tables in your development database before trying to use the development build.

Available Scripts

In the project directory, you can run:

yarn start or yarn serve

Runs the app in development mode and compiles the code into the dist folder.
Because webpack-dev-server cannot interpret PHP code, it is required to route a PHP-(MySQL/MariaDB)-server to the automatically generated dist directory.

The page will reload if you make edits.
You can see lint errors in the console.

yarn build

Builds the app for production into the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

This build is minified, classnames are simplified and the filenames include hashes for cache prevention.
See the section about deployment for more information.

Learn More

The inner workings of the system are described in the codebase. Here are links to the documentation of awesome third-party products Shadis is using:

• Create React App
• React Library
• Framer Motion
• FAST-React
• getID3
• gif.js
• react-virtualized
• ImageMagick