From fa5c1a1cf30a90808bf1caa2b00a99819a8c8f79 Mon Sep 17 00:00:00 2001 From: Franco Montenegro Date: Tue, 16 Aug 2022 12:37:32 -0300 Subject: [PATCH] Refactor WebFile. --- flow-typed/file-with-path.js | 9 +++++++++ flow-typed/web-file.js | 6 ------ ui/component/common/file-list.jsx | 10 +++++----- ui/component/common/file-selector.jsx | 13 +++---------- ui/component/fileDrop/view.jsx | 6 +++--- ui/component/postEditor/view.jsx | 2 +- ui/component/publishFile/view.jsx | 18 +++++++++--------- ui/component/selectAsset/view.jsx | 10 ++++------ ui/component/selectThumbnail/view.jsx | 4 ++-- ui/component/settingSystem/view.jsx | 4 ++-- ui/modal/modalAutoGenerateThumbnail/view.jsx | 2 +- ui/modal/modalConfirmThumbnailUpload/index.js | 2 +- ui/modal/modalConfirmThumbnailUpload/view.jsx | 6 +++--- ui/modal/modalFileSelection/view.jsx | 6 +++--- ui/modal/modalPublishPreview/view.jsx | 4 ++-- 15 files changed, 48 insertions(+), 54 deletions(-) create mode 100644 flow-typed/file-with-path.js delete mode 100644 flow-typed/web-file.js diff --git a/flow-typed/file-with-path.js b/flow-typed/file-with-path.js new file mode 100644 index 000000000..48f727ca9 --- /dev/null +++ b/flow-typed/file-with-path.js @@ -0,0 +1,9 @@ +// @flow + +declare type FileWithPath = { + file: File, + // The full path will only be available in + // the application. For browser, the name + // of the file will be used. + path: string, +} diff --git a/flow-typed/web-file.js b/flow-typed/web-file.js deleted file mode 100644 index d1445a90f..000000000 --- a/flow-typed/web-file.js +++ /dev/null @@ -1,6 +0,0 @@ -// @flow - -declare type WebFile = File & { - path?: string, - title?: string, -} diff --git a/ui/component/common/file-list.jsx b/ui/component/common/file-list.jsx index 733eca3ad..c664c4762 100644 --- a/ui/component/common/file-list.jsx +++ b/ui/component/common/file-list.jsx @@ -3,8 +3,8 @@ import React from 'react'; import { useRadioState, Radio, RadioGroup } from 'reakit/Radio'; type Props = { - files: Array, - onChange: (WebFile | void) => void, + files: Array, + onChange: (File | void) => void, }; type RadioProps = { @@ -26,7 +26,7 @@ function FileList(props: Props) { const getFile = (value?: string) => { if (files && files.length) { - return files.find((file: WebFile) => file.name === value); + return files.find((file: File) => file.name === value); } }; @@ -46,12 +46,12 @@ function FileList(props: Props) { if (radio.state) { // Find selected element - const stop = radio.stops.find(item => item.id === radio.currentId); + const stop = radio.stops.find((item) => item.id === radio.currentId); const element = stop && stop.ref.current; // Only update state if new item is selected if (element && element.value !== radio.state) { const file = getFile(element.value); - // Sselect new file and update state + // Select new file and update state onChange(file); radio.setState(element.value); } diff --git a/ui/component/common/file-selector.jsx b/ui/component/common/file-selector.jsx index ef15ec57f..4c088ed9f 100644 --- a/ui/component/common/file-selector.jsx +++ b/ui/component/common/file-selector.jsx @@ -8,7 +8,7 @@ import { FormField } from 'component/common/form'; type Props = { type: string, currentPath?: ?string, - onFileChosen: (WebFile) => void, + onFileChosen: (FileWithPath) => void, label?: string, placeholder?: string, accept?: string, @@ -43,7 +43,7 @@ class FileSelector extends React.PureComponent { const file = files[0]; if (this.props.onFileChosen) { - this.props.onFileChosen(file); + this.props.onFileChosen({ file, path: file.path || file.name }); } this.fileInput.current.value = null; // clear the file input }; @@ -86,14 +86,7 @@ class FileSelector extends React.PureComponent { const file = new File([result.buffer], result.name, { type: result.mime, }); - // "path" is a read only property so we have to use this - // hack to overcome the limitation. - // $FlowFixMe - Object.defineProperty(file, 'path', { - value: result.path, - writable: false, - }); - this.props.onFileChosen(file); + this.props.onFileChosen({ file, path: result.path }); }); }; diff --git a/ui/component/fileDrop/view.jsx b/ui/component/fileDrop/view.jsx index cb42b6a59..be224e0a3 100644 --- a/ui/component/fileDrop/view.jsx +++ b/ui/component/fileDrop/view.jsx @@ -11,10 +11,10 @@ import Icon from 'component/common/icon'; type Props = { modal: { id: string, modalProps: {} }, - filePath: string | WebFile, + filePath: string | File, clearPublish: () => void, updatePublishForm: ({}) => void, - openModal: (id: string, { files: Array }) => void, + openModal: (id: string, { files: Array }) => void, // React router history: { entities: {}[], @@ -37,7 +37,7 @@ function FileDrop(props: Props) { const { drag, dropData } = useDragDrop(); const [files, setFiles] = React.useState([]); const [error, setError] = React.useState(false); - const [target, setTarget] = React.useState(null); + const [target, setTarget] = React.useState(null); const hideTimer = React.useRef(null); const targetTimer = React.useRef(null); const navigationTimer = React.useRef(null); diff --git a/ui/component/postEditor/view.jsx b/ui/component/postEditor/view.jsx index 0cada8349..b63d09331 100644 --- a/ui/component/postEditor/view.jsx +++ b/ui/component/postEditor/view.jsx @@ -6,7 +6,7 @@ type Props = { uri: ?string, label: ?string, disabled: ?boolean, - filePath: string | WebFile, + filePath: string | File, fileText: ?string, fileMimeType: ?string, streamingUrl: ?string, diff --git a/ui/component/publishFile/view.jsx b/ui/component/publishFile/view.jsx index 7c9c2c15f..b628d7208 100644 --- a/ui/component/publishFile/view.jsx +++ b/ui/component/publishFile/view.jsx @@ -19,7 +19,7 @@ type Props = { mode: ?string, name: ?string, title: ?string, - filePath: string | WebFile, + filePath: string | File, fileMimeType: ?string, isStillEditing: boolean, balance: number, @@ -97,8 +97,8 @@ function PublishFile(props: Props) { updateFileInfo(0, 0, false); } else if (typeof filePath !== 'string') { // Update currentFile file - if (filePath.name !== currentFile && filePath.path !== currentFile) { - handleFileChange(filePath); + if (filePath.name !== currentFile) { + handleFileChange({ file: filePath, path: filePath.name }); } } }, [filePath, currentFile, handleFileChange, updateFileInfo]); @@ -209,11 +209,11 @@ function PublishFile(props: Props) { } } - function handleFileChange(file: WebFile, clearName = true) { + function handleFileChange(fileWithPath: FileWithPath, clearName = true) { window.URL = window.URL || window.webkitURL; // select file, start to select a new one, then cancel - if (!file) { + if (!fileWithPath) { if (isStillEditing || !clearName) { updatePublishForm({ filePath: '' }); } else { @@ -223,6 +223,7 @@ function PublishFile(props: Props) { } // if video, extract duration so we can warn about bitrateif (typeof file !== 'string') { + const file = fileWithPath.file; const contentType = file.type && file.type.split('/'); const isVideo = contentType && contentType[0] === 'video'; const isMp4 = contentType && contentType[1] === 'mp4'; @@ -270,10 +271,10 @@ function PublishFile(props: Props) { setPublishMode(PUBLISH_MODES.FILE); } - const publishFormParams: { filePath: string | WebFile, name?: string, optimize?: boolean } = { + const publishFormParams: { filePath: string | File, name?: string, optimize?: boolean } = { // if electron, we'll set filePath to the path string because SDK is handling publishing. // File.path will be undefined from web due to browser security, so it will default to the File Object. - filePath: file.path || file, + filePath: fileWithPath.path || file, }; // Strip off extention and replace invalid characters let fileName = name || (file.name && file.name.substring(0, file.name.lastIndexOf('.'))) || ''; @@ -282,8 +283,7 @@ function PublishFile(props: Props) { publishFormParams.name = parseName(fileName); } - // File path is not supported on web for security reasons so we use the name instead. - setCurrentFile(file.path || file.name); + setCurrentFile(fileWithPath.path); updatePublishForm(publishFormParams); } diff --git a/ui/component/selectAsset/view.jsx b/ui/component/selectAsset/view.jsx index 05b9d92bb..72ceb9299 100644 --- a/ui/component/selectAsset/view.jsx +++ b/ui/component/selectAsset/view.jsx @@ -137,12 +137,10 @@ function SelectAsset(props: Props) { label={fileSelectorLabel} name="assetSelector" currentPath={pathSelected} - onFileChosen={(file) => { - if (file.name) { - setFileSelected(file); - // what why? why not target=WEB this? - // file.path is undefined in web but available in electron - setPathSelected(file.name || file.path); + onFileChosen={(fileWithPath) => { + if (fileWithPath.file.name) { + setFileSelected(fileWithPath.file); + setPathSelected(fileWithPath.path); } }} accept={accept} diff --git a/ui/component/selectThumbnail/view.jsx b/ui/component/selectThumbnail/view.jsx index 8998272ae..06b685269 100644 --- a/ui/component/selectThumbnail/view.jsx +++ b/ui/component/selectThumbnail/view.jsx @@ -160,9 +160,9 @@ function SelectThumbnail(props: Props) { label={__('Thumbnail')} placeholder={__('Choose an enticing thumbnail')} accept={accept} - onFileChosen={(file) => + onFileChosen={(fileWithPath) => openModal(MODALS.CONFIRM_THUMBNAIL_UPLOAD, { - file, + file: fileWithPath, cb: (url) => updateThumbnailParams && updateThumbnailParams({ thumbnail_url: url }), }) } diff --git a/ui/component/settingSystem/view.jsx b/ui/component/settingSystem/view.jsx index af40546f8..545fe1b50 100644 --- a/ui/component/settingSystem/view.jsx +++ b/ui/component/settingSystem/view.jsx @@ -130,7 +130,7 @@ export default function SettingSystem(props: Props) { { + onFileChosen={(newDirectory: FileWithPath) => { setDaemonSetting('download_dir', newDirectory.path); }} /> @@ -224,7 +224,7 @@ export default function SettingSystem(props: Props) { type="openDirectory" placeholder={__('A Folder containing FFmpeg')} currentPath={ffmpegPath || daemonSettings.ffmpeg_path} - onFileChosen={(newDirectory: WebFile) => { + onFileChosen={(newDirectory: FileWithPath) => { // $FlowFixMe setDaemonSetting('ffmpeg_path', newDirectory.path); findFFmpeg(); diff --git a/ui/modal/modalAutoGenerateThumbnail/view.jsx b/ui/modal/modalAutoGenerateThumbnail/view.jsx index 6eb6ec17d..868a1841b 100644 --- a/ui/modal/modalAutoGenerateThumbnail/view.jsx +++ b/ui/modal/modalAutoGenerateThumbnail/view.jsx @@ -4,7 +4,7 @@ import { Modal } from 'modal/modal'; import { formatFileSystemPath } from 'util/url'; type Props = { - upload: WebFile => void, + upload: (File) => void, filePath: string, closeModal: () => void, showToast: ({}) => void, diff --git a/ui/modal/modalConfirmThumbnailUpload/index.js b/ui/modal/modalConfirmThumbnailUpload/index.js index 3b8256881..5f4fb9e87 100644 --- a/ui/modal/modalConfirmThumbnailUpload/index.js +++ b/ui/modal/modalConfirmThumbnailUpload/index.js @@ -5,7 +5,7 @@ import ModalConfirmThumbnailUpload from './view'; const perform = (dispatch) => ({ closeModal: () => dispatch(doHideModal()), - upload: (file, cb) => dispatch(doUploadThumbnail(null, file, null, null, file.path, cb)), + upload: (fileWithPath, cb) => dispatch(doUploadThumbnail(null, fileWithPath.file, null, null, fileWithPath.path, cb)), updatePublishForm: (value) => dispatch(doUpdatePublishForm(value)), }); diff --git a/ui/modal/modalConfirmThumbnailUpload/view.jsx b/ui/modal/modalConfirmThumbnailUpload/view.jsx index efd5be9b1..f05037a44 100644 --- a/ui/modal/modalConfirmThumbnailUpload/view.jsx +++ b/ui/modal/modalConfirmThumbnailUpload/view.jsx @@ -4,8 +4,8 @@ import { Modal } from 'modal/modal'; import { DOMAIN } from 'config'; type Props = { - file: WebFile, - upload: (WebFile, (string) => void) => void, + file: FileWithPath, + upload: (FileWithPath, (string) => void) => void, cb: (string) => void, closeModal: () => void, updatePublishForm: ({}) => void, @@ -23,7 +23,7 @@ class ModalConfirmThumbnailUpload extends React.PureComponent { render() { const { closeModal, file } = this.props; - const filePath = file && (file.path || file.name); + const filePath = file && file.path; return ( , + files: Array, hideModal: () => void, updatePublishForm: ({}) => void, history: { location: { pathname: string }, - push: string => void, + push: (string) => void, }, }; @@ -43,7 +43,7 @@ const ModalFileSelection = (props: Props) => { navigateToPublish(); } - const handleFileChange = (file?: WebFile) => { + const handleFileChange = (file?: File) => { // $FlowFixMe setSelectedFile(file); }; diff --git a/ui/modal/modalPublishPreview/view.jsx b/ui/modal/modalPublishPreview/view.jsx index e95adddc1..15f31562a 100644 --- a/ui/modal/modalPublishPreview/view.jsx +++ b/ui/modal/modalPublishPreview/view.jsx @@ -15,7 +15,7 @@ import Icon from 'component/common/icon'; import { NO_FILE } from 'redux/actions/publish'; type Props = { - filePath: string | WebFile, + filePath: string | File, isMarkdownPost: boolean, optimize: boolean, title: ?string, @@ -104,7 +104,7 @@ const ModalPublishPreview = (props: Props) => { // @endif } - function getFilePathName(filePath: string | WebFile) { + function getFilePathName(filePath: string | File) { if (!filePath) { return NO_FILE; }