Default upload text should change to file name

[ghost]

Summary

PR #120 solves the styling of the modal, but the "No file selected message" does not change to the name of the file uploaded.

Things to Consider

• Assign a custom class or id for the span tag which encloses the default message.
• Implement a JS snippet that looks for the file upload event to be triggered. On completion, replace the string inside the tag to the file name.

This page would be a nice material to refer to.

Criteria for Completion

• [ ] On uploading a file, the No file selected should be replaced with the file name.

What it looks like right now:

What it should look like:

[chandan270]

Can I work on this issue?

[ghost]

@chandan270 that would be great. Just wait for @garettarrowood's ping, and you can work on the issue.

[garettarrowood]

Thanks @chandan270 !

[garettarrowood]

@chandan270 - Are you still interested in completing this work? Just checking in.

[ghost]

@garettarrowood I'll fix this issue this after the 8th of this month.

[garettarrowood]

That'd we great! Thanks @Ashvith !

[ghost]

@garettarrowood need some help with adding Javascript. I am actually clueless about where we can add JS files here. Is it supposed to be inside javascript/controllers?

This is what I wanted to add:

const actualBtn = document.getElementById('select-file');

const fileChosen = document.getElementById('file-chosen');

actualBtn.addEventListener('change', function(){
  fileChosen.textContent = this.files[0].name
})

[garettarrowood]

@Ashvith - I'm not experienced with StimulusReflex JS conventions at all.

I would say try it in a couple places that seem to make sense, and use your best judgement. As long as we get it working, and its named well (as in, the file is named well), we should be able to either run with your convention, or refactor it to another place as we grow smarter/more experienced :) .

[ghost]

@garettarrowood Looks like this is out of my experience too. If you want to, I could have a look at some of the tutorials, and examples and maybe fix this sometimes later?

[garettarrowood]

If you can even get this to work in a <script> tag at the bottom of the HTML file, I'm fine with it.

[ghost]

I've tried the script method, and it isn't working as well. Stimulus-Reflex is the only way. I've tried some examples, but then I was not able to succeed because when the label-for click element is triggered, the application is supposed to wait till the user chooses a file, but in my case, it starts looking for the file directly even before the user can click, which is non-existent at the time of the event, and so it throws a controller error.

[JelenaD1]

Can I take over and work on this issue? @garettarrowood