From b2410f0114e5600b9e4d683226efe1ccb0654499 Mon Sep 17 00:00:00 2001 From: Aman Chaturvedi Date: Wed, 14 Jun 2023 14:30:03 +0530 Subject: [PATCH] TP-31697 | Image optimization changes --- src/ImageUploader.tsx | 90 +++++++++++++ src/action/caseApiActions.ts | 91 +++++++++++++ src/action/dataActions.ts | 12 +- .../form/components/ImageUpload.tsx | 28 +++- src/components/form/index.tsx | 45 +++++-- src/components/utlis/apiHelper.ts | 4 + src/local-server.js | 28 ++++ src/reducer/allCasesSlice.ts | 127 ++++++++++++++---- .../caseDetails/interactionsHandler.tsx | 41 +++++- uploads/25ed825bd95fc05adfe97a408d814af0.jpg | Bin 0 -> 2662373 bytes uploads/40bfe3d5000611c90feb89a53a1a2a5b | Bin 0 -> 2662373 bytes uploads/558ba9f23d0e23a0ffc665315ca1ba89 | Bin 0 -> 2662373 bytes uploads/file.jpeg | Bin 0 -> 2150941 bytes 13 files changed, 411 insertions(+), 55 deletions(-) create mode 100644 src/ImageUploader.tsx create mode 100644 src/local-server.js create mode 100644 uploads/25ed825bd95fc05adfe97a408d814af0.jpg create mode 100644 uploads/40bfe3d5000611c90feb89a53a1a2a5b create mode 100644 uploads/558ba9f23d0e23a0ffc665315ca1ba89 create mode 100644 uploads/file.jpeg diff --git a/src/ImageUploader.tsx b/src/ImageUploader.tsx new file mode 100644 index 00000000..44702974 --- /dev/null +++ b/src/ImageUploader.tsx @@ -0,0 +1,90 @@ +import axios from 'axios'; +import React from 'react'; +import { View, Button, Image } from 'react-native'; +import ImagePicker, { ImageLibraryOptions, launchImageLibrary } from 'react-native-image-picker'; + +class ImageUploader extends React.Component { + state = { + image: null, + }; + + selectImage = () => { + const options: ImageLibraryOptions = { + mediaType: 'photo', + quality: 1, + }; + + launchImageLibrary(options, (response) => { + if (!response.didCancel) { + console.log('response:', response); + this.setState({ image: response.assets?.[0] }); + } + }); + }; + + uploadImage = async () => { + const { image } = this.state; + + if (image) { + const formData = new FormData(); + console.log('image:', image); + + // try { + // const response = await fetch(image.uri); + // const blobData = await response.blob(); + + // formData.append('avatar', blobData, 'avatar.png'); + + // const result = await axios.post('https://0ac3-115-111-223-26.in.ngrok.io/upload', formData, { + // headers: { + // 'Content-Type': 'multipart/form-data', + // }, + // }); + + // console.log('Request successful', result.data); + // } catch (error) { + // console.error('Request failed', error); + // } + console.log('image', image); + formData.append('file[]', { + uri: image.uri, + name: 'image1.png', + type: image.type, + }); + formData.append('file[]', { + uri: image.uri, + name: 'image2.png', + type: image.type, + }); + formData.append('file[]', { + uri: image.uri, + name: 'image3.png', + type: image.type, + }); + + const response = await axios.post( + 'https://8ee6-115-111-223-26.in.ngrok.io/upload', + formData, + { + headers: { + 'Content-Type': 'multipart/form-data', + }, + } + ); + } + }; + + render() { + const { image } = this.state; + + return ( + +