mirror of
https://github.com/ecency/ecency-mobile.git
synced 2024-11-30 06:12:37 +03:00
intgrated upload service with uploads mutation
This commit is contained in:
parent
7db5bd79a5
commit
28732671b4
@ -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) {
|
||||
|
@ -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);
|
||||
|
Loading…
Reference in New Issue
Block a user