diff --git a/src/api/ADempiere/file-management/resource-reference.ts b/src/api/ADempiere/file-management/resource-reference.ts
index 8602aaa105..757faebc9d 100644
--- a/src/api/ADempiere/file-management/resource-reference.ts
+++ b/src/api/ADempiere/file-management/resource-reference.ts
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU General Public License
  * along with this program. If not, see <https://www.gnu.org/licenses/>.
  */
-
+import { config } from '@/utils/ADempiere/config'
 // Get Instance for connection
 import { request } from '@/utils/ADempiere/request'
 
@@ -27,6 +27,42 @@ import {
 // Utils and Helper Methods
 import { isEmptyValue } from '@/utils/ADempiere/valueUtils'
 
+/**
+ * Presigned Url
+ * @param {string} file_name
+ */
+export function requestPresignedUrl({
+  fileName
+}) {
+  return request({
+    url: `${config.adempiere.resource.url}/presigned-url/${fileName}`,
+    method: 'get',
+    isWithoutAuthorization: true,
+    params: {
+      file_name: fileName
+    }
+  })
+}
+
+/**
+ * Upload File
+ * @param {string} url
+ */
+
+export function requestUploadFile({
+  url,
+  file
+}) {
+  return request({
+    url: `${url}`,
+    method: 'put',
+    isWithoutAuthorization: true,
+    body: {
+      file
+    }
+  })
+}
+
 /**
  * Set resource reference
  * @param {number} resourceId
diff --git a/src/components/ADempiere/FieldDefinition/FieldImage.vue b/src/components/ADempiere/FieldDefinition/FieldImage.vue
index df26a0747a..95d427302c 100644
--- a/src/components/ADempiere/FieldDefinition/FieldImage.vue
+++ b/src/components/ADempiere/FieldDefinition/FieldImage.vue
@@ -169,11 +169,12 @@ import { config } from '@/utils/ADempiere/config'
 import { BEARER_TYPE } from '@/utils/auth'
 import { MIME_TYPE_IMAGE } from '@/utils/ADempiere/resource/image.ts'
 import { UUID_PATTERN } from '@/utils/ADempiere/recordUtil'
-import { RESOURCE_TYPE_IMAGE } from '@/utils/ADempiere/resource'
+// import { RESOURCE_TYPE_IMAGE } from '@/utils/ADempiere/resource'
 
 // API Request Methods
 import {
-  requestSetResourceReference,
+  requestPresignedUrl,
+  // requestSetResourceReference,
   requestDeleteResourceReference
 } from '@/api/ADempiere/file-management/resource-reference.ts'
 
@@ -251,7 +252,6 @@ export default {
     //   //   height: 200,
     //   //   operation: 'resize'
     //   // })
-    //   console.log(blobImage)
     //   return blobImage.href
     // },
     endPointUploadResource() {
@@ -328,34 +328,55 @@ export default {
           reject(false)
           return
         }
-        requestSetResourceReference({
-          resourceType: RESOURCE_TYPE_IMAGE,
-          id: this.value || -1,
-          fileName: file.name,
-          fileSize: file.size
-        }).then(response => {
-          if (response.code >= 400) {
-            reject(response)
+        requestPresignedUrl({
+          fileName: file.name
+        })
+          .then(responseUrl => {
+            fetch(responseUrl, {
+              method: 'PUT',
+              body: file
+            }).then(() => {
+              // If multiple files are uploaded, append upload status on the next line.
+            }).catch((e) => {
+              console.error(e)
+            })
+          })
+          .catch(error => {
+            showMessage({
+              message: error.message || error.result || lang.t('component.attachment.error'),
+              type: 'error'
+            })
+            reject(error)
             return
-          }
-
-          this.fileResource = response
-          this.additionalData = {
-            id: response.id
-            // file_name: response.file_name
-          }
-
-          this.value = response.resource_id
-          this.displayedValue = response.file_name
-          this.preHandleChange(this.value)
-          resolve(true)
-        }).catch(error => {
-          showMessage({
-            message: error.message || error.result || lang.t('component.attachment.error'),
-            type: 'error'
           })
-          reject(error)
-        })
+        // requestSetResourceReference({
+        //   resourceType: RESOURCE_TYPE_IMAGE,
+        //   id: this.value || -1,
+        //   fileName: file.name,
+        //   fileSize: file.size
+        // }).then(response => {
+        //   if (response.code >= 400) {
+        //     reject(response)
+        //     return
+        //   }
+
+        //   this.fileResource = response
+        //   this.additionalData = {
+        //     id: response.id
+        //     // file_name: response.file_name
+        //   }
+
+        //   this.value = response.resource_id
+        //   this.displayedValue = response.file_name
+        //   this.preHandleChange(this.value)
+        //   resolve(true)
+        // }).catch(error => {
+        //   showMessage({
+        //     message: error.message || error.result || lang.t('component.attachment.error'),
+        //     type: 'error'
+        //   })
+        //   reject(error)
+        // })
       })
     },
     handleChange(file, fileList) {
diff --git a/src/components/ADempiere/PanelInfo/Component/AttachmentManager/uploadResource.vue b/src/components/ADempiere/PanelInfo/Component/AttachmentManager/uploadResource.vue
index 76190d326a..db39d6f763 100644
--- a/src/components/ADempiere/PanelInfo/Component/AttachmentManager/uploadResource.vue
+++ b/src/components/ADempiere/PanelInfo/Component/AttachmentManager/uploadResource.vue
@@ -17,54 +17,49 @@
 -->
 
 <template>
-  <form
-    enctype="multipart/form-data"
-    @submit.prevent="notSubmitForm"
-  >
+  <span>
+    <!-- <input id="selector" type="file" multiple>
+    <button @click="upload()">Upload</button>
+    <div id="status">No uploads</div>' -->
     <el-upload
       ref="uploadComponent"
-      :action="endPointUploadResource + fileResource.id"
+      :action="action"
       class="upload-demo"
-      name="file"
-      :file-list="filesList"
-      :data="additionalData"
-      :headers="additionalHeaders"
-      :multiple="false"
       :before-upload="isValidUploadHandler"
-      :on-success="loadedSucess"
-      :on-error="handleError"
+      :multiple="false"
     >
       <el-button slot="trigger" size="small" type="primary" style="font-size: 13px;">
         <i class="el-icon-upload" />
         {{ $t('component.attachment.uploadFile') }}
       </el-button>
     </el-upload>
-  </form>
+  </span>
 </template>
 
 <script>
-import { defineComponent, computed, ref } from '@vue/composition-api'
+import { defineComponent, ref } from '@vue/composition-api'
 
-import lang from '@/lang'
-import store from '@/store'
+// import lang from '@/lang'
+// import store from '@/store'
 
 // Constants
-import { config } from '@/utils/ADempiere/config'
-import { BEARER_TYPE } from '@/utils/auth'
-import { RESOURCE_TYPE_ATTACHMENT } from '@/utils/ADempiere/resource'
+// import { config } from '@/utils/ADempiere/config'
+// import { BEARER_TYPE } from '@/utils/auth'
+// import { RESOURCE_TYPE_ATTACHMENT } from '@/utils/ADempiere/resource'
 
 // API Request Methods
 // import {
 //   // requestUploadAttachment
 // } from '@/api/ADempiere/user-interface/component/resource'
 import {
-  requestSetResourceReference
+  requestPresignedUrl
 } from '@/api/ADempiere/file-management/resource-reference.ts'
 
-// Utils and Helper Methods
-import { isEmptyValue } from '@/utils/ADempiere/valueUtils'
-import { showMessage } from '@/utils/ADempiere/notification'
-import { getToken } from '@/utils/auth'
+// // Utils and Helper Methods
+// import { isEmptyValue } from '@/utils/ADempiere/valueUtils'
+// import { showMessage } from '@/utils/ADempiere/notification'
+// import { getToken } from '@/utils/auth'
+// import { convertStringToBoolean } from '@/utils/ADempiere/formatValue/booleanFormat'
 
 export default defineComponent({
   name: 'UploadResource',
@@ -86,106 +81,61 @@ export default defineComponent({
   },
 
   setup(props) {
-    const endPointUploadResource = config.adempiere.api.url + 'file-management/resources/'
-
-    const uploadComponent = ref(null)
-    const filesList = ref([])
-    const additionalData = ref({})
-    const fileResource = ref(({}))
-
-    const additionalHeaders = computed(() => {
-      const token = getToken()
-      let bearerToken = token
-      // Json Web Token
-      if (!isEmptyValue(bearerToken) && !bearerToken.startsWith(BEARER_TYPE)) {
-        bearerToken = `${BEARER_TYPE} ${token}`
-      }
-      return {
-        Authorization: bearerToken
-      }
-    })
+    const action = ref('')
+    function upload() {
+      // // Get selected files from the input element.
+      // var files = document.querySelector('#selector').files
+      // for (var i = 0; i < files.length; i++) {
+      //   var file = files[i]
+      //   // Retrieve a URL from our server.
+      //   retrieveNewURL(file, (file, url) => {
+      //     // Upload the file to the server.
+      //     uploadFile(file, url)
+      //   })
+      // }
+    }
 
     function isValidUploadHandler(file) {
-      return new Promise((resolve, reject) => {
-        requestSetResourceReference({
-          resourceType: RESOURCE_TYPE_ATTACHMENT,
-          tableName: props.tableName,
-          recordId: props.recordId,
-          fileName: file.name,
-          fileSize: file.size
-        }).then(response => {
-          if (response.code >= 400) {
-            reject(response)
-          }
-          // endPointUploadResource += response.id
-
-          fileResource.value = response
-          additionalData.value = {
-            // resource_uuid: response.uuid,
-            id: response.id,
-            file_name: response.file_name
-          }
-          resolve(true)
-        }).catch(error => {
-          showMessage({
-            message: error.message || error.result || lang.t('component.attachment.error'),
-            type: 'error'
-          })
-          reject(error)
-        }).finally(() => {
-          // uploadComponent.value.uploadFiles = filesList.value
-          // resolve(true)
-        })
-      })
+      retrieveNewURL(file)
     }
 
-    function handleError(error, file, fileList) {
-      return showMessage({
-        type: 'error',
-        message: error.message || error.result || lang.t('component.attachment.error')
+    function retrieveNewURL(file, cb) {
+      return new Promise(resolve => {
+        requestPresignedUrl({
+          fileName: file.name.replaceAll(' ', '_')
+        })
+          .then(response => {
+            action.value = response
+            uploadFile(file, response)
+            resolve(file, response)
+          })
       })
+      // fetch(`/presignedUrl?name=${file.name}`).then((response) => {
+      //   response.text().then((url) => {
+      //     cb(file, url)
+      //   })
+      // }).catch((e) => {
+      //   console.error(e)
+      // })
     }
 
-    function loadedSucess(response, file, fileList) {
-      if (response.code >= 400) {
-        setTimeout(() => {
-          fileList.pop()
-        }, 500)
-        return handleError(
-          new Error(response.result),
-          file,
-          fileList
-        )
-      }
-
-      if (props.loadData) {
-        props.loadData({
-          resource: fileResource.value,
-          file
-        })
-      }
-      additionalData.value = {}
-
-      store.dispatch('getAttachmentFromServer', {
-        tableName: props.tableName,
-        recordId: props.recordId,
-        recordUuid: props.recordUuid
+    // ``uploadFile` accepts the current filename and the pre-signed URL. It then uses `Fetch API`
+    // to upload this file to S3 at `play.min.io:9000` using the URL:
+    function uploadFile(file, url) {
+      fetch(url, {
+        method: 'PUT',
+        body: file
+      }).then(() => {
+        // If multiple files are uploaded, append upload status on the next line.
+      }).catch((e) => {
+        console.error(e)
       })
     }
 
     return {
-      endPointUploadResource,
-      // Refs
-      uploadComponent,
-      additionalData,
-      fileResource,
-      filesList,
-      // Computeds
-      additionalHeaders,
-      // Methods
+      upload,
       isValidUploadHandler,
-      loadedSucess,
-      handleError
+      action
     }
   }
 })
diff --git a/src/components/ADempiere/PanelInfo/Component/AttachmentManager/uploadResourceOld.vue b/src/components/ADempiere/PanelInfo/Component/AttachmentManager/uploadResourceOld.vue
new file mode 100644
index 0000000000..667a71f19a
--- /dev/null
+++ b/src/components/ADempiere/PanelInfo/Component/AttachmentManager/uploadResourceOld.vue
@@ -0,0 +1,216 @@
+<!--
+ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
+Contributor(s): Edwin Betancourt EdwinBetanc0urt@outlook.com https://github.com/EdwinBetanc0urt
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program. If not, see <https:www.gnu.org/licenses/>.
+-->
+
+<template>
+  <form
+    enctype="multipart/form-data"
+    @submit.prevent="notSubmitForm"
+  >
+    <el-upload
+      ref="uploadComponent"
+      :action="endPointUploadResource + fileResource.id"
+      class="upload-demo"
+      name="file"
+      :file-list="filesList"
+      :data="additionalData"
+      :headers="additionalHeaders"
+      :multiple="false"
+      :before-upload="isValidUploadHandler"
+      :on-success="loadedSucess"
+      :on-error="handleError"
+    >
+      <el-button slot="trigger" size="small" type="primary" style="font-size: 13px;">
+        <i class="el-icon-upload" />
+        {{ $t('component.attachment.uploadFile') }}
+      </el-button>
+    </el-upload>
+  </form>
+</template>
+
+<script>
+import { defineComponent, computed, ref } from '@vue/composition-api'
+
+import lang from '@/lang'
+import store from '@/store'
+
+// Constants
+import { config } from '@/utils/ADempiere/config'
+import { BEARER_TYPE } from '@/utils/auth'
+// import { RESOURCE_TYPE_ATTACHMENT } from '@/utils/ADempiere/resource'
+
+// API Request Methods
+// import {
+//   // requestUploadAttachment
+// } from '@/api/ADempiere/user-interface/component/resource'
+import {
+  requestPresignedUrl,
+  requestUploadFile
+  // requestSetResourceReference
+} from '@/api/ADempiere/file-management/resource-reference.ts'
+
+// Utils and Helper Methods
+import { isEmptyValue } from '@/utils/ADempiere/valueUtils'
+import { showMessage } from '@/utils/ADempiere/notification'
+import { getToken } from '@/utils/auth'
+
+export default defineComponent({
+  name: 'UploadResource',
+
+  props: {
+    tableName: {
+      type: String,
+      required: true
+    },
+    recordId: {
+      type: Number,
+      default: 0
+    },
+    recordUuid: {
+      type: String,
+      default: ''
+    },
+    loadData: Function
+  },
+
+  setup(props) {
+    const endPointUploadResource = config.adempiere.api.url + 'file-management/resources/'
+
+    const uploadComponent = ref(null)
+    const filesList = ref([])
+    const additionalData = ref({})
+    const fileResource = ref(({}))
+
+    const additionalHeaders = computed(() => {
+      const token = getToken()
+      let bearerToken = token
+      // Json Web Token
+      if (!isEmptyValue(bearerToken) && !bearerToken.startsWith(BEARER_TYPE)) {
+        bearerToken = `${BEARER_TYPE} ${token}`
+      }
+      return {
+        Authorization: bearerToken
+      }
+    })
+
+    function isValidUploadHandler(file) {
+      return new Promise((resolve, reject) => {
+        requestPresignedUrl({
+          fileName: file.name
+        })
+          .then(response => {
+            requestUploadFile({
+              url: response,
+              file: file
+            })
+              .then(response => {
+                resolve(response)
+                reject(response)
+              })
+          })
+          .catch(error => {
+            showMessage({
+              message: error.message || error.result || lang.t('component.attachment.error'),
+              type: 'error'
+            })
+            reject(error)
+            return
+          })
+      })
+      //   requestSetResourceReference({
+      //     resourceType: RESOURCE_TYPE_ATTACHMENT,
+      //     tableName: props.tableName,
+      //     recordId: props.recordId,
+      //     fileName: file.name,
+      //     fileSize: file.size
+      //   }).then(response => {
+      //     if (response.code >= 400) {
+      //       reject(response)
+      //     }
+      //     // endPointUploadResource += response.id
+
+      //     fileResource.value = response
+      //     additionalData.value = {
+      //       // resource_uuid: response.uuid,
+      //       id: response.id,
+      //       file_name: response.file_name
+      //     }
+      //     resolve(true)
+      //   }).catch(error => {
+      //     showMessage({
+      //       message: error.message || error.result || lang.t('component.attachment.error'),
+      //       type: 'error'
+      //     })
+      //     reject(error)
+      //   }).finally(() => {
+      //     // uploadComponent.value.uploadFiles = filesList.value
+      //     // resolve(true)
+      //   })
+      // })
+    }
+
+    function handleError(error, file, fileList) {
+      return showMessage({
+        type: 'error',
+        message: error.message || error.result || lang.t('component.attachment.error')
+      })
+    }
+
+    function loadedSucess(response, file, fileList) {
+      if (response.code >= 400) {
+        setTimeout(() => {
+          fileList.pop()
+        }, 500)
+        return handleError(
+          new Error(response.result),
+          file,
+          fileList
+        )
+      }
+
+      if (props.loadData) {
+        props.loadData({
+          resource: fileResource.value,
+          file
+        })
+      }
+      additionalData.value = {}
+
+      store.dispatch('getAttachmentFromServer', {
+        tableName: props.tableName,
+        recordId: props.recordId,
+        recordUuid: props.recordUuid
+      })
+    }
+
+    return {
+      endPointUploadResource,
+      // Refs
+      uploadComponent,
+      additionalData,
+      fileResource,
+      filesList,
+      // Computeds
+      additionalHeaders,
+      // Methods
+      isValidUploadHandler,
+      loadedSucess,
+      handleError
+    }
+  }
+})
+</script>
diff --git a/src/utils/ADempiere/request.js b/src/utils/ADempiere/request.js
index 5b1074e8dc..6cff81516c 100644
--- a/src/utils/ADempiere/request.js
+++ b/src/utils/ADempiere/request.js
@@ -42,13 +42,15 @@ export function request(requestValues) {
   if (!isEmptyValue(config.adempiere.api.timeout) && config.adempiere.api.timeout > 0) {
     requestValues.timeout = config.adempiere.api.timeout
   }
-
   const token = getToken()
   let bearerToken = token
   // Json Web Token
   if (!isEmptyValue(bearerToken) && !bearerToken.startsWith(BEARER_TYPE)) {
     bearerToken = `${BEARER_TYPE} ${token}`
   }
+  if (requestValues.isWithoutAuthorization) {
+    bearerToken = undefined
+  }
   Object.assign(requestValues, {
     headers: {
       Authorization: bearerToken