diff --git a/static/app-strings.json b/static/app-strings.json index d53ce0a1a..733bb4db3 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -1371,6 +1371,7 @@ "Are you sure you want to purchase %claim_title%?": "Are you sure you want to purchase %claim_title%?", "Discover": "Discover", "Thumbnail upload service may be down, try again later.": "Thumbnail upload service may be down, try again later.", + "There was an error in the upload. The format or extension might not be supported.": "There was an error in the upload. The format or extension might not be supported.", "You are currently editing your upload.": "You are currently editing your upload.", "You are currently editing this claim.": "You are currently editing this claim.", "My content for this post...": "My content for this post...", diff --git a/ui/component/selectAsset/view.jsx b/ui/component/selectAsset/view.jsx index 817f58980..06435be47 100644 --- a/ui/component/selectAsset/view.jsx +++ b/ui/component/selectAsset/view.jsx @@ -1,16 +1,14 @@ // @flow import React from 'react'; import FileSelector from 'component/common/file-selector'; -import * as SPEECH_URLS from 'constants/speech_urls'; +import { IMG_CDN_PUBLISH_URL } from 'constants/cdn_urls'; import { FormField, Form } from 'component/common/form'; import Button from 'component/button'; import Card from 'component/common/card'; -import { generateThumbnailName } from 'util/generate-thumbnail-name'; import usePersistedState from 'effects/use-persisted-state'; const accept = '.png, .jpg, .jpeg, .gif'; -const SPEECH_READY = 'READY'; -const SPEECH_UPLOADING = 'UPLOADING'; +const STATUS = { READY: 'READY', UPLOADING: 'UPLOADING' }; type Props = { assetName: string, @@ -26,7 +24,7 @@ function SelectAsset(props: Props) { const { onUpdate, onDone, assetName, currentValue, recommended, title, inline } = props; const [pathSelected, setPathSelected] = React.useState(''); const [fileSelected, setFileSelected] = React.useState(null); - const [uploadStatus, setUploadStatus] = React.useState(SPEECH_READY); + const [uploadStatus, setUploadStatus] = React.useState(STATUS.READY); const [useUrl, setUseUrl] = usePersistedState('thumbnail-upload:mode', false); const [url, setUrl] = React.useState(currentValue); const [error, setError] = React.useState(); @@ -37,7 +35,7 @@ function SelectAsset(props: Props) { }; const onSuccess = (thumbnailUrl) => { - setUploadStatus(SPEECH_READY); + setUploadStatus(STATUS.READY); onUpdate(thumbnailUrl, !useUrl); if (onDone) { @@ -45,22 +43,27 @@ function SelectAsset(props: Props) { } }; - setUploadStatus(SPEECH_UPLOADING); + setUploadStatus(STATUS.UPLOADING); const data = new FormData(); - const name = generateThumbnailName(); - data.append('name', name); - data.append('file', fileSelected); + data.append('file-input', fileSelected); + data.append('upload', 'Upload'); - return fetch(SPEECH_URLS.SPEECH_PUBLISH, { + return fetch(IMG_CDN_PUBLISH_URL, { method: 'POST', body: data, }) .then((response) => response.json()) - .then((json) => (json.success ? onSuccess(`${json.data.serveUrl}`) : uploadError(json.message))) + .then((json) => { + return json.type === 'success' + ? onSuccess(`${json.message}`) + : uploadError( + json.message || __('There was an error in the upload. The format or extension might not be supported.') + ); + }) .catch((err) => { uploadError(err.message); - setUploadStatus(SPEECH_READY); + setUploadStatus(STATUS.READY); }); } @@ -70,7 +73,7 @@ function SelectAsset(props: Props) { const selectedLabel = pathSelected ? __('URL Selected') : __('File Selected'); let fileSelectorLabel; - if (uploadStatus === SPEECH_UPLOADING) { + if (uploadStatus === STATUS.UPLOADING) { fileSelectorLabel = __('Uploading...'); } else { // Include the same label/recommendation for both 'URL' and 'UPLOAD'. @@ -96,7 +99,7 @@ function SelectAsset(props: Props) { ) : ( doUploadAsset()} /> )} diff --git a/ui/constants/cdn_urls.js b/ui/constants/cdn_urls.js new file mode 100644 index 000000000..771a900c2 --- /dev/null +++ b/ui/constants/cdn_urls.js @@ -0,0 +1,2 @@ +export const IMG_CDN_PUBLISH_URL = 'https://thumbs.odycdn.com/upload.php'; +export const IMG_CDN_STATUS_URL = 'https://thumbs.odycdn.com/status.php'; diff --git a/ui/redux/actions/publish.js b/ui/redux/actions/publish.js index 811f7d143..274b6e765 100644 --- a/ui/redux/actions/publish.js +++ b/ui/redux/actions/publish.js @@ -18,7 +18,7 @@ import { push } from 'connected-react-router'; import analytics from 'analytics'; import { doOpenModal } from 'redux/actions/app'; import { CC_LICENSES, COPYRIGHT, OTHER, NONE, PUBLIC_DOMAIN } from 'constants/licenses'; -import { SPEECH_STATUS, SPEECH_PUBLISH } from 'constants/speech_urls'; +import { IMG_CDN_PUBLISH_URL, IMG_CDN_STATUS_URL } from 'constants/cdn_urls'; import * as THUMBNAIL_STATUSES from 'constants/thumbnail_upload_statuses'; import { creditsToString } from 'util/format-credits'; import Lbry from 'lbry'; @@ -367,10 +367,10 @@ export const doResetThumbnailStatus = () => (dispatch: Dispatch) => { }, }); - return fetch(SPEECH_STATUS) + return fetch(IMG_CDN_STATUS_URL) .then((res) => res.json()) - .then((status) => { - if (status.disabled) { + .then((json) => { + if (json.status !== 'online') { throw Error(); } @@ -412,16 +412,8 @@ export const doUploadThumbnail = ( 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 = () => { - let text = ''; - const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; - for (let i = 0; i < 24; i += 1) text += possible.charAt(Math.floor(Math.random() * 62)); - return text; - }; - const uploadError = (error = '') => { dispatch( batchActions( @@ -440,28 +432,32 @@ export const doUploadThumbnail = ( dispatch({ type: ACTIONS.UPDATE_PUBLISH_FORM, - data: { - thumbnailError: undefined, - }, + data: { thumbnailError: undefined }, }); const doUpload = (data) => { - return fetch(SPEECH_PUBLISH, { + return fetch(IMG_CDN_PUBLISH_URL, { method: 'POST', 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); + if (json.type !== 'success') { + return uploadError( + json.message || __('There was an error in the upload. The format or extension might not be supported.') + ); } + + if (cb) { + cb(json.message); + } + return dispatch({ type: ACTIONS.UPDATE_PUBLISH_FORM, data: { uploadThumbnailStatus: THUMBNAIL_STATUSES.COMPLETE, - thumbnail: json.data.serveUrl, + thumbnail: json.message, }, }); }) @@ -470,7 +466,7 @@ export const doUploadThumbnail = ( // This sucks but ¯\_(ツ)_/¯ if (message === 'Failed to fetch') { - message = downMessage; + message = __('Thumbnail upload service may be down, try again later.'); } uploadError(message); @@ -489,10 +485,9 @@ export const doUploadThumbnail = ( 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 }); + data.append('file-input', { uri: 'file://' + filePath, type: fileType, name: fileName }); + data.append('upload', 'Upload'); return doUpload(data); }); } else { @@ -510,11 +505,10 @@ export const doUploadThumbnail = ( } 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); + data.append('file-input', file); + data.append('upload', 'Upload'); return doUpload(data); } };