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.
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.
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.
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.
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`)
);
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.
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
- Node.js (>= 13.5.0)
- yarn 1.x (preferred over npm)
- Apache HTTP Server
- MySQL
- PHP
- ImageMagick
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.
In the project directory, you can run:
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.
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.
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: