Broken "Show list of file types for file limitation on assignment uploads" feature?

[emlarson]

Reaching out to my fellow Admins: We discovered that a feature we had in the Assignments area to show checkboxes of some common filetypes when teachers opt to restrict file uploads apparently isn't the core Canvas feature that we thought it was. That's relevant because it just broke, and we have no idea where it came from... and, if it wasn't unique to us, it might be broken in other systems out there now?

The code doesn't have much commenting beyond its description of "Show list of file types for file limitation on assignment uploads" and a reference that it "uses onPage function by RPFlorence" which points to a GitHub site of Ryan Florence's InstructureCon code from 11 years ago.

I guess I'm not surprised it broke given that the Assignments page was just redesigned... and I can't blame Instructure for not supporting something that isn't in their core code... but we didn't put it there, so I have a feeling our Instructure implementation team in 2016 added it (and they've all left the company in the years since).

Does anyone else have this code for Assignments in their instance and, if so, is it still working?

[melodyc_lam]

@emlarson

Based on what I'm seeing in the screenshot and of the symptoms, it looks likethe code is in your theme's custom JS file. Try looking there. You're able to download the file and comb through it for the code.

Hope this helps!

[emlarson]

Thanks, @melodyc_lam - yup, we had found the code, and one of our developers is trying to untangle it, but that's proving hard since we don't have examples of console logs and such from when it was working.  It's throwing errors related to Heap Analytics which might be an addition thanks to the new Analytics dashboard and could be the root cause... or, maybe those have been there for months and something else broke it.

I'm concerned not only for our own code (because it sure was useful and, golly, we'd like that feature back!) but if others have things running with JavaScript additions (additions that they might not even know about because they were done by Instructure staff years ago) they might be discovering that other pieces of their Canvas instances are broken in weird ways.

[melodyc_lam]

@emlarson 

Yeah, that's why there's a caveat to always check custom JS and CSS to ensure that things don't break when there's updates to InstructureUI or to integrations. If you post the code here someone might be able to figure out why it's not working. I suspect that if you remove the analytics (Heap Analytics seems to be a 3rd party thing) then the code may resume working. Try it in beta before you push it to your live instance 🙂

[emlarson]

Yup. 1) We had no idea this core feature of ours was custom JavaScript - it's obvious once you look through our script, but we'd had it ever since our original implementation from Instructure so we didn't know they were adding custom code that wouldn't be supported in the future.  2) Heap Analytics is the tool that Instructure has contracted with to do their Admin Analytics -- you'll see the calls to that server if you watch the traffic when you open Analytics pages -- so we can't remove that.  3) As far as I know there isn't a way to alter the JavaScript in Beta and Beta alone; from my understanding, the JS and CSS always points to the live server, but maybe I've understood that wrong?

[melodyc_lam]

@emlarson I just checked my Beta instance as I applied a custom JS change in my live instance yesterday afternoon; Beta doesn't reflect the changes I've made so they are separate instances of the custom JS file. 

[JamesSekcienski]

@emlarson 

Most likely the Heap Analytics errors you see have been there before.  I know when I'm testing code and reviewing the console there are often other errors/warnings reported that aren't relevant to the code added via the theme customization.  Most of the time those errors can be ignored unless you notice an error/warning specific to the JavaScript file you uploaded.

Instructure is continuing to update how their UI is built as they transition to more of their own Instructure UI components using React.  When these updates are released it often results in changes to the elements that exist, and the IDs/classes applied to them.  Depending on how a theme customization is designed, this can result in an expected element/ID/class no longer existing and thus the modification doesn't get applied.  In other cases, sometimes the elements are loading in differently than before and now require a better handling of this.

Adding in some alerts and/or console log statements can help you see how much of your theme code is running and when it may be stopping.  If it is a loading issue, you may also notice that it does get added, but then another page/element update occurs as it finishes fully loading that overwrites the customization your code just added.

As @melodyc_lam shared, if you are open to sharing the code in the Community it might be something that others can help with troubleshooting and may be something other schools consider adopting for their school. 

I would also highly recommend seeing if this exists as an Idea yet.  If not, then I would recommend submitting as an Idea to get it on Instructure's radar and maybe in the future it will be a feature they add natively to Canvas so you don't have to manage the code for it.

[emlarson]

Thanks, @JamesSekcienski (and @melodyc_lam )!  I'm happy to share the code, especially since it wasn't ours to begin with -- following the trail out to GitHub it looks like the OnPage code came from something InstructureCon-related about 11 years ago.  I've added ours here as an attached text file, which I imagine is a pretty safe way of making it available for review by anyone curious.

