Comments (12)
Consider this: you have many file-upload-with-previews on the same page. They were inserted from the same Vue component multiple times. Each one of them has
window.addEventListener(Events.IMAGE_ADDED, imageAdded)
You end up with n listeners and all fire.
from file-upload-with-preview.
Thanks for the message. Personally, I think the way it is setup makes sense in the current iteration.
Unless I'm missing something - you don't need n
number of listeners, you just need the number of listeners you're interested in, Events.IMAGE_ADDED
and Events.IMAGE_DELETED
for example.
Then, when filtering the event, you just look for the detail.uniqueId
you're interested in.
window.addEventListener(Events.IMAGE_ADDED, (e: Event) => {
const { detail } = e as unknown as ImageAddedEvent;
if (detail.uniqueId === 'myFirstId') {
// ...your code
}
});
What's your opinion on this? Is it ok for your usage?
from file-upload-with-preview.
I have the root Vue component and numerous children set in a loop, each containing file-upload. So where do I have to add eventListener? If I do it in the parent component, I must pass a lambda to a child (God knows why it frightens me). If I add eventListener in a child, I end up with multiple listeners.
Right now, I add eventListener in a child, change a tag somewhere in a root div ('events = true'), and other children check whether the tag is set and do not add their listeners. So I have one listener, and this listener checks uniqueId, as you pointed out.
from file-upload-with-preview.
The event listener is attached directly to the window, no need to enter the loop, or provide further lamdas. Then, you can maybe use a switch on the uniqueId that comes through.
Sorry if I'm not fully understanding your use-case. If you could provide some sample code I'd be willing to think through this further. But I think what I've shared should work, unless I'm missing something fundamental with the Vue implementation.
from file-upload-with-preview.
My question "where do I have to add eventListener" means not "to what object I have to attach eventListener", but "in what point in my program I have to put window.addEventListener(Events.IMAGE_ADDED, imageAdded)
".
The skeleton of Vue component looks like
Parent
Ten children, all the same
If I add eventlistener in children, I have 10 eventListeners attached to window. If I add eventListener in Parent, I end up with
window.addEventListener(Events.IMAGE_ADDED, imageAdded)
where imageAdded is currently in child. I don't know how address function in child component from parent.
from file-upload-with-preview.
Understood.
In the case of a Vue app, because this event is directly on the window
, you don't need either option actually.
What you need is this I think (for a Vue2 app):
...
created: function() {
window.addEventListener(Events.IMAGE_ADDED, this.yourHandlerFunctionHere);
},
destroyed: function() {
window.removeEventListener(Events.IMAGE_ADDED, this.yourHandlerFunctionHere);
}
...
More info here. But this is how I would approach it.
from file-upload-with-preview.
Where I have to do it, in the parent or in the child?..
from file-upload-with-preview.
If it's like 10 children (not 100+) I think it's fine to add it in the child and have multiple handlers attached to the window. Then each child check that its own uniqueId
is the one in the event before acting.
Another way is to setup the handler in the parent, and pass down the needed result to the children as a prop.
There probably is other ways to handle this if you search around a bit.
from file-upload-with-preview.
Yep. There is something in me that repels the idea of 10 listeners, but maybe it's the same thing as checking html attribute as I do now.
The second option I see like this: in parent component IMAGE_ADDED event sets array value, for example [0, 0, 1, 0, 0], array values are fed down to child components by corresponding numbers (6th component receives 1 when image uploaded to 6th, other receive zeroes), and watchers inside child components monitor their input props.
All these are feasible... More or less... Clumsy but feasible...
from file-upload-with-preview.
Yea you got it, sorry it's not ideal. I will continue to keep this in mind going forward.
from file-upload-with-preview.
Sorry John, I did not have intention to be disgruntled. Your module works just fine inside user-generated tool within Laravel Nova. No tuning needed. It's good as it is.
from file-upload-with-preview.
No problem at all, glad to hear it. Closing for now.
from file-upload-with-preview.
Related Issues (20)
- How to access already added images while editing a form? HOT 2
- FileUploadWithPreview is not a constructor (extended with examples) HOT 2
- May I use html_form submit to backend? HOT 2
- how to capture the event with jquery? HOT 1
- There is no name attribute to get the image on backed HOT 4
- Beginner overloaded HOT 2
- Can I use this inside react [just react] ? HOT 2
- Name attribute not present in sending request to server. HOT 6
- file_upload_with_preview__WEBPACK_IMPORTED_MODULE_4__.FileUploadWithPreview is not a constructor HOT 4
- Use in Next js and Tailwind HOT 3
- bug on chooseFile label HOT 2
- Save in local storage HOT 2
- How to attach to previously initialized instance of FileUploadWithPreview? HOT 4
- How to dynamically click the clear button? HOT 1
- Added event confusion with presets and new add HOT 3
- IE11 HOT 3
- How to Change Input file label? HOT 1
- Need to Show The Browse Button HOT 1
- Rendered order of PresetFiles
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from file-upload-with-preview.