Allow only images in modal image uploader. (#7672)

* Allow only images in modal image uploader.

* Set file path and mime in file selector.

* Refactor WebFile.

* Update get-file-from-path to work with folders; fix file-list component.

* Get rid of File | string for filePath property in components.

* Show instant preview while updating channel thumbnail.

* Fix publish.

* Add jpeg and svg to image filter.

electron/index.js

@@ -20,6 +20,7 @@ import path from 'path';
 import { diskSpaceLinux, diskSpaceWindows, diskSpaceMac } from '../ui/util/diskspace';
 
 const { download } = require('electron-dl');
+const mime = require('mime');
 const remote = require('@electron/remote/main');
 const os = require('os');
 const sudo = require('sudo-prompt');
@@ -299,6 +300,50 @@ app.on('before-quit', () => {
   appState.isQuitting = true;
 });
 
+// Get the content of a file as a raw buffer of bytes.
+// Useful to convert a file path to a File instance.
+// Example:
+// const result = await ipcMain.invoke('get-file-from-path', 'path/to/file');
+// const file = new File([result.buffer], result.name);
+// NOTE: if path points to a folder, an empty
+// file will be given.
+ipcMain.handle('get-file-from-path', (event, path) => {
+  return new Promise((resolve, reject) => {
+    fs.stat(path, (error, stats) => {
+      if (error) {
+        reject(error);
+        return;
+      }
+      // Separate folders considering "\" and "/"
+      // as separators (cross platform)
+      const folders = path.split(/[\\/]/);
+      const name = folders[folders.length - 1];
+      if (stats.isDirectory()) {
+        resolve({
+          name,
+          mime: undefined,
+          path,
+          buffer: new ArrayBuffer(0),
+        });
+        return;
+      }
+      // Encoding null ensures data results in a Buffer.
+      fs.readFile(path, { encoding: null }, (err, data) => {
+        if (err) {
+          reject(err);
+          return;
+        }
+        resolve({
+          name,
+          mime: mime.getType(name) || undefined,
+          path,
+          buffer: data,
+        });
+      });
+    });
+  });
+});
+
 ipcMain.on('get-disk-space', async (event) => {
   try {
     const { data_dir } = await Lbry.settings_get();

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

package.json

@@ -54,6 +54,7 @@
     "humanize-duration": "^3.27.0",
     "if-env": "^1.0.4",
     "match-sorter": "^6.3.0",
+    "mime": "^3.0.0",
     "node-html-parser": "^5.1.0",
     "parse-duration": "^1.0.0",
     "proxy-polyfill": "0.1.6",

ui/component/channelForm/view.jsx

@@ -325,7 +325,6 @@ function ChannelForm(props: Props) {
               uri={uri}
               thumbnailPreview={thumbnailPreview}
               allowGifs
-              showDelayedMessage={isUpload.thumbnail}
               setThumbUploadError={setThumbError}
               thumbUploadError={thumbError}
             />

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,16 +26,16 @@ 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);
     }
   };
 
   React.useEffect(() => {
-    if (radio.stops.length) {
+    if (radio.items.length) {
       if (!radio.currentId) {
         radio.first();
       } else {
-        const first = radio.stops[0].ref.current;
+        const first = radio.items[0].ref.current;
         // First auto-selection
         if (first && first.id === radio.currentId && !radio.state) {
           const file = getFile(first.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.items.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

@@ -1,19 +1,21 @@
 // @flow
 import * as React from 'react';
 import * as remote from '@electron/remote';
+import { ipcRenderer } from 'electron';
 import Button from 'component/button';
 import { FormField } from 'component/common/form';
 
 type Props = {
   type: string,
   currentPath?: ?string,
-  onFileChosen: (WebFile) => void,
+  onFileChosen: (FileWithPath) => void,
   label?: string,
   placeholder?: string,
   accept?: string,
   error?: string,
   disabled?: boolean,
   autoFocus?: boolean,
+  filters?: Array<{ name: string, extension: string[] }>,
 };
 
 class FileSelector extends React.PureComponent<Props> {
@@ -41,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
   };
@@ -64,13 +66,27 @@ class FileSelector extends React.PureComponent<Props> {
       properties = ['openDirectory'];
     }
 
-    remote.dialog.showOpenDialog({ properties, defaultPath }).then((result) => {
+    remote.dialog
-      const path = result && result.filePaths[0];
+      .showOpenDialog({
-      if (path) {
+        properties,
-        // $FlowFixMe
+        defaultPath,
-        this.props.onFileChosen({ path });
+        filters: this.props.filters,
-      }
+      })
-    });
+      .then((result) => {
+        const path = result && result.filePaths[0];
+        if (path) {
+          return ipcRenderer.invoke('get-file-from-path', path);
+        }
+      })
+      .then((result) => {
+        if (!result) {
+          return;
+        }
+        const file = new File([result.buffer], result.name, {
+          type: result.mime,
+        });
+        this.props.onFileChosen({ file, path: result.path });
+      });
   };
 
   fileInputButton = () => {

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,
   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);
@@ -65,24 +65,29 @@ function FileDrop(props: Props) {
     }
   }, [history]);
 
-  // Delay hide and navigation for a smooth transition
-  const hideDropArea = React.useCallback(() => {
-    hideTimer.current = setTimeout(() => {
-      setFiles([]);
-      // Navigate to publish area
-      navigationTimer.current = setTimeout(() => {
-        navigateToPublish();
-      }, NAVIGATE_TIME_OUT);
-    }, HIDE_TIME_OUT);
-  }, [navigateToPublish]);
-
   // Handle file selection
   const handleFileSelected = React.useCallback(
     (selectedFile) => {
-      updatePublishForm({ filePath: selectedFile });
+      // Delay hide and navigation for a smooth transition
-      hideDropArea();
+      hideTimer.current = setTimeout(() => {
+        setFiles([]);
+        // Navigate to publish area
+        navigationTimer.current = setTimeout(() => {
+          // Navigate first, THEN assign filePath, otherwise
+          // the file selected will get reset (that's how the
+          // publish file view works, when the user switches to
+          // publish a file, the pathFile value gets reset to undefined)
+          navigateToPublish();
+          updatePublishForm({
+            filePath: selectedFile.path || selectedFile.name,
+            fileDur: 0,
+            fileSize: 0,
+            fileVid: false,
+          });
+        }, NAVIGATE_TIME_OUT);
+      }, HIDE_TIME_OUT);
     },
-    [updatePublishForm, hideDropArea]
+    [setFiles, navigateToPublish, updatePublishForm]
   );
 
   // Clear timers when unmounted

ui/component/postEditor/view.jsx

@@ -6,7 +6,7 @@ type Props = {
   uri: ?string,
   label: ?string,
   disabled: ?boolean,
-  filePath: string | WebFile,
+  filePath: 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,
   fileMimeType: ?string,
   isStillEditing: boolean,
   balance: number,
@@ -77,7 +77,7 @@ function PublishFile(props: Props) {
   const sizeInMB = Number(size) / 1000000;
   const secondsToProcess = sizeInMB / PROCESSING_MB_PER_SECOND;
   const ffmpegAvail = ffmpegStatus.available;
-  const [currentFile, setCurrentFile] = useState(null);
+  const currentFile = filePath;
   const [currentFileType, setCurrentFileType] = useState(null);
   const [optimizeAvail, setOptimizeAvail] = useState(false);
   const [userOptimize, setUserOptimize] = usePersistedState('publish-file-user-optimize', false);
@@ -91,18 +91,6 @@ function PublishFile(props: Props) {
     }
   }, [currentFileType, mode, isStillEditing, updatePublishForm]);
 
-  useEffect(() => {
-    if (!filePath || filePath === '') {
-      setCurrentFile('');
-      updateFileInfo(0, 0, false);
-    } else if (typeof filePath !== 'string') {
-      // Update currentFile file
-      if (filePath.name !== currentFile && filePath.path !== currentFile) {
-        handleFileChange(filePath);
-      }
-    }
-  }, [filePath, currentFile, handleFileChange, updateFileInfo]);
-
   useEffect(() => {
     const isOptimizeAvail = currentFile && currentFile !== '' && isVid && ffmpegAvail;
     const finalOptimizeState = isOptimizeAvail && userOptimize;
@@ -209,11 +197,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 {
@@ -222,7 +210,8 @@ function PublishFile(props: Props) {
       return;
     }
 
-    // if video, extract duration so we can warn about bitrateif (typeof file !== 'string') {
+    // if video, extract duration so we can warn about bitrate if (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';
@@ -233,7 +222,7 @@ function PublishFile(props: Props) {
       isTextPost = contentType[1] === 'plain' || contentType[1] === 'markdown';
       setCurrentFileType(contentType);
     } else if (file.name) {
-      // If user's machine is missign a valid content type registration
+      // If user's machine is missing a valid content type registration
       // for markdown content: text/markdown, file extension will be used instead
       const extension = file.name.split('.').pop();
       isTextPost = MARKDOWN_FILE_EXTENSIONS.includes(extension);
@@ -270,10 +259,8 @@ function PublishFile(props: Props) {
       setPublishMode(PUBLISH_MODES.FILE);
     }
 
-    const publishFormParams: { filePath: string | WebFile, name?: string, optimize?: boolean } = {
+    const publishFormParams: { filePath: string, name?: string, optimize?: boolean } = {
-      // if electron, we'll set filePath to the path string because SDK is handling publishing.
+      filePath: fileWithPath.path,
-      // File.path will be undefined from web due to browser security, so it will default to the File Object.
-      filePath: file.path || file,
     };
     // Strip off extention and replace invalid characters
     let fileName = name || (file.name && file.name.substring(0, file.name.lastIndexOf('.'))) || '';
@@ -282,8 +269,6 @@ 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);
     updatePublishForm(publishFormParams);
   }
 

ui/component/publishForm/view.jsx

@@ -35,8 +35,8 @@ import tempy from 'tempy';
 type Props = {
   disabled: boolean,
   tags: Array<Tag>,
-  publish: (source?: string | File, ?boolean) => void,
+  publish: (source: ?File, ?boolean) => void,
-  filePath: string | File,
+  filePath: ?File,
   fileText: string,
   bid: ?number,
   bidError: ?string,
@@ -373,9 +373,6 @@ function PublishForm(props: Props) {
     if (!output || output === '') {
       // Generate a temporary file:
       output = tempy.file({ name: 'post.md' });
-    } else if (typeof filePath === 'string') {
-      // Use current file
-      output = filePath;
     }
     // Create a temporary file and save file changes
     if (output && output !== '') {
@@ -447,7 +444,7 @@ function PublishForm(props: Props) {
   // with other properties such as name, title, etc.) for security reasons.
   useEffect(() => {
     if (mode === PUBLISH_MODES.FILE) {
-      updatePublishForm({ filePath: '', fileDur: 0, fileSize: 0 });
+      updatePublishForm({ filePath: undefined, fileDur: 0, fileSize: 0 });
     }
   }, [mode, updatePublishForm]);
 

ui/component/selectAsset/view.jsx

@@ -27,6 +27,14 @@ type Props = {
   // passed to the onUpdate function after the
   // upload service returns success.
   buildImagePreview?: boolean,
+  // File extension filtering. Files can be filtered
+  // but the "All Files" options always shows up. To
+  // avoid that, you can use the filters property.
+  // For example, to only accept images pass the
+  // following filter:
+  // { name: 'Images', extensions: ['jpg', 'png', 'gif'] },
+  filters?: Array<{ name: string, extension: string[] }>,
+  type?: string,
 };
 
 function filePreview(file) {
@@ -43,7 +51,8 @@ function filePreview(file) {
 }
 
 function SelectAsset(props: Props) {
-  const { onUpdate, onDone, assetName, currentValue, recommended, title, inline, buildImagePreview } = props;
+  const { onUpdate, onDone, assetName, currentValue, recommended, title, inline, buildImagePreview, filters, type } =
+    props;
   const [pathSelected, setPathSelected] = React.useState('');
   const [fileSelected, setFileSelected] = React.useState<any>(null);
   const [uploadStatus, setUploadStatus] = React.useState(SPEECH_READY);
@@ -121,17 +130,17 @@ function SelectAsset(props: Props) {
           />
         ) : (
           <FileSelector
+            filters={filters}
+            type={type}
             autoFocus
             disabled={uploadStatus === SPEECH_UPLOADING}
             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/modalImageUpload/view.jsx

@@ -14,10 +14,13 @@ type Props = {
 
 function ModalImageUpload(props: Props) {
   const { closeModal, currentValue, title, assetName, helpText, onUpdate } = props;
+  const filters = React.useMemo(() => [{ name: 'Images', extensions: ['jpg', 'jpeg', 'png', 'gif', 'svg'] }]);
 
   return (
     <Modal isOpen type="card" onAborted={closeModal} contentLabel={title}>
       <SelectAsset
+        filters={filters}
+        type="openFile"
         onUpdate={onUpdate}
         currentValue={currentValue}
         assetName={assetName}

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: ?File,
   isMarkdownPost: boolean,
   optimize: boolean,
   title: ?string,
@@ -104,16 +104,11 @@ const ModalPublishPreview = (props: Props) => {
     // @endif
   }
 
-  function getFilePathName(filePath: string | WebFile) {
+  function getFilePathName(filePath: ?File) {
     if (!filePath) {
       return NO_FILE;
     }
-
+    return filePath.name;
-    if (typeof filePath === 'string') {
-      return filePath;
-    } else {
-      return filePath.name;
-    }
   }
 
   function createRow(label: string, value: any) {
@@ -127,7 +122,7 @@ const ModalPublishPreview = (props: Props) => {
 
   const txFee = previewResponse ? previewResponse['total_fee'] : null;
   //   $FlowFixMe add outputs[0] etc to PublishResponse type
-  const isOptimizeAvail = filePath && filePath !== '' && isVid && ffmpegStatus.available;
+  const isOptimizeAvail = filePath && isVid && ffmpegStatus.available;
   let modalTitle;
   if (isStillEditing) {
     modalTitle = __('Confirm Edit');

ui/redux/actions/publish.js

@@ -18,7 +18,7 @@ import Lbry from 'lbry';
 import { isClaimNsfw } from 'util/claim';
 
 export const NO_FILE = '---';
-export const doPublishDesktop = (filePath: string, preview?: boolean) => (dispatch: Dispatch, getState: () => {}) => {
+export const doPublishDesktop = (filePath: ?File, preview?: boolean) => (dispatch: Dispatch, getState: () => {}) => {
   const publishPreview = (previewResponse) => {
     dispatch(
       doOpenModal(MODALS.PUBLISH_PREVIEW, {
@@ -138,335 +138,327 @@ export const doUpdatePublishForm = (publishFormValue: UpdatePublishFormData) =>
     data: { ...publishFormValue },
   });
 
-export const doUploadThumbnail = (
+export const doUploadThumbnail =
-  filePath?: string,
+  (filePath?: string, thumbnailBlob?: File, fsAdapter?: any, fs?: any, path?: any, cb?: (string) => void) =>
-  thumbnailBlob?: File,
+  (dispatch: Dispatch) => {
-  fsAdapter?: any,
+    const downMessage = __('Thumbnail upload service may be down, try again later.');
-  fs?: any,
+    let thumbnail, fileExt, fileName, fileType;
-  path?: any,
-  cb?: (string) => void
-) => (dispatch: Dispatch) => {
-  const downMessage = __('Thumbnail upload service may be down, try again later.');
-  let thumbnail, fileExt, fileName, fileType;
 
-  const makeid = () => {
+    const makeid = () => {
-    let text = '';
+      let text = '';
-    const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+      const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-    for (let i = 0; i < 24; i += 1) text += possible.charAt(Math.floor(Math.random() * 62));
+      for (let i = 0; i < 24; i += 1) text += possible.charAt(Math.floor(Math.random() * 62));
-    return text;
+      return text;
-  };
+    };
 
-  const uploadError = (error = '') => {
+    const uploadError = (error = '') => {
-    dispatch(
+      dispatch(
-      batchActions(
+        batchActions(
-        {
+          {
-          type: ACTIONS.UPDATE_PUBLISH_FORM,
+            type: ACTIONS.UPDATE_PUBLISH_FORM,
-          data: {
+            data: {
-            uploadThumbnailStatus: THUMBNAIL_STATUSES.READY,
+              uploadThumbnailStatus: THUMBNAIL_STATUSES.READY,
-            thumbnail: '',
+              thumbnail: '',
-            nsfw: false,
+              nsfw: false,
+            },
           },
-        },
+          doError(error)
-        doError(error)
+        )
-      )
+      );
-    );
+    };
-  };
 
-  dispatch({
+    dispatch({
-    type: ACTIONS.UPDATE_PUBLISH_FORM,
+      type: ACTIONS.UPDATE_PUBLISH_FORM,
-    data: {
+      data: {
-      thumbnailError: undefined,
+        thumbnailError: undefined,
-    },
+      },
-  });
+    });
 
-  const doUpload = (data) => {
+    const doUpload = (data) => {
-    return fetch(SPEECH_PUBLISH, {
+      return fetch(SPEECH_PUBLISH, {
-      method: 'POST',
+        method: 'POST',
-      body: data,
+        body: data,
-    })
-      .then((res) => res.text())
-      .then((text) => (text.length ? JSON.parse(text) : {}))
-      .then((json) => {
-        if (!json.success) return uploadError(json.message || downMessage);
-        if (cb) {
-          cb(json.data.serveUrl);
-        }
-        return dispatch({
-          type: ACTIONS.UPDATE_PUBLISH_FORM,
-          data: {
-            uploadThumbnailStatus: THUMBNAIL_STATUSES.COMPLETE,
-            thumbnail: json.data.serveUrl,
-          },
-        });
       })
-      .catch((err) => {
+        .then((res) => res.text())
-        let message = err.message;
+        .then((text) => (text.length ? JSON.parse(text) : {}))
+        .then((json) => {
+          if (!json.success) return uploadError(json.message || downMessage);
+          if (cb) {
+            cb(json.data.serveUrl);
+          }
+          return dispatch({
+            type: ACTIONS.UPDATE_PUBLISH_FORM,
+            data: {
+              uploadThumbnailStatus: THUMBNAIL_STATUSES.COMPLETE,
+              thumbnail: json.data.serveUrl,
+            },
+          });
+        })
+        .catch((err) => {
+          let message = err.message;
 
-        // This sucks but ¯\_(ツ)_/¯
+          // This sucks but ¯\_(ツ)_/¯
-        if (message === 'Failed to fetch') {
+          if (message === 'Failed to fetch') {
-          message = downMessage;
+            message = downMessage;
-        }
+          }
-        const userInput = [fileName, fileExt, fileType, thumbnail];
+          const userInput = [fileName, fileExt, fileType, thumbnail];
-        uploadError(`${message}\nUser input:  ${userInput.join(', ')}`);
+          uploadError(`${message}\nUser input:  ${userInput.join(', ')}`);
+        });
+    };
+
+    dispatch({
+      type: ACTIONS.UPDATE_PUBLISH_FORM,
+      data: { uploadThumbnailStatus: THUMBNAIL_STATUSES.IN_PROGRESS },
+    });
+
+    if (fsAdapter && fsAdapter.readFile && filePath) {
+      fsAdapter.readFile(filePath, 'base64').then((base64Image) => {
+        fileExt = 'png';
+        fileName = 'thumbnail.png';
+        fileType = 'image/png';
+
+        const data = new FormData();
+        const name = makeid();
+        data.append('name', name);
+        // $FlowFixMe
+        data.append('file', { uri: 'file://' + filePath, type: fileType, name: fileName });
+        return doUpload(data);
       });
-  };
+    } else {
-
+      if (filePath && fs && path) {
-  dispatch({
+        thumbnail = fs.readFileSync(filePath);
-    type: ACTIONS.UPDATE_PUBLISH_FORM,
+        fileExt = path.extname(filePath);
-    data: { uploadThumbnailStatus: THUMBNAIL_STATUSES.IN_PROGRESS },
+        fileName = path.basename(filePath);
-  });
+        fileType = `image/${fileExt.slice(1)}`;
-
+      } else if (thumbnailBlob) {
-  if (fsAdapter && fsAdapter.readFile && filePath) {
+        fileExt = `.${thumbnailBlob.type && thumbnailBlob.type.split('/')[1]}`;
-    fsAdapter.readFile(filePath, 'base64').then((base64Image) => {
+        fileName = thumbnailBlob.name;
-      fileExt = 'png';
+        fileType = thumbnailBlob.type;
-      fileName = 'thumbnail.png';
+      } else {
-      fileType = 'image/png';
+        return null;
+      }
 
       const data = new FormData();
       const name = makeid();
+      const file = thumbnailBlob || (thumbnail && new File([thumbnail], fileName, { type: fileType }));
       data.append('name', name);
       // $FlowFixMe
-      data.append('file', { uri: 'file://' + filePath, type: fileType, name: fileName });
+      data.append('file', file);
       return doUpload(data);
-    });
-  } else {
-    if (filePath && fs && path) {
-      thumbnail = fs.readFileSync(filePath);
-      fileExt = path.extname(filePath);
-      fileName = path.basename(filePath);
-      fileType = `image/${fileExt.slice(1)}`;
-    } else if (thumbnailBlob) {
-      fileExt = `.${thumbnailBlob.type && thumbnailBlob.type.split('/')[1]}`;
-      fileName = thumbnailBlob.name;
-      fileType = thumbnailBlob.type;
-    } else {
-      return null;
     }
-
-    const data = new FormData();
-    const name = makeid();
-    const file = thumbnailBlob || (thumbnail && new File([thumbnail], fileName, { type: fileType }));
-    data.append('name', name);
-    // $FlowFixMe
-    data.append('file', file);
-    return doUpload(data);
-  }
-};
-
-export const doPrepareEdit = (claim: StreamClaim, uri: string, fileInfo: FileListItem, fs: any) => (
-  dispatch: Dispatch
-) => {
-  const { name, amount, value = {} } = claim;
-  const channelName = (claim && claim.signing_channel && claim.signing_channel.name) || null;
-  const {
-    author,
-    description,
-    // use same values as default state
-    // fee will be undefined for free content
-    fee = {
-      amount: '0',
-      currency: 'LBC',
-    },
-    languages,
-    release_time,
-    license,
-    license_url: licenseUrl,
-    thumbnail,
-    title,
-    tags,
-  } = value;
-
-  const publishData: UpdatePublishFormData = {
-    name,
-    bid: Number(amount),
-    contentIsFree: fee.amount === '0',
-    author,
-    description,
-    fee,
-    languages,
-    releaseTime: release_time,
-    releaseTimeEdited: undefined,
-    thumbnail: thumbnail ? thumbnail.url : null,
-    title,
-    uri,
-    uploadThumbnailStatus: thumbnail ? THUMBNAIL_STATUSES.MANUAL : undefined,
-    licenseUrl,
-    nsfw: isClaimNsfw(claim),
-    tags: tags ? tags.map((tag) => ({ name: tag })) : [],
   };
 
-  // Make sure custom licenses are mapped properly
+export const doPrepareEdit =
-  // If the license isn't one of the standard licenses, map the custom license and description/url
+  (claim: StreamClaim, uri: string, fileInfo: FileListItem, fs: any) => (dispatch: Dispatch) => {
-  if (!CC_LICENSES.some(({ value }) => value === license)) {
+    const { name, amount, value = {} } = claim;
-    if (!license || license === NONE || license === PUBLIC_DOMAIN) {
+    const channelName = (claim && claim.signing_channel && claim.signing_channel.name) || null;
+    const {
+      author,
+      description,
+      // use same values as default state
+      // fee will be undefined for free content
+      fee = {
+        amount: '0',
+        currency: 'LBC',
+      },
+      languages,
+      release_time,
+      license,
+      license_url: licenseUrl,
+      thumbnail,
+      title,
+      tags,
+    } = value;
+
+    const publishData: UpdatePublishFormData = {
+      name,
+      bid: Number(amount),
+      contentIsFree: fee.amount === '0',
+      author,
+      description,
+      fee,
+      languages,
+      releaseTime: release_time,
+      releaseTimeEdited: undefined,
+      thumbnail: thumbnail ? thumbnail.url : null,
+      title,
+      uri,
+      uploadThumbnailStatus: thumbnail ? THUMBNAIL_STATUSES.MANUAL : undefined,
+      licenseUrl,
+      nsfw: isClaimNsfw(claim),
+      tags: tags ? tags.map((tag) => ({ name: tag })) : [],
+    };
+
+    // Make sure custom licenses are mapped properly
+    // If the license isn't one of the standard licenses, map the custom license and description/url
+    if (!CC_LICENSES.some(({ value }) => value === license)) {
+      if (!license || license === NONE || license === PUBLIC_DOMAIN) {
+        publishData.licenseType = license;
+      } else if (license && !licenseUrl && license !== NONE) {
+        publishData.licenseType = COPYRIGHT;
+      } else {
+        publishData.licenseType = OTHER;
+      }
+
+      publishData.otherLicenseDescription = license;
+    } else {
       publishData.licenseType = license;
-    } else if (license && !licenseUrl && license !== NONE) {
+    }
-      publishData.licenseType = COPYRIGHT;
+    if (channelName) {
-    } else {
+      publishData['channel'] = channelName;
-      publishData.licenseType = OTHER;
     }
 
-    publishData.otherLicenseDescription = license;
+    dispatch({ type: ACTIONS.DO_PREPARE_EDIT, data: publishData });
-  } else {
-    publishData.licenseType = license;
-  }
-  if (channelName) {
-    publishData['channel'] = channelName;
-  }
-
-  dispatch({ type: ACTIONS.DO_PREPARE_EDIT, data: publishData });
-};
-
-export const doPublish = (success: Function, fail: Function, preview: Function) => (
-  dispatch: Dispatch,
-  getState: () => {}
-) => {
-  if (!preview) {
-    dispatch({ type: ACTIONS.PUBLISH_START });
-  }
-
-  const state = getState();
-  const myClaimForUri = selectMyClaimForUri(state);
-  const myChannels = selectMyChannelClaims(state);
-  // const myClaims = selectMyClaimsWithoutChannels(state);
-  // get redux publish form
-  const publishData = selectPublishFormValues(state);
-
-  // destructure the data values
-  const {
-    name,
-    bid,
-    filePath,
-    description,
-    language,
-    releaseTimeEdited,
-    // license,
-    licenseUrl,
-    useLBRYUploader,
-    licenseType,
-    otherLicenseDescription,
-    thumbnail,
-    channel,
-    title,
-    contentIsFree,
-    fee,
-    tags,
-    // locations,
-    optimize,
-  } = publishData;
-
-  // Handle scenario where we have a claim that has the same name as a channel we are publishing with.
-  const myClaimForUriEditing = myClaimForUri && myClaimForUri.name === name ? myClaimForUri : null;
-
-  let publishingLicense;
-  switch (licenseType) {
-    case COPYRIGHT:
-    case OTHER:
-      publishingLicense = otherLicenseDescription;
-      break;
-    default:
-      publishingLicense = licenseType;
-  }
-
-  // get the claim id from the channel name, we will use that instead
-  const namedChannelClaim = myChannels ? myChannels.find((myChannel) => myChannel.name === channel) : null;
-  const channelId = namedChannelClaim ? namedChannelClaim.claim_id : '';
-
-  const publishPayload: {
-    name: ?string,
-    bid: string,
-    description?: string,
-    channel_id?: string,
-    file_path?: string,
-    license_url?: string,
-    license?: string,
-    thumbnail_url?: string,
-    release_time?: number,
-    fee_currency?: string,
-    fee_amount?: string,
-    languages?: Array<string>,
-    tags: Array<string>,
-    locations?: Array<any>,
-    blocking: boolean,
-    optimize_file?: boolean,
-    preview?: boolean,
-    remote_url?: string,
-  } = {
-    name,
-    title,
-    description,
-    locations: [],
-    bid: creditsToString(bid),
-    languages: [language],
-    tags: tags && tags.map((tag) => tag.name),
-    thumbnail_url: thumbnail,
-    blocking: true,
-    preview: false,
   };
-  // Temporary solution to keep the same publish flow with the new tags api
-  // Eventually we will allow users to enter their own tags on publish
 
-  if (publishingLicense) {
+export const doPublish =
-    publishPayload.license = publishingLicense;
+  (success: Function, fail: Function, preview: Function) => (dispatch: Dispatch, getState: () => {}) => {
-  }
+    if (!preview) {
+      dispatch({ type: ACTIONS.PUBLISH_START });
+    }
 
-  if (licenseUrl) {
+    const state = getState();
-    publishPayload.license_url = licenseUrl;
+    const myClaimForUri = selectMyClaimForUri(state);
-  }
+    const myChannels = selectMyChannelClaims(state);
+    // const myClaims = selectMyClaimsWithoutChannels(state);
+    // get redux publish form
+    const publishData = selectPublishFormValues(state);
 
-  if (thumbnail) {
+    // destructure the data values
-    publishPayload.thumbnail_url = thumbnail;
+    const {
-  }
+      name,
+      bid,
+      filePath,
+      description,
+      language,
+      releaseTimeEdited,
+      // license,
+      licenseUrl,
+      useLBRYUploader,
+      licenseType,
+      otherLicenseDescription,
+      thumbnail,
+      channel,
+      title,
+      contentIsFree,
+      fee,
+      tags,
+      // locations,
+      optimize,
+    } = publishData;
 
-  if (useLBRYUploader) {
+    // Handle scenario where we have a claim that has the same name as a channel we are publishing with.
-    publishPayload.tags.push('lbry-first');
+    const myClaimForUriEditing = myClaimForUri && myClaimForUri.name === name ? myClaimForUri : null;
-  }
 
-  // Set release time to curret date. On edits, keep original release/transaction time as release_time
+    let publishingLicense;
-  if (releaseTimeEdited) {
+    switch (licenseType) {
-    publishPayload.release_time = releaseTimeEdited;
+      case COPYRIGHT:
-  } else if (myClaimForUriEditing && myClaimForUriEditing.value.release_time) {
+      case OTHER:
-    publishPayload.release_time = Number(myClaimForUri.value.release_time);
+        publishingLicense = otherLicenseDescription;
-  } else if (myClaimForUriEditing && myClaimForUriEditing.timestamp) {
+        break;
-    publishPayload.release_time = Number(myClaimForUriEditing.timestamp);
+      default:
-  } else {
+        publishingLicense = licenseType;
-    publishPayload.release_time = Number(Math.round(Date.now() / 1000));
+    }
-  }
 
-  if (channelId) {
+    // get the claim id from the channel name, we will use that instead
-    publishPayload.channel_id = channelId;
+    const namedChannelClaim = myChannels ? myChannels.find((myChannel) => myChannel.name === channel) : null;
-  }
+    const channelId = namedChannelClaim ? namedChannelClaim.claim_id : '';
 
-  if (myClaimForUriEditing && myClaimForUriEditing.value && myClaimForUriEditing.value.locations) {
+    const publishPayload: {
-    publishPayload.locations = myClaimForUriEditing.value.locations;
+      name: ?string,
-  }
+      bid: string,
+      description?: string,
+      channel_id?: string,
+      file_path?: string,
+      license_url?: string,
+      license?: string,
+      thumbnail_url?: string,
+      release_time?: number,
+      fee_currency?: string,
+      fee_amount?: string,
+      languages?: Array<string>,
+      tags: Array<string>,
+      locations?: Array<any>,
+      blocking: boolean,
+      optimize_file?: boolean,
+      preview?: boolean,
+      remote_url?: string,
+    } = {
+      name,
+      title,
+      description,
+      locations: [],
+      bid: creditsToString(bid),
+      languages: [language],
+      tags: tags && tags.map((tag) => tag.name),
+      thumbnail_url: thumbnail,
+      blocking: true,
+      preview: false,
+    };
+    // Temporary solution to keep the same publish flow with the new tags api
+    // Eventually we will allow users to enter their own tags on publish
 
-  if (!contentIsFree && fee && fee.currency && Number(fee.amount) > 0) {
+    if (publishingLicense) {
-    publishPayload.fee_currency = fee.currency;
+      publishPayload.license = publishingLicense;
-    publishPayload.fee_amount = creditsToString(fee.amount);
+    }
-  }
 
-  if (optimize) {
+    if (licenseUrl) {
-    publishPayload.optimize_file = true;
+      publishPayload.license_url = licenseUrl;
-  }
+    }
 
-  // Only pass file on new uploads, not metadata only edits.
+    if (thumbnail) {
-  // The sdk will figure it out
+      publishPayload.thumbnail_url = thumbnail;
-  if (filePath) publishPayload.file_path = filePath;
+    }
 
-  if (preview) {
+    if (useLBRYUploader) {
-    publishPayload.preview = true;
+      publishPayload.tags.push('lbry-first');
-    publishPayload.optimize_file = false;
+    }
 
-    return Lbry.publish(publishPayload).then((previewResponse: PublishResponse) => {
+    // Set release time to curret date. On edits, keep original release/transaction time as release_time
-      return preview(previewResponse);
+    if (releaseTimeEdited) {
+      publishPayload.release_time = releaseTimeEdited;
+    } else if (myClaimForUriEditing && myClaimForUriEditing.value.release_time) {
+      publishPayload.release_time = Number(myClaimForUri.value.release_time);
+    } else if (myClaimForUriEditing && myClaimForUriEditing.timestamp) {
+      publishPayload.release_time = Number(myClaimForUriEditing.timestamp);
+    } else {
+      publishPayload.release_time = Number(Math.round(Date.now() / 1000));
+    }
+
+    if (channelId) {
+      publishPayload.channel_id = channelId;
+    }
+
+    if (myClaimForUriEditing && myClaimForUriEditing.value && myClaimForUriEditing.value.locations) {
+      publishPayload.locations = myClaimForUriEditing.value.locations;
+    }
+
+    if (!contentIsFree && fee && fee.currency && Number(fee.amount) > 0) {
+      publishPayload.fee_currency = fee.currency;
+      publishPayload.fee_amount = creditsToString(fee.amount);
+    }
+
+    if (optimize) {
+      publishPayload.optimize_file = true;
+    }
+
+    // Only pass file on new uploads, not metadata only edits.
+    // The sdk will figure it out
+    if (filePath) publishPayload.file_path = filePath;
+
+    if (preview) {
+      publishPayload.preview = true;
+      publishPayload.optimize_file = false;
+
+      return Lbry.publish(publishPayload).then((previewResponse: PublishResponse) => {
+        return preview(previewResponse);
+      }, fail);
+    }
+
+    return Lbry.publish(publishPayload).then((response: PublishResponse) => {
+      return success(response);
     }, fail);
-  }
+  };
-
-  return Lbry.publish(publishPayload).then((response: PublishResponse) => {
-    return success(response);
-  }, fail);
-};
 
 // Calls file_list until any reflecting files are done
 export const doCheckReflectingFiles = () => (dispatch: Dispatch, getState: GetState) => {

yarn.lock

@@ -11549,6 +11549,7 @@ __metadata:
     lodash-es: ^4.17.21
     mammoth: ^1.4.16
     match-sorter: ^6.3.0
+    mime: ^3.0.0
     moment: ^2.29.2
     node-abi: ^2.5.1
     node-fetch: ^2.6.7
@@ -12576,6 +12577,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mime@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "mime@npm:3.0.0"
+  bin:
+    mime: cli.js
+  checksum: f43f9b7bfa64534e6b05bd6062961681aeb406a5b53673b53b683f27fcc4e739989941836a355eef831f4478923651ecc739f4a5f6e20a76487b432bfd4db928
+  languageName: node
+  linkType: hard
+
 "mimic-fn@npm:^1.0.0":
   version: 1.2.0
   resolution: "mimic-fn@npm:1.2.0"