# Description
Please provide a summary of the changes, including relevant motivation
and context.
Closes #(issue_number)
## Checklist
- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have performed a self-review of my own code
- [ ] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)
---------
Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
Co-authored-by: Reece Browne <reece@stirling.pdf>
* Add separate drag and drop area for file choosers
- Add separate drag and drop area for file choosers
### Why?
Previously, when there were multiple file choosers in the same page, if you attempted to drag and drop any files, they would be added to both file choosers as it was designed at first to handle 1 file chooser present, now that we have multiple ones, it is necessary to adapt our design to match the changing functionality.
### Can you not preserve the old overlay when there's only one file chooser present?
Yes, we can, but imagine as a user, you try to drag and drop a file in one page and the fields turn into drag and drop areas then you go to another page and try to drag and drop again but you encounter the old overlay instead, as a user you might get confused and ask yourself "What changed?" or if a user is telling another user the steps to drag and drop files and he didn't know about this case, then it would still be confusing, thus consistency is preferred in this case.
* Update file chooser UI
* Add support for listing and removing selected files and their file icons
- Selected files are listed below the file chooser in a selected files container.
- Users can now remove uploaded/selected files.
- Hide selected files container/box unless there are files selected/uploaded.
- Add separate overlay for each drag & drop area.
## FAQ:
- Why did you assign a unique id to each file? isn't the filename enough?
= Because a user might upload multiple files with the same name, if the user wanted to remove one of them, how would we differentiate between them? we won't be able to unless we assign an identifier, you might argue "we remove based on the filename and size", then what if the user uploaded the same file more than once (intentionally), then we would accidentally remove all the files even though that is not what the user wanted, so going with unique ID approach would prevent this issue/problem from occurring in the first place.
* Rename remove-file css class to remove-selected-file
- Rename remove-file css class to remove-selected-file to avoid css conflict with remove-file in merge.css
* Use input element to dispatch event on file removal
Use the correct element to dispatch "file-input-change" (input element is the correct one).
* Adapt file chooser UI to themes
- Adapt file chooser UI to themes by adjusting their font colors and background colors.
- Make text more visible in overlay by increasing the font size by 0.1rem and setting font weight to 550.
* Remove extra overlay border
- Removing overlay's border as it is unnecessary and only causing a double border issue on the file input container.
* Remove Browse button, highlight file chooser and make it clickable
- Remove browse button.
- Make the entire file chooser container clickable.
- Add glowing effect on hover for file chooser.
- Change color of file chooser on hover.
* Replace crypto.randomUUID() with UUID.uuidv4()
- Replace crypto.randomUUID() with UUID.uuidv4() as crypto.randomUUID() is only supported in secured contexts such as localhost 127.0.0.1 and over HTTPS
* Fix merge file removal not being reflected in file chooser
- Files removed from the list in merge page would now be reflected in the file chooser's container.
* Make inputElement optional in removeFileById
- Make inputElement optional in removeFileById, this way we could control changing inputElements files.
* Add translation support to file chooser
---------
Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
Fix fileInput.js adding event listeners more than once
- Fix a bug that caused fileInput.js to add event listeners more than once per HTML file as it's included in fileSelector fragment in fragments/common.html thus it's being loaded N times where N is the number of file selectors / custom file chooser / file input elements per HTML file, which resulted in each event actions being executed N times as well, which was prevalent in drag and drop operations such as dragging and dropping a file called y.png, it would be duplicated N times (as in /sign path).
Fix a bug that allowed multiple files to be dropped onto a single-file input element
- Fix a bug that allowed multiple files to be dropped onto a single-file input element by accepting only the first file.
* backup
* remove debugs
* oauth to saml and compare fixes etc
* ee flag for saml
* more fixes
* info to debug
* remove unused repo
* spring dev fix for saml
* debugs
* saml stuff
* debugs
* fix
- Fix Array.from syntax in nonmultiple file upload as Array.from(<non-array or string>) returns an empty array which is the case when a file is selected from an input element (when multiple attribute isn't supported) which can be found in Array.from(element.files[0]) -> results in an empty array.
* Fix input files being overwritten by newly uploaded files
- Fix a bug that caused existing selected/uploaded files to be overwritten when a new input file is uploaded through input element.
- Add source property to change event to differentiate between uploaded files using input element and drag/drop uploads to avoid processing drag/drop files more than once, thus avoiding file duplication (file duplication resulting from copying drop/drop files to input files on each 'change' event).
* Dispatch and use file-input-change instead of change event for merging
- Dispatch "file-input-change" event after each "change" event in file upload, to notify other functions/components relying on the files provided by the \<input\> element.
- Use "file-input-change" instead of "change" event to display the latest version of uploaded files.
# FAQ:
- Why use "file-input-change" instead of "change" in merge.js?
= "change" event is automatically triggered when a file is uploaded through \<input\> element which would replace all the existing selected/uploaded files including the drag/drop files.
## Example:
Let's say that the user wants to upload/select the x.pdf, y.pdf and z.pdf all together:
- user selects "x.pdf" -> file selected successfully.
= selected files: x.pdf
- user drags and drops "y.pdf" -> file dropped successfully
= selected files: x.pdf, y.pdf
- user selects again using \<input\> "z.pdf" -> file selected succesfully overwriting selected files.
= selected files: z.pdf