I tried looking through the Idea submissions on this topic and the only thing I was able to find was a complaint that the default descriptive text references the "doc" type rather than "docx" - "doc" hasn't been used in years and years, but using it as an example could mislead faculty into thinking that it's the appropriate choice to limit things to Word.  (I thought that was a good point but it's been moot for us since we had these awesome checkboxes that made it really clear what the right choices were.)

(I appreciate the @melodyc_lam tip about JaveScript in Beta - I'll revise my understanding and take a look at how edits there affect Prod because, gosh, if they don't then that sure makes troubleshooting this a whole lot easier!)

[JamesSekcienski]

@emlarson 

Thank you for sharing the code that is being used.  Based on a quick review, I see that this customization is based on jQuery.  Instructure has been making updates to jQuery and trying to move away from using it as they update their UI.  Instructure is encouraging developers to move away from relying on jQuery being in Canvas for their custom code. Updating jQuery in Canvas 

With a quick test, it looks like it may be loading issue with when the code is attempting to access the input for the allowed extensions and when it is fully loaded into the interface. I don't have time right now to do a deeper dive on the code, but I will share any other suggestions I discover later.  Hopefully someone else from the Community may be able to take a look and provide suggestions too.

[melodyc_lam · Accepted solution]

@emlarson and @JamesSekcienski 

First off, I do not like jQuery and agree with moving away from it.

Second, I'm a Python programmer but understand how jQuery works with HTML and can dabble in it when needed 🙂

The reason why your code isn't working is because it's relying on behavior that was present in 1.6 jQuery and was changed for 1.7+ jQuery. 

Remember that jQuery on Canvas got updated for security reasons a few months ago, which also probably broke a lot of scripts (including this one!) This very much has shades of when Python moved from 2.x to 3.x and broke backwards compability.

The good news is that I think the fix is one line and it's straightforward.

Find the line 

if($(this).attr('checked') == "checked"){

and change it to

if ($(this).prop("checked")) {

Save your custom JS and load it into Beta first, then check with an assignment. I loaded it up in my Canvas beta instance and it looks like it worked and saved the assignment correctly.

Good luck!

[melodyc_lam]

Oh, and to explain what this bit of code does:

It basically fills in the "acceptable file types" input field/text box with the correct file type extensions for those files. Most teachers don't know the extensions of their files, and usually tell students "I want a Word doc", "I want an Excel spreadsheet", etc.

The teacher can check the box for the appropriate file and the code will fill in the correct file type extensions for them 🙂 There's also error checking code, just in case a teacher checks a box and also types in a file type extension in input box.

[JamesSekcienski]

@melodyc_lam 

Thank you for catching that and sharing!  I primarily work with vanilla JavaScript, so I wasn't aware of that specific change with jQuery.  I'll be sure to keep that in mind for the future if I come across other jQuery code like that.

[emlarson]

Thank you both for all the help! As an aside, we thought we were on top of the jQuery changes and checked in with our vendors that have code integrations... but one thing didn't do is go through our JavaScript thoroughly and make sure there wasn't something else in there that we didn't even realize we had. That sounds like an obvious step, sure, but this was one of those things that was just part of our system from Day 1 and we never thought about the possibility of it being custom code.

In our case, it was a great reminder (and I'm sharing it out here are a nudge to any fellow admins passing by) that even when things are working smoothly, it pays to review your systems as thoroughly as reasonably possible so you can flush old stuff out of the weeds and deal with it in advance... or, at least, give yourself a better clue of what might be lurking in your weeds.

[chriscas]

Hi @emlarson,

I know this thread is about a year old, but someone else just asked about a feature like what this script adds to Canvas...  I'm wondering if you know where exactly the original code you shared for this came from.  Was it actually from instructure, or somewhere else, or has that info just been lost to time?  I ask because, along with some assistance from Claude AI, I have a vanilla javascript version of this functionality, which I think I also improved on a bit (making it more accessible for sceren readers, updating the checkboxes based on typed input, and not requiring the extensions to be in a certain order to be detected).

I'd like to possibly share the code, but not knowing where the original came from and what license it may be under makes things a bit complicated.

If you have any info you can share, please let me know!

-Chris

[emlarson]

Hi, Chris! Literally "lost to time" - our terrific CSM who did our onboarding in 2016 long since moved on from Instructure but I'm still in touch with her so I asked back when we first were exploring this (like, "Hey, is there a chance that this was something you copied/pasted into our root JavaScript?") and the answer was a very kind and friendly version of "that sounds like something I might've done" ...but we have no idea where the code actually came from. Probably shared at an InstructureCon back in the day, or a similar forum (old community site or whatever).  I wish I could give you a better lead than that but I think what was captured in this thread here last year is the best history we're going to get.

[chriscas]

Thanks for the quick reply!  I may decide to post my code once i'm comfortable enough (I'm hoping at least a couple people will test it and provide feedback) and point back to this thread as at least an original/inspiration source.

-Chris