-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feat(web-twig): FileUploader - Support for crop image #DS-954
- Loading branch information
1 parent
c4f4780
commit 6f88c8e
Showing
4 changed files
with
161 additions
and
0 deletions.
There are no files selected for viewing
108 changes: 108 additions & 0 deletions
108
apps/web-twig-demo/assets/scripts/file-uploader-meta-data.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,108 @@ | ||
// eslint-disable-next-line import/no-extraneous-dependencies, import/no-unresolved, import/extensions, no-unused-vars | ||
import { FileUploader, Modal } from '@lmc-eu/spirit-web/src/js/index.esm'; | ||
|
||
window.addEventListener('DOMContentLoaded', () => { | ||
let file; | ||
const ModalElement = document.getElementById('example_modal_data'); | ||
const ModalInstance = new Modal(ModalElement); | ||
const Content = ModalElement.querySelector('[data-example-content]'); | ||
const CancelButton = ModalElement.querySelector('[data-element="cancel"]'); | ||
const FileUploaderElement = document.getElementById('example_customMetaData'); | ||
const FileUploaderInstance = FileUploader.getInstance(FileUploaderElement); | ||
let toggleMetaData = false; // allow toggling meta data between two different values when clicking on edit button | ||
|
||
const isFileImage = (file) => file.type.split('/')[0] === 'image'; | ||
|
||
// callbacks | ||
|
||
const updateQueueCallback = (key, file, meta) => { | ||
const attachmentElement = document.querySelector('.FileUploaderList'); | ||
const fileName = FileUploaderInstance.getUpdatedFileName(file.name); | ||
const metaInput = attachmentElement?.querySelector(`input[name="attachments_${fileName}_meta"]`); | ||
|
||
// if we have meta data update input if exist OR create new one if not exist | ||
if (meta) { | ||
if (metaInput) { | ||
metaInput.value = JSON.stringify(meta); | ||
} else { | ||
const attachmentMetaInputElement = document.createElement('input'); | ||
attachmentMetaInputElement.setAttribute('type', 'hidden'); | ||
attachmentMetaInputElement.setAttribute('name', `attachments_${fileName}_meta`); | ||
attachmentMetaInputElement.setAttribute('value', JSON.stringify(meta)); | ||
attachmentElement?.appendChild(attachmentMetaInputElement); | ||
} | ||
} | ||
|
||
// remove input if exist AND we have no meta data | ||
if (!meta) { | ||
metaInput && metaInput.remove(); | ||
} | ||
}; | ||
|
||
const callbackOnDismiss = (key) => { | ||
document.querySelector(`input[name="attachments_${key}_meta"]`)?.remove(); | ||
}; | ||
|
||
// custom functions | ||
|
||
const customAddToQueue = (file, meta) => { | ||
if (isFileImage(file)) { | ||
const reader = new FileReader(); | ||
|
||
reader.readAsDataURL(file); | ||
reader.onloadend = () => { | ||
const base64data = reader.result; | ||
localStorage.setItem('image', base64data); | ||
Content.innerHTML = `<img src="${base64data}" style="width: 100%; height: auto" alt="${file.name}" />`; | ||
ModalInstance.show(); | ||
}; | ||
} | ||
|
||
FileUploaderInstance.updateQueue( | ||
FileUploaderInstance.getUpdatedFileName(file.name), | ||
file, | ||
meta, | ||
updateQueueCallback, | ||
); | ||
}; | ||
|
||
const customEdit = (event) => { | ||
const key = event.target.closest('li').id; | ||
const newMeta = toggleMetaData | ||
? { x: 30, y: 30, width: 150, height: 150 } | ||
: { x: 22, y: 0, width: 110, height: 100 }; | ||
toggleMetaData = !toggleMetaData; | ||
const file = FileUploaderInstance.getFileFromQueue(key).file; | ||
FileUploaderInstance.updateQueue(key, file, newMeta, updateQueueCallback); | ||
}; | ||
moduleFunctions.customEdit = customEdit; | ||
|
||
// modal functions | ||
|
||
const removeFromQueue = () => { | ||
FileUploaderInstance.removeFromQueue(FileUploaderInstance.getUpdatedFileName(file.name)); | ||
cleanup(); | ||
}; | ||
|
||
const cleanup = () => { | ||
ModalInstance.hide(); | ||
Content.innerHTML = ''; | ||
file = undefined; | ||
}; | ||
|
||
CancelButton.addEventListener('click', removeFromQueue); | ||
|
||
FileUploaderElement.addEventListener('queuedFile.fileUploader', (event) => { | ||
file = event.currentFile; | ||
|
||
customAddToQueue(file); | ||
}); | ||
|
||
FileUploaderElement.addEventListener('unqueuedFile.fileUploader', (event) => { | ||
callbackOnDismiss(event.currentFile); | ||
}); | ||
|
||
FileUploaderElement.addEventListener('editFile.fileUploader', (event) => { | ||
customEdit(event.currentFile); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
48 changes: 48 additions & 0 deletions
48
packages/web-twig/src/Resources/components/FileUploader/stories/FileUploaderMetaData.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
<Modal id="example_modal_data" titleId="example_modal_data_title"> | ||
<ModalDialog> | ||
<ModalHeader modalId="example_modal_data" titleId="example_modal_data_title"> | ||
Image Preview | ||
</ModalHeader> | ||
<ModalBody> | ||
<div class="pt-400 pt-tablet-600" data-example-content></div> | ||
</ModalBody> | ||
<ModalFooter> | ||
<Button | ||
color="primary" | ||
data-spirit-target="#example_modal_data" | ||
data-spirit-dismiss="modal" | ||
> | ||
Confirm | ||
</Button> | ||
<Button | ||
color="secondary" | ||
data-spirit-target="#example_modal_data" | ||
data-element="cancel" | ||
> | ||
Cancel | ||
</Button> | ||
</ModalFooter> | ||
</ModalDialog> | ||
</Modal> | ||
|
||
<FileUploader data-spirit-toggle="fileUploader" id="example_customMetaData"> | ||
<template data-spirit-snippet="item"> | ||
<FileUploaderAttachment onEdit="moduleFunctions.customEdit(event)" generateImagePreview /> | ||
</template> | ||
<FileUploaderInput | ||
helperText="Max size of each file is 10 MB" | ||
id="fileUploaderWithMetaData" | ||
label="Label" | ||
multiple | ||
name="fileUploaderWithMetaData" | ||
maxUploadedFiles={1} | ||
queueLimitBehavior="disable" | ||
/> | ||
<FileUploaderList headingId="attachments-fileUploaderMetaData" /> | ||
</FileUploader> | ||
|
||
<script> | ||
const moduleFunctions = {} | ||
</script> | ||
|
||
{{ encore_entry_script_tags('fileUploaderMetaData') }} |