diff --git a/README.md b/README.md index 2f5770a..b4ebaee 100644 --- a/README.md +++ b/README.md @@ -82,11 +82,12 @@ The default port is `3000`, once you have accessed it you can see a login screen # ShareX (Windows) This section requires [ShareX](https://www.getsharex.com/). -After navigating to Zipline, click on the top right corner where it says your username and click Manage Account. Scroll down to see "ShareX Config", select the one you would prefer using. After this you can import the .sxcu into sharex. [More information here](https://zipl.vercel.app/docs/uploaders/sharex) +After navigating to Zipline, click on the top right corner where it says your username and click Manage Account. Scroll down to see "ShareX Config", select the one you would prefer using. After this you can import the .sxcu into sharex. [More information here](https://zipl.vercel.app/docs/guides/uploaders/sharex) # Flameshot (Linux) This section requires [Flameshot](https://www.flameshot.org/), [jq](https://stedolan.github.io/jq/), and [xsel](https://github.com/kfish/xsel). +You can either use the script below, or generate one directly from Zipline (just like how you can generate a ShareX config). To upload files using flameshot we will use a script. Replace $TOKEN and $HOST with your own values, you probably know how to do this if you use linux. ```shell diff --git a/next.config.js b/next.config.js index 5de8dd2..de7d8ce 100644 --- a/next.config.js +++ b/next.config.js @@ -23,6 +23,8 @@ module.exports = { domains: [ // For sharex icon in manage user 'getsharex.com', + // For flameshot icon, and maybe in the future other stuff from github + 'raw.githubusercontent.com', ], }, poweredByHeader: false, diff --git a/src/components/icons/FlameshotIcon.tsx b/src/components/icons/FlameshotIcon.tsx new file mode 100644 index 0000000..f31774c --- /dev/null +++ b/src/components/icons/FlameshotIcon.tsx @@ -0,0 +1,7 @@ +// https://github.com/flameshot-org/flameshot/blob/master/data/img/app/flameshot.svg + +import Image from 'next/image'; + +export default function FlameshotIcon({ ...props }) { + return ; +} \ No newline at end of file diff --git a/src/components/icons/ShareXIcon.tsx b/src/components/icons/ShareXIcon.tsx index 34782fd..6edefed 100644 --- a/src/components/icons/ShareXIcon.tsx +++ b/src/components/icons/ShareXIcon.tsx @@ -3,5 +3,5 @@ import Image from 'next/image'; export default function ShareXIcon({ ...props }) { - return ; + return ; } \ No newline at end of file diff --git a/src/components/icons/index.tsx b/src/components/icons/index.tsx index 6ecc74a..095cb34 100644 --- a/src/components/icons/index.tsx +++ b/src/components/icons/index.tsx @@ -25,6 +25,8 @@ import TagIcon from './TagIcon'; import ClockIcon from './ClockIcon'; import ExternalLinkIcon from './ExternalLinkIcon'; import ShareXIcon from './ShareXIcon'; +import DownloadIcon from './DownloadIcon'; +import FlameshotIcon from './FlameshotIcon'; export { ActivityIcon, @@ -54,4 +56,6 @@ export { ClockIcon, ExternalLinkIcon, ShareXIcon, + DownloadIcon, + FlameshotIcon, }; \ No newline at end of file diff --git a/src/components/pages/Manage/Flameshot.tsx b/src/components/pages/Manage/Flameshot.tsx new file mode 100644 index 0000000..49e8377 --- /dev/null +++ b/src/components/pages/Manage/Flameshot.tsx @@ -0,0 +1,72 @@ +import { Button, Checkbox, Group, Modal, NumberInput, Select, Title } from '@mantine/core'; +import { useForm } from '@mantine/form'; +import { DownloadIcon } from 'components/icons'; +import { useState } from 'react'; +import { GeneratorModal } from './GeneratorModal'; + +export default function Flameshot({ user, open, setOpen }) { + const onSubmit = values => { + const curl = [ + 'curl', + '-H', + '"Content-Type: multipart/form-data"', + '-H', + `"authorization: ${user?.token}"`, + '-F', + 'file=@/tmp/ss.png', + `${window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : '')}/api/upload`, + ]; + + const extraHeaders = {}; + + if (values.format !== 'RANDOM') { + extraHeaders['Format'] = values.format; + } else { + delete extraHeaders['Format']; + } + + if (values.imageCompression !== 0) { + extraHeaders['Image-Compression-Percent'] = values.imageCompression; + } else { + delete extraHeaders['Image-Compression-Percent']; + } + + if (values.zeroWidthSpace) { + extraHeaders['Zws'] = 'true'; + } else { + delete extraHeaders['Zws']; + } + + if (values.embed) { + extraHeaders['Embed'] = 'true'; + } else { + delete extraHeaders['Embed']; + } + + for (const [key, value] of Object.entries(extraHeaders)) { + curl.push('-H'); + curl.push(`"${key}: ${value}"`); + } + + const shell = `#!/bin/bash +flameshot gui -r > /tmp/ss.png; +${curl.join(' ')} | jq -r '.files[0]' | tr -d '\n' | xsel -ib; +`; + + const pseudoElement = document.createElement('a'); + pseudoElement.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(shell)); + pseudoElement.setAttribute('download', 'zipline.sh'); + pseudoElement.style.display = 'none'; + document.body.appendChild(pseudoElement); + pseudoElement.click(); + pseudoElement.parentNode.removeChild(pseudoElement); + }; + + return setOpen(false)} + title='Flameshot' + desc='To use this script, you need Flameshot, curl, jq, and xsel installed. This script is intended for use on Linux only.' + onSubmit={onSubmit} + />; +} \ No newline at end of file diff --git a/src/components/pages/Manage/GeneratorModal.tsx b/src/components/pages/Manage/GeneratorModal.tsx new file mode 100644 index 0000000..ad45cc3 --- /dev/null +++ b/src/components/pages/Manage/GeneratorModal.tsx @@ -0,0 +1,77 @@ +import { Modal, Select, NumberInput, Group, Checkbox, Button, Title, Text } from '@mantine/core'; +import { useForm } from '@mantine/form'; +import { DownloadIcon } from 'components/icons'; + +export function GeneratorModal({ opened, onClose, title, onSubmit, ...other }) { + const form = useForm({ + initialValues: { + format: 'RANDOM', + imageCompression: 0, + zeroWidthSpace: false, + embed: false, + }, + }); + + return ( + {title}} + size='lg' + > + {other.desc && {other.desc}} +
onSubmit(values))}> + - - - - - - - - - - - - - - -
- ); + return setOpen(false)} + title='ShareX' + onSubmit={onSubmit} + />; } \ No newline at end of file diff --git a/src/components/pages/Manage/index.tsx b/src/components/pages/Manage/index.tsx index c88da12..aeba0fe 100644 --- a/src/components/pages/Manage/index.tsx +++ b/src/components/pages/Manage/index.tsx @@ -3,7 +3,7 @@ import { useForm } from '@mantine/form'; import { randomId, useInterval } from '@mantine/hooks'; import { useModals } from '@mantine/modals'; import { showNotification, updateNotification } from '@mantine/notifications'; -import { CrossIcon, DeleteIcon, SettingsIcon, ShareXIcon } from 'components/icons'; +import { CrossIcon, DeleteIcon, FlameshotIcon, SettingsIcon, ShareXIcon } from 'components/icons'; import DownloadIcon from 'components/icons/DownloadIcon'; import Link from 'components/Link'; import MutedText from 'components/MutedText'; @@ -13,6 +13,7 @@ import { bytesToRead } from 'lib/clientUtils'; import { updateUser } from 'lib/redux/reducers/user'; import { useStoreDispatch, useStoreSelector } from 'lib/redux/store'; import { useEffect, useState } from 'react'; +import Flameshot from './Flameshot'; import ShareX from './ShareX'; function ExportDataTooltip({ children }) { @@ -24,7 +25,8 @@ export default function Manage() { const dispatch = useStoreDispatch(); const modals = useModals(); - const [open, setOpen] = useState(false); + const [shareXOpen, setShareXOpen] = useState(false); + const [flameshotOpen, setFlameshotOpen] = useState(false); const [exports, setExports] = useState([]); const [file, setFile] = useState(null); const [fileDataURL, setFileDataURL] = useState(user.avatar ?? null); @@ -297,12 +299,14 @@ export default function Manage() { )} - ShareX Config + Uploaders - + + - + + ); } \ No newline at end of file