intgrated upload service with uploads mutation

This commit is contained in:
noumantahir 2023-10-13 18:56:57 +05:00
parent 7db5bd79a5
commit 28732671b4
2 changed files with 91 additions and 100 deletions

View File

@ -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<MediaInsertData[]>([]);
@ -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) {

View File

@ -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<Image, undefined, MediaUploadVars>(
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);