diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/AddLogoDialog.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/AddLogoDialog.js
index fea4a4fd83..1efed06d68 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/AddLogoDialog.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/AddLogoDialog.js
@@ -5,6 +5,7 @@ import { Tabs, Tab, TabGroup, TabPanels, TabPanel } from '@strapi/design-system/
import { Box } from '@strapi/design-system/Box';
import { Divider } from '@strapi/design-system/Divider';
import FromComputerForm from './FromComputerForm';
+import FromUrlForm from './FromUrlForm';
const AddLogoDialog = ({ setLocalImage, goTo, next, onClose }) => {
const { formatMessage } = useIntl();
@@ -44,7 +45,9 @@ const AddLogoDialog = ({ setLocalImage, goTo, next, onClose }) => {
next={next}
/>
- TO DO
+
+
+
);
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/FromUrlForm.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/FromUrlForm.js
new file mode 100644
index 0000000000..809630fd50
--- /dev/null
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/FromUrlForm.js
@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Box } from '@strapi/design-system/Box';
+import { Button } from '@strapi/design-system/Button';
+import { TextInput } from '@strapi/design-system/TextInput';
+import { ModalFooter } from '@strapi/design-system/ModalLayout';
+import { urlToFile } from '../../utils/urlToFile';
+import { parseFileMetadatas } from '../../utils/parseFileMetadatas';
+import { SIZE, DIMENSION } from '../../utils/constants';
+
+const FromUrlForm = ({ goTo, next, onClose, setLocalImage }) => {
+ const { formatMessage } = useIntl();
+ const [logoUrl, setLogoUrl] = useState('');
+ const [error, setError] = useState(undefined);
+
+ const handleChange = e => {
+ setLogoUrl(e.target.value);
+ };
+
+ const handleSubmit = async e => {
+ e.preventDefault();
+ try {
+ const file = await urlToFile(logoUrl);
+ const asset = await parseFileMetadatas(file);
+
+ setLocalImage(asset);
+ goTo(next);
+ } catch (err) {
+ if (err.displayMessage) {
+ setError(formatMessage(err.displayMessage, { size: SIZE, dimension: DIMENSION }));
+ } else {
+ throw err;
+ }
+ }
+ };
+
+ return (
+ <>
+
+ >
+ );
+};
+
+FromUrlForm.defaultProps = {
+ next: null,
+};
+
+FromUrlForm.propTypes = {
+ goTo: PropTypes.func.isRequired,
+ next: PropTypes.string,
+ onClose: PropTypes.func.isRequired,
+ setLocalImage: PropTypes.func.isRequired,
+};
+
+export default FromUrlForm;
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/utils/urlToFile.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/utils/urlToFile.js
new file mode 100644
index 0000000000..21df1e7851
--- /dev/null
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/utils/urlToFile.js
@@ -0,0 +1,19 @@
+import axios from 'axios';
+
+export const urlToFile = async url => {
+ try {
+ const res = await axios.get(url, { responseType: 'blob', timeout: 60000 });
+ const loadedFile = new File([res.data], res.config.url, {
+ type: res.headers['content-type'],
+ });
+
+ return loadedFile;
+ } catch (err) {
+ err.displayMessage = {
+ id: 'Settings.application.customization.modal.upload.error-network',
+ defaultMessage: 'Network error',
+ };
+
+ throw err;
+ }
+};
diff --git a/packages/core/admin/admin/src/translations/en.json b/packages/core/admin/admin/src/translations/en.json
index 74986fe0bf..3a097f0b27 100644
--- a/packages/core/admin/admin/src/translations/en.json
+++ b/packages/core/admin/admin/src/translations/en.json
@@ -111,9 +111,12 @@
"Settings.application.customization.modal.upload.file-validation": "Max dimension: {dimension}*{dimension}, Max size: {size}KB",
"Settings.application.customization.modal.upload.error-format": "Wrong format uploaded (accepted formats only: jpeg, jpg, png, svg).",
"Settings.application.customization.modal.upload.error-size": "The file uploaded is too large (max dimension: {dimension}*{dimension}, max file size: {size}KB)",
+ "Settings.application.customization.modal.upload.error-network": "Network error",
"Settings.application.customization.modal.upload.cta.browse": "Browse files",
"Settings.application.customization.modal.upload.drag-drop": "Drag and Drop here or",
"Settings.application.customization.modal.upload.from-url": "From url",
+ "Settings.application.customization.modal.upload.from-url.input-label": "URL",
+ "Settings.application.customization.modal.upload.next": "Next",
"Settings.application.customization.modal.pending": "Pending logo",
"Settings.application.customization.modal.pending.choose-another": "Choose another logo",
"Settings.application.customization.modal.pending.title": "Logo ready to upload",