How do I copy and place the drag and drop function within the course creation page?


I would like to place the drag and drop tool within the “add new component box” which is located on the page that is used to create the course content (see below)
How do I do this?

Hi @kribby - Drag and drop is under Problems -> Advanced problems :slight_smile:
You’ll want to make sure you use the one where the default image is a pyramid, not buckets. The buckets version is old, bad, and deprecated

Thanks for getting back to me @MHaton - apologies for not being clear but I was referring to the drag and drop file upload tool. I want to integrate it into the pages where the courses are created.

Ah right! I’ll have to bow out of this one then, beyond my expertise to make a dramatic change like that :frowning:

I would say though that from an authoring perspective, it’d make more sense to implement it where it’s needed, much in the way it was done with image insertion - else you still have to close your component to upload files which sort of defeats the object. If you added a drop zone for files on that list, the user expectation would be that the file would be added to the unit directly, as that’s what all the other buttons in that row do. When in fact you’d still need some kind of component, whether XBlock or HTML component in order to actually make that file a part of the page.

Thanks for that suggestion - agree. Essentially I want to be able to allow the course creator to drop in video files and a pdf. The files uploaded would then be “automatically” used within an iframe and presented to the student

I think in that case a good workaround would be to extend something like the PDF XBlock with the drag and drop upload functionality instead. Or you’re going to have to completely rework how units are created, which would be nice but super complicated to do. Video would obviously be a TON more complex and need to be hooked up to the video pipeline or something like that.

You might want to check out the way that the Text component takes in image files. Perhaps something like that could be duplicated across other components as well. Here’s a pair of screenshots in case you haven’t seen the new version. Clicking on the “Insert/Edit Image” button gives you the drag-and-drop file upload tool.