bbcollab / blackboard - set a gif as profile image

guide.md

steps to set a GIF (or JPEG / PNG) as your blackboard profile image

⚠️ file types other than GIF, JPEG or PNG do not work.

❌ Checking for the file size is not always accurate. If a file is just a little too big it will not change your profile picture on reload!

1. Find a (small) GIF / image, otherwise you'll get a message telling you the file is too big.

2. Open your browser console while on a "https://eu.bbcollab.com/" page

3. Copy and paste this script:

// import Sweetalert2 for error alert and file selection dialog
await import('https://cdn.jsdelivr.net/npm/sweetalert2@11.4.4/dist/sweetalert2.all.min.js')

const hostname = "eu.bbcollab.com";
// Max filesize. 508553 bytes is allowed. 508554 is NOT allowed
const maxSize = 508554;

if (window.location.hostname == hostname) {
    // ask for file
    const { value: file } = await Sweetalert2.fire({
        title: 'Select image',
        input: 'file',
        inputAttributes: {
            'accept': 'image/*',
            'aria-label': 'Upload your profile picture'
        }
    })

    // if the file is received, encode it and set it as the profile image
    if (file) { encodeImageFileAsURL(file) }

} else {
    Sweetalert2.fire('Wrong domain!', `Go to <a href="https://${hostname}">${hostname}</a> first!`, 'error')
}

function encodeImageFileAsURL(file) {
    // if file size is small enough proceed setting the profile image.
    if (file.size < maxSize) {
        // set up file reader
        var reader = new FileReader();
        // when reader is done, turn image in base64 encoding and set it as profile picture
        reader.onloadend = function () {
            // set profile image
            localStorage.setItem("profile.avatar", reader.result);
            // ask for page refresh
            Sweetalert2.fire(
                'Refresh your page',
                `Only after refreshing your lecture page on ${hostname} will your new profile image will be shown.`,
                'info'
            )
        }
        // read the file, afterwards it will be handled by reader.onloadend
        reader.readAsDataURL(file);
    } else {
        Sweetalert2.fire(
            'File too big!',
            `Max size is ${maxSize} bytes.<br>Your file was ${file.size} bytes.<br>This is ${file.size-maxSize} bytes too big!`,
            'error'
        )
    }
}

4. Reload the page!!!

5. Profit

Contributing

• If you fix or change anything, please comment and add your modified code (or link to your fork).
• If you found a bug please comment with a good explanation of the problem.
• Ideas / feature requests are also welcome.

z-changelog.md

Change Log

[1.1.0]

• Added: Sweetalert2 for nicer dialogs
• Fixed: File selection broken due to onclick events not being able to be triggered via javascript anymore.

[1.0.1]

• Fixed: Max file size check. Previous method calculated the max POST request size, not the max size of the image.

[1.0.0]

Initial release.