Refactor WebFile.

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,
+}

flow-typed/web-file.js

@@ -1,6 +0,0 @@
-// @flow
-
-declare type WebFile = File & {
-  path?: string,
-  title?: string,
-}

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<WebFile>,
+  files: Array<File>,
-  onChange: (WebFile | void) => void,
+  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);
           }

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<Props> {
     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<Props> {
         const file = new File([result.buffer], result.name, {
           type: result.mime,
         });
-        // "path" is a read only property so we have to use this
+        this.props.onFileChosen({ file, path: result.path });
-        // hack to overcome the limitation.
-        // $FlowFixMe
-        Object.defineProperty(file, 'path', {
-          value: result.path,
-          writable: false,
-        });
-        this.props.onFileChosen(file);
       });
   };
 

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<WebFile> }) => void,
+  openModal: (id: string, { files: Array<File> }) => 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<?WebFile>(null);
+  const [target, setTarget] = React.useState<?File>(null);
   const hideTimer = React.useRef(null);
   const targetTimer = React.useRef(null);
   const navigationTimer = React.useRef(null);

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,

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) {
+      if (filePath.name !== currentFile) {
-        handleFileChange(filePath);
+        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(fileWithPath.path);
-    setCurrentFile(file.path || file.name);
     updatePublishForm(publishFormParams);
   }
 

ui/component/selectAsset/view.jsx

@@ -137,12 +137,10 @@ function SelectAsset(props: Props) {
             label={fileSelectorLabel}
             name="assetSelector"
             currentPath={pathSelected}
-            onFileChosen={(file) => {
+            onFileChosen={(fileWithPath) => {
-              if (file.name) {
+              if (fileWithPath.file.name) {
-                setFileSelected(file);
+                setFileSelected(fileWithPath.file);
-                // what why? why not target=WEB this?
+                setPathSelected(fileWithPath.path);
-                // file.path is undefined in web but available in electron
-                setPathSelected(file.name || file.path);
               }
             }}
             accept={accept}

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 }),
                       })
                     }

ui/component/settingSystem/view.jsx

@@ -130,7 +130,7 @@ export default function SettingSystem(props: Props) {
               <FileSelector
                 type="openDirectory"
                 currentPath={daemonSettings.download_dir}
-                onFileChosen={(newDirectory: WebFile) => {
+                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();

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,

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)),
 });
 

ui/modal/modalConfirmThumbnailUpload/view.jsx

@@ -4,8 +4,8 @@ import { Modal } from 'modal/modal';
 import { DOMAIN } from 'config';
 
 type Props = {
-  file: WebFile,
+  file: FileWithPath,
-  upload: (WebFile, (string) => void) => void,
+  upload: (FileWithPath, (string) => void) => void,
   cb: (string) => void,
   closeModal: () => void,
   updatePublishForm: ({}) => void,
@@ -23,7 +23,7 @@ class ModalConfirmThumbnailUpload extends React.PureComponent<Props> {
 
   render() {
     const { closeModal, file } = this.props;
-    const filePath = file && (file.path || file.name);
+    const filePath = file && file.path;
 
     return (
       <Modal

ui/modal/modalFileSelection/view.jsx

@@ -9,12 +9,12 @@ import Button from 'component/button';
 import FileList from 'component/common/file-list';
 
 type Props = {
-  files: Array<WebFile>,
+  files: Array<File>,
   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);
   };

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