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

Replace jquery.upload with web component #2623

Merged
merged 8 commits into from
Dec 15, 2023

Conversation

sascha-karnatz
Copy link
Contributor

@sascha-karnatz sascha-karnatz commented Nov 28, 2023

What is this pull request for?

  • create upload - components to handling attachment uploads
  • update upload concern to handling errors
  • remove old uploader and relative jquery plugins

Screenshots

Aufnahme 2023-12-15 at 18 00 11@2x

Checklist

  • I have followed Pull Request guidelines
  • I have added a detailed description into each commit message
  • I have added tests to cover this change

@sascha-karnatz sascha-karnatz requested a review from a team November 28, 2023 12:45
@sascha-karnatz sascha-karnatz changed the title Update javascript/file upload Add upload component Nov 28, 2023
@sascha-karnatz sascha-karnatz force-pushed the update_javascript/file-upload branch 3 times, most recently from 802eb42 to 43dbf45 Compare November 28, 2023 17:54
@sascha-karnatz sascha-karnatz force-pushed the update_javascript/file-upload branch 2 times, most recently from 4ee4520 to 1408ead Compare November 29, 2023 16:00
@sascha-karnatz sascha-karnatz force-pushed the update_javascript/file-upload branch 6 times, most recently from 94aa413 to 193f825 Compare December 7, 2023 20:34
@sascha-karnatz sascha-karnatz force-pushed the update_javascript/file-upload branch 4 times, most recently from 4624b29 to 57a19b8 Compare December 11, 2023 10:59
@sascha-karnatz sascha-karnatz force-pushed the update_javascript/file-upload branch from 3e52e55 to 478cdce Compare December 12, 2023 13:56
app/assets/stylesheets/alchemy/upload.scss Outdated Show resolved Hide resolved
app/assets/stylesheets/alchemy/upload.scss Outdated Show resolved Hide resolved
app/views/alchemy/admin/uploader/_button.html.erb Outdated Show resolved Hide resolved
app/views/alchemy/admin/uploader/_button.html.erb Outdated Show resolved Hide resolved
spec/javascript/helpers.js Outdated Show resolved Hide resolved
spec/javascript/helpers.js Outdated Show resolved Hide resolved
spec/javascript/helpers.js Outdated Show resolved Hide resolved
package.json Outdated Show resolved Hide resolved
@sascha-karnatz sascha-karnatz force-pushed the update_javascript/file-upload branch from a2d0c8c to cbc8517 Compare December 12, 2023 16:34
@sascha-karnatz sascha-karnatz force-pushed the update_javascript/file-upload branch 4 times, most recently from 5aba11c to 2503373 Compare December 13, 2023 09:08
@sascha-karnatz sascha-karnatz force-pushed the update_javascript/file-upload branch from 2503373 to eed7873 Compare December 13, 2023 14:44
@sascha-karnatz sascha-karnatz force-pushed the update_javascript/file-upload branch from eed7873 to 7dfe357 Compare December 13, 2023 15:36
@tvdeyen tvdeyen force-pushed the update_javascript/file-upload branch from 7dfe357 to c9207e3 Compare December 13, 2023 21:27
@sascha-karnatz sascha-karnatz force-pushed the update_javascript/file-upload branch 2 times, most recently from 85cbdf9 to f0088ab Compare December 14, 2023 15:40
Copy link
Member

@tvdeyen tvdeyen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fantastic work! 🍥 👏🏻

@tvdeyen tvdeyen added this to the 7.1 milestone Dec 14, 2023
@tvdeyen tvdeyen changed the title Add upload component Replace jquery.upload with web component Dec 14, 2023
@sascha-karnatz sascha-karnatz force-pushed the update_javascript/file-upload branch from b0ce037 to d46e4b4 Compare December 15, 2023 12:26
sascha-karnatz and others added 7 commits December 15, 2023 13:26
Add a small helper function for writing file sizes in an human readable format. This will be used in the new file upload component.
Add a combination of file upload components. The Uploader component is handling the file upload to the server. The Progress - component will show the overall upload progress including file sizes and the FileUpload will handling each file upload and is informing the Progress - component.

Also a Jest - helper is introduced, which is preparing the Alchemy config and provide global function to suppress console errors and mock XHR requests.
Add an error message handling to uploader response concern to response with error messages, that can be handled by the file upload - component.
Remove uploader coffeescript and the jquery plugins that handled the file upload before.
Replace the default progress - element with the shoelace progress-bar - component, to have a better control over the styling. The progress - element does not allow animations in Chrome anymore.

The server response can take some time. We need to show the user that there is still progress. The indeterminate - attribute is showing an animation, after the upload was finished.
The XHR token was not set in the HTTP header, which could lead to an unauthorized uploaded (and after that a rejection, because the CSRF - token is also in the submitted form). Now the server is rejecting before the upload, if the CSRF - token is not correct.
If the request is a accepts json we need to return
the error message as json.
@sascha-karnatz sascha-karnatz force-pushed the update_javascript/file-upload branch 3 times, most recently from e4ceee1 to 5671908 Compare December 15, 2023 16:45
Add an action button to cancel all uploads. It also add the possibility to close the progress component, after the upload, if the oncomplete - method did not set the visibility.

Also a minor round glitch was removed (the progress could show 101%).
@sascha-karnatz sascha-karnatz force-pushed the update_javascript/file-upload branch from 5671908 to 2064cd2 Compare December 15, 2023 16:50
@tvdeyen tvdeyen merged commit 7b1d834 into AlchemyCMS:main Dec 15, 2023
31 checks passed
@sascha-karnatz sascha-karnatz deleted the update_javascript/file-upload branch December 18, 2023 07:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants