diff --git a/package.json b/package.json index 2708cbf69..43b6e3521 100644 --- a/package.json +++ b/package.json @@ -51,7 +51,6 @@ "mime-types": "^2.1.35", "node-html-parser": "^6.1.5", "oidc-client": "^1.11.5", - "parse-link-header": "^2.0.0", "plotly.js": "^3.3.1", "prismjs": "^1.29.0", "prompts": "2.4.0", @@ -65,7 +64,6 @@ "react-container-query": "^0.13.0", "react-cookie": "^4.1.1", "react-dom": "^18.1.0", - "react-dropzone": "^12.0.4", "react-i18next": "^12.0.0", "react-modal": "^3.14.4", "react-redux": "^7.2.5", diff --git a/public/translations/en-US.json b/public/translations/en-US.json index 0f5a937ab..38e23bfab 100644 --- a/public/translations/en-US.json +++ b/public/translations/en-US.json @@ -297,19 +297,6 @@ "loading": "Loading", "failed": "Load failed" }, - "imageUploadButton": { - "uploadImage": "Upload image", - "uploadAnImage": "Upload an image", - "info": "Drag and drop images here, or click to select images from file", - "cancel": "Cancel", - "save": "Save", - "or": "or", - "errors": { - "error": "Error", - "imageNameNotUnique": "Image names must be unique.", - "invalidImageExtension": "Image names must end in {{extensions}}." - } - }, "newInputPanelButton": { "buttonText": "Add another panel" }, diff --git a/public/translations/en.json b/public/translations/en.json index e1fe50737..ce4781aee 100644 --- a/public/translations/en.json +++ b/public/translations/en.json @@ -298,19 +298,6 @@ "loading": "Loading", "failed": "Load failed" }, - "imageUploadButton": { - "uploadImage": "Upload image", - "uploadAnImage": "Upload an image", - "info": "Drag and drop images here, or click to select images from file", - "cancel": "Cancel", - "save": "Save", - "or": "or", - "errors": { - "error": "Error", - "imageNameNotUnique": "Image names must be unique.", - "invalidImageExtension": "Image names must end in {{extensions}}." - } - }, "newInputPanelButton": { "buttonText": "Add another panel" }, diff --git a/public/translations/es-LA.json b/public/translations/es-LA.json index 841566a1c..ff0c60fdf 100644 --- a/public/translations/es-LA.json +++ b/public/translations/es-LA.json @@ -297,19 +297,6 @@ "loading": "Cargando", "failed": "Error al cargar" }, - "imageUploadButton": { - "uploadImage": "Subir imagen", - "uploadAnImage": "Subir una imagen", - "info": "Arrastra y suelta imágenes aquí o haz clic para seleccionar imágenes de un archivo", - "cancel": "Cancelar", - "save": "Guardar", - "or": "o", - "errors": { - "error": "Error", - "imageNameNotUnique": "Los nombres de imagen deben ser únicos.", - "invalidImageExtension": "Los nombres de imagen deben terminar en {{extensions}}." - } - }, "newInputPanelButton": { "buttonText": "Agregar otro panel" }, diff --git a/public/translations/fr-FR.json b/public/translations/fr-FR.json index 5640c25cf..8ba6688ae 100644 --- a/public/translations/fr-FR.json +++ b/public/translations/fr-FR.json @@ -297,19 +297,6 @@ "loading": "Chargement en cours", "failed": "Échec du chargement" }, - "imageUploadButton": { - "uploadImage": "Téléverser une image", - "uploadAnImage": "Téléverser une image", - "info": "Faire glisser et déposer les images ici, ou cliquer pour sélectionner des images à partir du fichier", - "cancel": "Annuler", - "save": "Enregistrer", - "or": "ou", - "errors": { - "error": "Erreur", - "imageNameNotUnique": "Le nom des images doit être unique.", - "invalidImageExtension": "Le nom des images doit se terminer par {{extensions}}." - } - }, "newInputPanelButton": { "buttonText": "Ajouter une autre panneau" }, diff --git a/public/translations/xx-XX.json b/public/translations/xx-XX.json index a3013850a..ce1dbf426 100644 --- a/public/translations/xx-XX.json +++ b/public/translations/xx-XX.json @@ -296,18 +296,6 @@ "loading": "Wird geladen", "failed": "Laden fehlgeschlagen" }, - "imageUploadButton": { - "uploadImage": "Bild hochladen", - "uploadAnImage": "Laden Sie ein Bild hoch", - "info": "Ziehen Sie Bilder hierher, oder klicken Sie, um Bilder aus der Datei auszuwählen", - "cancel": "Stornieren", - "save": "Speichern", - "errors": { - "error": "Fehler", - "imageNameNotUnique": "Bildnamen müssen eindeutig sein.", - "invalidImageExtension": "Bildnamen müssen enden auf {{extensions}}." - } - }, "newInputPanelButton": { "buttonText": "Fügen Sie ein weiteres Panel hinzu" }, diff --git a/src/assets/stylesheets/ImageUploadButton.scss b/src/assets/stylesheets/ImageUploadButton.scss deleted file mode 100644 index 7d26850cf..000000000 --- a/src/assets/stylesheets/ImageUploadButton.scss +++ /dev/null @@ -1,16 +0,0 @@ -@use './rpf_design_system/font-weight' as *; - -.dropzone-area { - border: 1px dashed black; - border-radius: 10px; - padding: 20px; - text-align: center; -} - -.dropzone-info { - font-weight: $font-weight-bold; -} - -.modal-footer { - text-align: inline-end; -} diff --git a/src/components/Editor/ImageUploadButton/ImageUploadButton.jsx b/src/components/Editor/ImageUploadButton/ImageUploadButton.jsx deleted file mode 100644 index 49d571338..000000000 --- a/src/components/Editor/ImageUploadButton/ImageUploadButton.jsx +++ /dev/null @@ -1,165 +0,0 @@ -import "../../../assets/stylesheets/ImageUploadButton.scss"; - -import { useCallback, useState } from "react"; -import { useDispatch, useSelector } from "react-redux"; -import Dropzone from "react-dropzone"; -import Modal from "react-modal"; - -import { updateImages, setNameError } from "../../../redux/EditorSlice"; -import Button from "../../Button/Button"; -import NameErrorMessage from "../ErrorMessage/NameErrorMessage"; -import store from "../../../app/store"; -import ApiCallHandler from "../../../utils/apiCallHandler"; -import { useTranslation } from "react-i18next"; -import { allowedExtensionsString } from "../../../utils/allowedExtensionsString"; - -const allowedExtensions = { - python: ["jpg", "jpeg", "png", "gif"], -}; - -const ImageUploadButton = ({ reactAppApiEndpoint }) => { - const [modalIsOpen, setIsOpen] = useState(false); - const [files, setFiles] = useState([]); - const dispatch = useDispatch(); - const projectType = useSelector((state) => state.editor.project.project_type); - const projectIdentifier = useSelector( - (state) => state.editor.project.identifier, - ); - const projectImages = useSelector((state) => state.editor.project.image_list); - const imageNames = projectImages.map((image) => `${image.filename}`); - const user = useSelector((state) => state.auth.user); - const { t } = useTranslation(); - - const closeModal = () => { - setFiles([]); - setIsOpen(false); - }; - const showModal = () => { - dispatch(setNameError("")); - setIsOpen(true); - }; - const saveImages = async () => { - const { uploadImages } = ApiCallHandler({ - reactAppApiEndpoint, - }); - - files.every((file) => { - const fileName = file.name; - const extension = fileName.split(".").slice(1).join(".").toLowerCase(); - if ( - imageNames.includes(fileName) || - files.filter((file) => file.name === fileName).length > 1 - ) { - dispatch( - setNameError(t("imageUploadButton.errors.imageNameNotUnique")), - ); - return false; - } else if (isValidFileName(fileName, files)) { - return true; - } else if (!allowedExtensions[projectType].includes(extension)) { - dispatch( - setNameError( - t("errors.invalidImageExtension", { - extensions: allowedExtensionsString( - projectType, - t, - allowedExtensions, - ), - }), - ), - ); - return false; - } else { - dispatch(setNameError("imageUploadButton.error")); - return false; - } - }); - if (store.getState().editor.nameError === "") { - const response = await uploadImages( - projectIdentifier, - user.access_token, - files, - ); - dispatch(updateImages(response.data.image_list)); - closeModal(); - } - }; - - const isValidFileName = (fileName, files) => { - const extension = fileName.split(".").slice(1).join(".").toLowerCase(); - if ( - allowedExtensions[projectType].includes(extension) && - !imageNames.includes(fileName) && - files.filter((file) => file.name === fileName).length === 1 - ) { - return true; - } else { - return false; - } - }; - - const customStyles = { - content: { - top: "50%", - left: "50%", - right: "auto", - bottom: "auto", - marginRight: "-50%", - transform: "translate(-50%, -50%)", - }, - overlay: { - zIndex: 1000, - }, - }; - - return ( - <> -