Adding new media hosts

So you want to add a new media hosting service to RES? Great, here's what you do. First, make sure you meet the requirements:

1. You have a public API that is rate-limited per-user, rather than per-application (or you can provide an unlimited API key)
2. Files hosted on your website have RES expando support (or native Reddit expando support)
3. Users who click links to your files on Reddit can view them in the browser (rather than triggering a download)

Sounds good? Great, here's what you do. First, make sure you have a GitHub account and are familiar with git and the GitHub pull request workflow. Fork RES and get started by...

Adding your host file

Create lib/modules/hosts/yourwebsite.js and put something like this inside:

modules['uploader'].hosts['/* the canonical name of your host module */'] = {
    name: 'MediaCrush',
    blurb: '/* A blurb to show on the submit page. You can use HTML. */',
    maxSize: /* maximum size of an upload on your service, in bytes */,
    load: function(ui) {
        /* This is called when the submit page loads */
    },
    handleFile: function(file, ui, progressBar) {
        var blurb = ui.querySelector('.blurb'); // This will grab the blurb element
        blurb.innerHTML = 'Uploading...';
        var url = document.getElementById('url'); // This is the submit form's URL field

        /* 
         * Add code to upload the file here.
         * `file` is a JavaScript File object.
         * `ui` is the div that contains all of the file submission UI.
         * `progressBar` is a div whose width you can set with the current progress.
         */

        progressBar.classList.add('progress-red'); // For when there was an error
        progressBar.classList.add('progress-green'); // For when you're thinking about life
    }
};

You are encouraged to read through the code for other hosts in lib/modules/hosts/ for reference.

Adding yourself to the settings

Edit lib/modules/uploads.js to add yourself to the settings window so that users can choose you as a provider. You'll find something like this near the top:

options: {
    preferredHost: {
        values: [
            {
                name: '<img width="16" height="16" src="' + MediaCrush.logo + '" style="position: relative; top: 3px" /> \
                    <a href="https://mediacru.sh/about" target="_blank">MediaCrush</a>',
                value: 'mediacrush'
            }
        ],
    }
},

Add your host to the values array so it looks something like this:

options: {
    preferredHost: {
        values: [
            {
                name: '<img width="16" height="16" src="' + MediaCrush.logo + '" style="position: relative; top: 3px" /> \
                    <a href="https://mediacru.sh/about" target="_blank">MediaCrush</a>',
                value: 'mediacrush'
            },
            {
                name: 'HTML for the radio button on the settings window that selects your host',
                value: 'the canonical name of your host module'
            }
        ],
    }
},

Submit your pull request

That's all you have to do! Test it and submit a pull request.