yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-25 16:29:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

from url flow added

Browse Source
This commit is contained in:
ronronscelestes 2022-04-11 17:04:10 +02:00
parent b2c328c29f
commit 1d65b43276
4 changed files with 110 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/AddLogoDialog.js
View File

@ -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}
/>
</TabPanel>
<TabPanel>TO DO</TabPanel>
<TabPanel>
<FromUrlForm onClose={onClose} setLocalImage={setLocalImage} goTo={goTo} next={next} />
</TabPanel>
</TabPanels>
</TabGroup>
);

84
packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/FromUrlForm.js Normal file
View File

@ -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 (
<>
<form onSubmit={handleSubmit}>
<Box paddingLeft={8} paddingRight={8} paddingTop={6} paddingBottom={6}>
<TextInput
label={formatMessage({
id: 'Settings.application.customization.modal.upload.from-url.input-label',
defaultMessage: 'URL',
})}
error={error}
onChange={handleChange}
value={logoUrl}
name="logo-url"
/>
</Box>
<ModalFooter
startActions={
<Button onClick={onClose} variant="tertiary">
{formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'Cancel' })}
</Button>
}
endActions={
<Button type="submit">
{formatMessage({
id: 'Settings.application.customization.modal.upload.next',
defaultMessage: 'Next',
})}
</Button>
}
/>
</form>
</>
);
};
FromUrlForm.defaultProps = {
next: null,
};
FromUrlForm.propTypes = {
goTo: PropTypes.func.isRequired,
next: PropTypes.string,
onClose: PropTypes.func.isRequired,
setLocalImage: PropTypes.func.isRequired,
};
export default FromUrlForm;

19
packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/utils/urlToFile.js Normal file
View File

@ -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;
}
};

3
packages/core/admin/admin/src/translations/en.json
View File

@ -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",