diff --git a/src/components/uploadsGalleryModal/container/uploadsGalleryModal.tsx b/src/components/uploadsGalleryModal/container/uploadsGalleryModal.tsx index 686b706bb..d7f5bcf71 100644 --- a/src/components/uploadsGalleryModal/container/uploadsGalleryModal.tsx +++ b/src/components/uploadsGalleryModal/container/uploadsGalleryModal.tsx @@ -1,6 +1,6 @@ import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react'; import { useIntl } from 'react-intl'; -import { Alert, AlertButton, Platform } from 'react-native'; +import { Alert, AlertButton } from 'react-native'; import ImagePicker, { Image } from 'react-native-image-crop-picker'; import RNHeicConverter from 'react-native-heic-converter'; import { openSettings } from 'react-native-permissions'; @@ -13,10 +13,6 @@ import { delay, extractFilenameFromPath } from '../../../utils/editor'; import showLoginAlert from '../../../utils/showLoginAlert'; import { useMediaQuery, useMediaUploadMutation } from '../../../providers/queries'; import { showActionModal } from '../../../redux/actions/uiAction'; -import Upload, { UploadOptions } from 'react-native-background-upload' -import Config from 'react-native-config'; -import { signImage } from '../../../providers/hive/dhive'; -import reactotron from 'reactotron-react-native'; export interface UploadsGalleryModalRef { showModal: () => void; @@ -66,7 +62,7 @@ export const UploadsGalleryModal = forwardRef( const dispatch = useAppDispatch(); const mediaQuery = useMediaQuery(); - // const mediaUploadMutation = useMediaUploadMutation(); + const mediaUploadMutation = useMediaUploadMutation(); const pendingInserts = useRef([]); @@ -227,97 +223,34 @@ export const UploadsGalleryModal = forwardRef( - let sign = await signImage(media, currentAccount, pinCode); - - - const _options: UploadOptions = { - url: `${Config.NEW_IMAGE_API}/hs/${sign}`, - path: Platform.select({ - ios: 'file://' + media.path, - android: media.path.replace('file://', '') - }), - method: 'POST', - type: 'multipart', - maxRetries: 2, // set retry count (Android only). Default 2 - headers: { - 'Authorization': Config.NEW_IMAGE_API, // Config.NEW_IMAGE_API - 'Content-Type': 'multipart/form-data', + await mediaUploadMutation.mutateAsync( + { + media, + addToUploads: !shouldInsert, }, - field: 'uploaded_media', - // Below are options only supported on Android - notification: { - enabled: true + { + onSuccess: (data) => { + console.log('upload successfully', data, media, shouldInsert); + if (data && data.url && shouldInsert) { + _handleMediaInsertion({ + filename: media.filename, + url: data.url, + text: '', + status: MediaInsertStatus.READY, + }); + } + }, + onSettled: () => { + if (setIsUploading) { + setIsUploading(false); + } + setIsAddingToUploads(false); + }, + onError: (err) => { + throw err; + }, }, - useUtf8Charset: true - } - - Upload.startUpload(_options).then((uploadId) => { - - reactotron.log('Upload started') - - //TODO: manage insertions here - - Upload.addListener('progress', uploadId, (data) => { - reactotron.log(`Progress: ${data.progress}%`, data) - }) - Upload.addListener('error', uploadId, (data) => { - reactotron.log(`Error`, data) - throw data.error; - }) - Upload.addListener('cancelled', uploadId, (data) => { - reactotron.log(`Cancelled!`, data) - throw new Error("Upload Cancelled") - }) - Upload.addListener('completed', uploadId, (data) => { - // data includes responseCode: number and responseBody: Object - reactotron.log('Completed!', data) - console.log('upload successfully', data, media, shouldInsert); - const _respData = JSON.parse(data.responseBody); - if (_respData && _respData.url && shouldInsert) { - _handleMediaInsertion({ - filename: media.filename, - url: _respData.url, - text: '', - status: MediaInsertStatus.READY, - }); - } - - setIsUploading(false); - setIsAddingToUploads(false); - }) - }).catch((err) => { - reactotron.log('error', err) - throw err; - }) - - // await mediaUploadMutation.mutateAsync( - // { - // media, - // addToUploads: !shouldInsert, - // }, - // { - // onSuccess: (data) => { - // console.log('upload successfully', data, media, shouldInsert); - // if (data && data.url && shouldInsert) { - // _handleMediaInsertion({ - // filename: media.filename, - // url: data.url, - // text: '', - // status: MediaInsertStatus.READY, - // }); - // } - // }, - // onSettled: () => { - // if (setIsUploading) { - // setIsUploading(false); - // } - // setIsAddingToUploads(false); - // }, - // onError: (err) => { - // throw err; - // }, - // }, - // ); + ); } catch (error) { diff --git a/src/providers/queries/editorQueries.ts b/src/providers/queries/editorQueries.ts index 04506ba95..11ed9c552 100644 --- a/src/providers/queries/editorQueries.ts +++ b/src/providers/queries/editorQueries.ts @@ -16,6 +16,9 @@ import { import { MediaItem, Snippet } from '../ecency/ecency.types'; import { signImage } from '../hive/dhive'; import QUERIES from './queryKeys'; +import Upload, { UploadOptions } from 'react-native-background-upload' +import Config from 'react-native-config'; +import { Platform } from 'react-native'; interface SnippetMutationVars { id: string | null; @@ -84,14 +87,69 @@ export const useMediaUploadMutation = () => { const currentAccount = useAppSelector((state) => state.account.currentAccount); const pinCode = useAppSelector((state) => state.application.pin); + const _uploadMedia = ({ media }: MediaUploadVars) => { + + return new Promise(async (resolve, reject) => { + + try { + let sign = await signImage(media, currentAccount, pinCode); + + const _options: UploadOptions = { + url: `${Config.NEW_IMAGE_API}/hs/${sign}`, + path: Platform.select({ + ios: 'file://' + media.path, + android: media.path.replace('file://', '') + }), + method: 'POST', + type: 'multipart', + maxRetries: 2, // set retry count (Android only). Default 2 + headers: { + 'Authorization': Config.NEW_IMAGE_API, // Config.NEW_IMAGE_API + 'Content-Type': 'multipart/form-data', + }, + field: 'uploaded_media', + // Below are options only supported on Android + notification: { + enabled: true + }, + useUtf8Charset: true + } + + const uploadId = await Upload.startUpload(_options) + + console.log('Upload started', uploadId) + + Upload.addListener('progress', uploadId, (data) => { + console.log(`Progress: ${data.progress}%`, data) + }) + Upload.addListener('error', uploadId, (data) => { + console.log(`Error`, data) + throw data.error; + }) + Upload.addListener('cancelled', uploadId, (data) => { + console.log(`Cancelled!`, data) + throw new Error("Upload Cancelled") + }) + Upload.addListener('completed', uploadId, (data) => { + // data includes responseCode: number and responseBody: Object + console.log('Completed!', data) + const _respData = JSON.parse(data.responseBody); + resolve(_respData) + }) + } catch (err) { + console.warn("Meida Upload Failed", err); + reject(err) + } + }) + } + + return useMutation( - async ({ media }) => { - console.log('uploading media', media); - let sign = await signImage(media, currentAccount, pinCode); - return await uploadImage(media, currentAccount.name, sign); + (vars) => { + + return _uploadMedia(vars); }, { - retry: 3, onSuccess: (response, { addToUploads }) => { if (addToUploads && response && response.url) { console.log('adding image to gallery', response.url);