diff --git a/src/components/@shared/FormFields/FilesInput/Info.module.css b/src/components/@shared/FormFields/FilesInput/Info.module.css
index a9a95d6d8..c8687873d 100644
--- a/src/components/@shared/FormFields/FilesInput/Info.module.css
+++ b/src/components/@shared/FormFields/FilesInput/Info.module.css
@@ -31,6 +31,11 @@
padding-right: calc(var(--spacer) / 2);
}
+.hideUrl {
+ filter: blur(0.2rem);
+ user-select: none;
+}
+
.warning {
margin-top: calc(var(--spacer) / 3);
margin-left: 0;
diff --git a/src/components/@shared/FormFields/FilesInput/Info.tsx b/src/components/@shared/FormFields/FilesInput/Info.tsx
index 2f1e8b782..6f73d9b90 100644
--- a/src/components/@shared/FormFields/FilesInput/Info.tsx
+++ b/src/components/@shared/FormFields/FilesInput/Info.tsx
@@ -15,9 +15,13 @@ export default function FileInfo({
? cleanupContentType(file.contentType)
: null
+ const hideUrl = file.type === 'hidden' || false
+
return (
-
-
{file.url}
+
+
+ {hideUrl ? 'https://oceanprotocol/placeholder' : file.url}
+
- ✓ URL confirmed
{file.contentLength && - {prettySize(+file.contentLength)}
}
diff --git a/src/components/@shared/FormFields/FilesInput/index.tsx b/src/components/@shared/FormFields/FilesInput/index.tsx
index 527fb1f38..8d69164e6 100644
--- a/src/components/@shared/FormFields/FilesInput/index.tsx
+++ b/src/components/@shared/FormFields/FilesInput/index.tsx
@@ -16,7 +16,7 @@ export default function FilesInput(props: InputProps): ReactElement {
async function handleValidation(e: React.SyntheticEvent, url: string) {
// File example 'https://oceanprotocol.com/tech-whitepaper.pdf'
- e.preventDefault()
+ e?.preventDefault()
try {
const providerUrl = values?.services
@@ -43,13 +43,14 @@ export default function FilesInput(props: InputProps): ReactElement {
}
function handleClose() {
- helpers.setValue(meta.initialValue)
helpers.setTouched(false)
+ helpers.setValue(meta.initialValue)
}
return (
<>
- {field?.value?.[0]?.valid === true ? (
+ {field?.value?.[0]?.valid === true ||
+ field?.value?.[0]?.type === 'hidden' ? (
) : (
()
// This component is handled by Formik so it's not rendered like a "normal" react component,
// so handleTimeoutCustomOption is called only once.
@@ -41,6 +44,34 @@ export default function FormEditMetadata({
timeoutOptionsArray.push('Forever')
}
+ useEffect(() => {
+ // let's initiate files with empty url (we can't access the asset url) with type hidden (for UI frontend)
+ setFieldValue('files', [
+ {
+ url: '',
+ type: 'hidden'
+ }
+ ])
+
+ const providerUrl = values?.services
+ ? values?.services[0].providerUrl.url
+ : asset.services[0].serviceEndpoint
+ // if we have a sample file, we need to get the files' info before setting defaults links value
+ asset?.metadata?.links?.[0] &&
+ getFileUrlInfo(asset.metadata.links[0], providerUrl).then(
+ (checkedFile) => {
+ console.log(checkedFile)
+ // initiate link with values from asset metadata
+ setFieldValue('links', [
+ {
+ url: asset.metadata.links[0],
+ ...checkedFile[0]
+ }
+ ])
+ }
+ )
+ }, [])
+
return (