From 2cb57f3b97b9ab138692f3f30c99eff244616f85 Mon Sep 17 00:00:00 2001
From: 1aerostorm <aerostorm1@gmail.com>
Date: Wed, 22 Nov 2023 21:02:13 +0000
Subject: [PATCH] NFT - upload, proxying

---
 .../modules/nft/CreateNFTCollection.jsx       | 84 ++++++++++++++++++-
 app/components/modules/nft/IssueNFTToken.jsx  | 84 ++++++++++++++++++-
 app/redux/UserSaga_UploadImage.js             |  5 +-
 3 files changed, 166 insertions(+), 7 deletions(-)

diff --git a/app/components/modules/nft/CreateNFTCollection.jsx b/app/components/modules/nft/CreateNFTCollection.jsx
index d953d1d..b03745b 100644
--- a/app/components/modules/nft/CreateNFTCollection.jsx
+++ b/app/components/modules/nft/CreateNFTCollection.jsx
@@ -3,6 +3,7 @@ import tt from 'counterpart'
 import { connect, } from 'react-redux'
 import CloseButton from 'react-foundation-components/lib/global/close-button'
 import { Formik, Form, Field, ErrorMessage, } from 'formik'
+import Dropzone from 'react-dropzone'
 
 import Expandable from 'app/components/elements/Expandable'
 import LoadingIndicator from 'app/components/elements/LoadingIndicator'
@@ -226,9 +227,63 @@ class CreateNFTCollection extends Component {
         }
     }
 
