Add a settings option to choose where to render the Uppload modal

[j4w8n]

Is your feature request related to a problem? Please describe. Yes it is. I'm using Svelte as a front-end framework for my app. Svelte uses client-side routing (you probably knew that). Like other front-end frameworks, the entire app is rendered inside a single div.

In my code, I created a new Uppload at a /profile page. Everything works great here. The file is uploaded and the modal closes. But when I navigate back to the / page (using client-side routing) an unstyled Uppload shows up at the bottom. I've attached a screenshot. If I refresh the / page in the browser, this goes away. If I'm on the /profile url and open the Uppload modal, then close it without uploading a file, I don't have the lingering div on the / page. It's only if I upload a file.

After looking at the dev tools, I realized that the uppload-container div is added to the bottom of the body element - outside my app's div element. So after I use the uploader, this causes the lingering element to show up on all other pages of my app - even though the 'visible' class is removed.

Describe the solution you'd like A settings option where you declare a class for the html element you'd like Uppload to be rendered in.

I played around with dist/uppload.js and was able to achieve this by doing the following.

after line 40, add this.wrapper = ""; replace line 53 (or old line 52) with const body = this.settings.wrapper ? document.querySelector(this.settings.wrapper) : document.body

It seems like this correlated to line 67 of src/uppload.ts, and then insert wrapper = ""; around line 46??? Wasn't sure.

Finally, I added the setting to my Uppload instance; with the class name of the div I wanted to use at the bottom of my /profile page - being sure to include the leading dot. wrapper: '.uppload'

Thanks!

Describe alternatives you've considered I tried to use client-side javascript to remove the uppload-container from the body after the upload, but it wasn't working. It ended up just preventing the modal from opening at all.

Additional context I'm not sure if there are consequences to using this proposed option and the existing inline option at the same time.

[j4w8n]

Just FYI, if this is considered, I think it might make more sense to use an id instead of a class. I went ahead and changed my setup to reflect this.

replaced querySelector with getElementById in the uppload.js file replaced .uppload with uppload in the Uppload instance wrapper config replaced class with id in my html element

[AnandChowdhary]

Thanks, @crevizzle! This is definitely a todo. @plibither8 is also planning on using Uppload in a Svelte project, so we'll see who can get to this first! 😄