Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
j4w8n opened this issue Aug 2, 2020 · 2 comments
Open

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

j4w8n opened this issue Aug 2, 2020 · 2 comments
Assignees
Labels
enhancement New feature or request

Comments

@j4w8n
Copy link

j4w8n commented Aug 2, 2020

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.

Screen Shot 2020-08-02 at 5 54 16 PM

@AnandChowdhary AnandChowdhary self-assigned this Aug 3, 2020
@AnandChowdhary AnandChowdhary added the enhancement New feature or request label Aug 3, 2020
@j4w8n
Copy link
Author

j4w8n commented Aug 4, 2020

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
Copy link
Contributor

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! 😄

phlegx added a commit to phlegx/uppload that referenced this issue Aug 12, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Development

No branches or pull requests

2 participants