+    uploadImage = (file, name = '', values, setFieldValue) => {
+        const {notify} = this.props
+        const {uploadImage} = this.props
+        this.setState({imageUploading: true})
+        uploadImage(file, progress => {
+            if (progress.url) {
+                setFieldValue('image', progress.url)
+                this.setState({
+                    showImage: true
+                })
+                this.updateJSONMetadata(values, setFieldValue, { image: progress.url })
+            }
+            if (progress.error) {
+                const { error } = progress;
+                notify(error, 10000)
+            }
+            this.setState({ imageUploading: false })
+        })
+    }
+
+    onDropImage = (acceptedFiles, rejectedFiles, values, setFieldValue) => {
+        if (!acceptedFiles.length) {
+            if (rejectedFiles.length) {
+                alert(tt('reply_editor.please_insert_only_image_files'))
+                console.log('onDrop Rejected files: ', rejectedFiles)
+            }
+            return
+        }
+        const file = acceptedFiles[0]
+        this.uploadImage(file, file.name, values, setFieldValue)
+    }
+
+    onUploadImageClick = () => {
+        this.dropzone.open();
+    }
+
     render() {
         const { onClose, } = this.props;
-        const { submitting, showImage, errorMessage, hideErrors } = this.state
+        const { submitting, showImage, errorMessage, hideErrors, imageUploading } = this.state
+
+        const selectorStyleCover = imageUploading ?
+            {
+                whiteSpace: `nowrap`,
+                display: `flex`,
+                alignItems: `center`,
+                paddingLeft: '0px',
+                paddingRight: '12px',
+                pointerEvents: `none`,
+                cursor: `default`,
+                opacity: `0.6`
+            } :
+            {
+                display: `flex`,
+                alignItems: `center`,
+                paddingLeft: '0px',
+                paddingRight: '12px',
+            }
 
         return (<div className='CreateNFTCollection'>
             <CloseButton onClick={onClose} />
@@ -287,8 +342,18 @@ class CreateNFTCollection extends Component {
                 <div className='row'>
                     <div className='column small-12'>
                         <div className='input-group' style={{marginBottom: 5}}>
-                            <Field name='image' type='text' onBlur={this.onImageBlur}
-                                onChange={(e) => this.onImageChange(e, values, setFieldValue)} />
+                            <a onMouseDown={this.onUploadImageClick}
+                                style={selectorStyleCover}>
+                                {imageUploading ? `${tt(`user_saga_js.image_upload.uploading`)} ...` : tt(`g.upload`)}
+                            </a>
+                            <Dropzone style={{width: `100%`}}
+                                    onDrop={(af, rf) => this.onDropImage(af, rf, values, setFieldValue)}
+                                    className={'none'}
+                                    disableClick multiple={false} accept="image/*"
+                                    ref={(node) => { this.dropzone = node; }}>
+                                <Field name='image' type='text' onBlur={this.onImageBlur}
+                                    onChange={(e) => this.onImageChange(e, values, setFieldValue)} />
+                            </Dropzone>
                             <img src={values.image || 'empty'} className='image-preview' style={{ visibility: (showImage && values.image) ? 'visible' : 'hidden' }} />
                         </div>
                         <ErrorMessage name='image' component='div' className='error' />
@@ -373,6 +438,19 @@ export default connect(
     },
 
     dispatch => ({
+        uploadImage: (file, progress) => {
+            dispatch({
+                type: 'user/UPLOAD_IMAGE',
+                payload: {file, progress},
+            })
+        },
+        notify: (message, dismiss = 3000) => {
+            dispatch({type: 'ADD_NOTIFICATION', payload: {
+                key: "settings_" + Date.now(),
+                message,
+                dismissAfter: dismiss}
+            })
+        },
         createCollection: (
             name, json_metadata, max_token_count, currentUser, successCallback, errorCallback
         ) => {
diff --git a/app/components/modules/nft/IssueNFTToken.jsx b/app/components/modules/nft/IssueNFTToken.jsx
index df971b6..1b07785 100644
--- a/app/components/modules/nft/IssueNFTToken.jsx
+++ b/app/components/modules/nft/IssueNFTToken.jsx
@@ -4,6 +4,7 @@ import { connect, } from 'react-redux'
 import CloseButton from 'react-foundation-components/lib/global/close-button'
 import { Formik, Form, Field, ErrorMessage, } from 'formik'
 import { Asset, validateAccountName } from 'golos-lib-js/lib/utils'
+import Dropzone from 'react-dropzone'
 
 import Expandable from 'app/components/elements/Expandable'
 import LoadingIndicator from 'app/components/elements/LoadingIndicator'
@@ -195,9 +196,63 @@ class IssueNFTToken extends Component {
         }
     }
 
+    uploadImage = (file, name = '', values, setFieldValue) => {
+        const {notify} = this.props
+        const {uploadImage} = this.props
+        this.setState({imageUploading: true})
+        uploadImage(file, progress => {
+            if (progress.url) {
+                setFieldValue('image', progress.url)
+                this.setState({
+                    showImage: true
+                })
+                this.updateJSONMetadata(values, setFieldValue, { image: progress.url })
+            }
+            if (progress.error) {
+                const { error } = progress;
+                notify(error, 10000)
+            }
+            this.setState({ imageUploading: false })
+        })
+    }
+
+    onDropImage = (acceptedFiles, rejectedFiles, values, setFieldValue) => {
+        if (!acceptedFiles.length) {
+            if (rejectedFiles.length) {
+                alert(tt('reply_editor.please_insert_only_image_files'))
+                console.log('onDrop Rejected files: ', rejectedFiles)
+            }
+            return
+        }
+        const file = acceptedFiles[0]
+        this.uploadImage(file, file.name, values, setFieldValue)
+    }
+
+    onUploadImageClick = () => {
+        this.dropzone.open();
+    }
+
     render() {
         const { issueName, issueNum, cprops, onClose, } = this.props;
-        const { submitting, showImage, errorMessage } = this.state
+        const { submitting, showImage, errorMessage, imageUploading } = this.state
+
+        const selectorStyleCover = imageUploading ?
+            {
+                whiteSpace: `nowrap`,
+                display: `flex`,
+                alignItems: `center`,
+                paddingLeft: '0px',
+                paddingRight: '12px',
+                pointerEvents: `none`,
+                cursor: `default`,
+                opacity: `0.6`
+            } :
+            {
+                display: `flex`,
+                alignItems: `center`,
+                paddingLeft: '0px',
+                paddingRight: '12px',
+            }
 
         return (<div className='IssueNFTToken'>
             <CloseButton onClick={onClose} />
@@ -271,8 +326,18 @@ class IssueNFTToken extends Component {
                 <div className='row'>
                     <div className='column small-12'>
                         <div className='input-group' style={{marginBottom: 5}}>
-                            <Field name='image' type='text' onBlur={this.onImageBlur}
-                                onChange={(e) => this.onImageChange(e, values, setFieldValue)} />
+                            <a onMouseDown={this.onUploadImageClick}
+                                style={selectorStyleCover}>
+                                {imageUploading ? `${tt(`user_saga_js.image_upload.uploading`)} ...` : tt(`g.upload`)}
+                            </a>
+                            <Dropzone style={{width: `100%`}}
+                                    onDrop={(af, rf) => this.onDropImage(af, rf, values, setFieldValue)}
+                                    className={'none'}
+                                    disableClick multiple={false} accept="image/*"
+                                    ref={(node) => { this.dropzone = node; }}>
+                                <Field name='image' disabled={imageUploading} type='text' onBlur={this.onImageBlur}
+                                    onChange={(e) => this.onImageChange(e, values, setFieldValue)} />
+                            </Dropzone>
                             <img src={values.image || 'empty'} className='image-preview' style={{ visibility: (showImage && values.image) ? 'visible' : 'hidden' }} />
                         </div>
                         <ErrorMessage name='image' component='div' className='error' />
@@ -336,6 +401,19 @@ export default connect(
     },
 
     dispatch => ({
+        uploadImage: (file, progress) => {
+            dispatch({
+                type: 'user/UPLOAD_IMAGE',
+                payload: {file, progress},
+            })
+        },
+        notify: (message, dismiss = 3000) => {
+            dispatch({type: 'ADD_NOTIFICATION', payload: {
+                key: "settings_" + Date.now(),
+                message,
+                dismissAfter: dismiss}
+            })
+        },
         issueToken: (
             name, to, json_metadata, currentUser, successCallback, errorCallback
         ) => {
diff --git a/app/redux/UserSaga_UploadImage.js b/app/redux/UserSaga_UploadImage.js
index b0f73c7..5f5f856 100644
--- a/app/redux/UserSaga_UploadImage.js
+++ b/app/redux/UserSaga_UploadImage.js
@@ -30,7 +30,7 @@ const ERRORS_MATCH = [
     ],
 ];
 
-function* uploadImage(action) {
+function* uploadImage(action) {try{
     const { file, dataUrl, filename = 'image.txt', progress, useGolosImages = false } = action.payload;
 
     function onError(txt) {
@@ -198,4 +198,7 @@ function* uploadImage(action) {
     };
 
     xhr.send(formData);
+} catch (err) {
+    console.error(err)
+}
 }