file-icon | Get the icon of a file or app as a PNG image | Icon library

I have a child component that has an input field that is hidden behind a slotted element. The parent will provide the slotted click event element, but also show a preview of the file(s), with the ability to delete them above.

I'm not sure how to work this select and preview functionality when working between a child/parent relationship.

What I have below is as far as I got, but I'm just confused at this point as to where to go.

The slot works to trigger the event in the child, but I get a "TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'." when trying to actually get things to render as currently written. Where am I going wrong with this?

If you need anymore information please let me know! Cheer!

NOTE: I also need to make this compatitible with V-model, but I don't know how to do that currently.

UploadMediaFiles (Child Component)

I have a base component that should have the ability to upload multiple files to firestore. Since I want to be able to use this component across multiple points in my app, I want to take advantage of slots so I can change the element that is covering the hidden input tag. So whether it be a button, an svg, etc. I still want the input to trigger the click event.

Currently, only the default img tag works to trigger the @change event.

Do I need to pass more props? How can I make this work in my current state?

If you need anymore information please let me know!

Cheers!

Note: I've yet to get the multiple file selection for firestore upload working, but am working on it.

UploadMediaFiles.vue (child)

I've been looking at this for days now and am totally stuck. The page I am working with looks like this:

I'm facing strange problem with React I never faced before. For some reason I have to select file to upload twice for it to get populated into state:

I am starting on angular 11 and am trying to upload a file or multiple files as a post request to my back end API ( that I created in node.js ) Here is the code I used :

web-request.service.ts

I'm trying my hand at building a website from scratch to act as an online CV for networking and job/school applications. I'm very new to html and css, only started about 5 months ago. For the most part, everything has been working out just fine. The only issue is that on mobile devices the background on sections on my page are being cutoff where I would like them to trail to the end of the screen (the right side). On the desktop, it looks just fine. Any help or suggestions would be appreciated. I'm kinda at a loss on what to do.

Here is the HTML and CSS from my page:

The Major scenario is I want to have a timer for getting new notifications, but sometimes I need to get notifications out of interval cycle that I have defined, so I put it in a useEffect wrapper, And I made a state in a customHook so I can change it from other components and I use that sate in my useEffect hook dependency list. Now I expect Compo1 to re run useEffect but it's not happening...

I have a project with this package.json:

I'm trying to make the Header component in my app show which page is being rendered by adding an "active" class to it when the user clicks on it. This seems like a useState hook problem, but I can't seem to get the conditional operator to change the class name.

Here is my Header.js file:

I have the following code in Vue.js: