Open uploaded document instead of dowloading it

Hi,
I’m building a big system with Velo, when the admin uploads documents, and employees users need to open them for their missions.
Currently I only managed to create download links for the documents, but what I really need is to give the users the option to open the documents, instead of dowloading them.
In Advance, I’m not using the wix documents field. Instead I want to use 2 fields: url, and title, since I need them in fiew totally different places in the system as urls for file openning.
Another issue is the document token, which is very problematic in case these documents are in multiple everyday use.
I tried to use both backend functions:

export async function myGetFileUrl(fileUrl) {
    return mediaManager.getFileUrl(fileUrl);
}
export async function getFileInfo(fileUrl) {
  return mediaManager.getFileInfo(fileUrl);
}

But unfortunatilly, both of the returns same structure with a token. Both of the creates a download link.
Even when connecting the documents in the datasetes, I only have the option to download, but not to open.

Can anyone please assist?
Thanks a lot,
Dafna :pray::pray::pray:

1 Like

just put this into the wix AI assistant and this is the result. have not tested yet or if this is what you require.

Yes, you can achieve this without using wix:document. Instead, you can use the wix-media-backend module’s getFiles function to get the URL of the uploaded document. Then, you can use this URL to set the link property of an element, such as an image or a button, to open the document when the element is clicked.

Here’s a step-by-step guide on how to do this:

  1. First, import the wix-media-backend module at the top of your backend file (let’s call it media.jsw):

InsertCopy

import { mediaManager } from 'wix-media-backend';
  1. Then, define a function to get the URL of the uploaded document. In this function, you’ll use the getFiles function of the mediaManager object to get the file’s information, including its URL:

InsertCopy

export async function getDocumentUrl(documentName) {
    const files = await mediaManager.getFiles('Documents');
    const document = files.items.find(file => file.name === documentName);
    return document.url;
}

In this function, 'Documents' is the name of the folder where the document is stored, and documentName is the name of the document.

  1. Now, in your frontend code, import the getDocumentUrl function and use it to set the link property of an element. For example, if you have an image with the ID #myImage, you can do this:

InsertCopy

import { getDocumentUrl } from 'backend/media';

$w.onReady(async function () {
    const documentUrl = await getDocumentUrl('filename.xls');
    $w('#myImage').link = documentUrl;
});

In this code, 'filename.xls' is the name of the document. When the image is clicked, the document will open in the same browser tab.

If you want the document to open in a new browser tab, you can set the target property of the image to '_blank':

InsertCopy

$w('#myImage').target = '_blank';

Remember to replace 'filename.xls' and '#myImage' with the actual name of your document and the actual ID of your image, respectively.

Thank you so much for this reply!
It looks great, except of the following part, that gives an error:
await mediaManager.getFiles(‘Documents’);
There is no mediaManager “getFiles()” function.
BR:)

Attached are logs for 3 mediaManager for same upload.
It’s clear that both of them are producing same reply:

myGetFileUrl:
https://download-files.wixmp.com/ugd/9111f3_41c70d5cf4494c9eab57030ae70c1f99.rtf?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJ1cm46YXBwOmU2NjYzMGU3MTRmMDQ5MGFhZWExZjE0OWIzYjY5ZTMyIiwic3ViIjoidXJuOmFwcDplNjY2MzBlNzE0ZjA0OTBhYWVhMWYxNDliM2I2OWUzMiIsImF1ZCI6WyJ1cm46c2VydmljZTpmaWxlLmRvd25sb2FkIl0sImlhdCI6MTcwMTUwMTEzNSwiZXhwIjoxNzAxNTM3MTQ1LCJqdGkiOiIyMmZmYjE4Ny1jNjM5LTQwZjMtOGJhZS1hZGEzZmFhM2MzODciLCJvYmoiOltbeyJwYXRoIjoiL3VnZC85MTExZjNfNDFjNzBkNWNmNDQ5NGM5ZWFiNTcwMzBhZTcwYzFmOTkucnRmIn1dXSwiZGlzIjp7ImZpbGVuYW1lIjoibnVyLnJ0ZiIsInR5cGUiOiJhdHRhY2htZW50In19.7Gp6ea_YeEYwPDTp48vCJyN1XJWHeu4bk15zY6omlrI

myGetDownloadUrl: “https://download-files.wixmp.com/ugd/9111f3_41c70d5cf4494c9eab57030ae70c1f99.rtf?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJ1cm46YXBwOmU2NjYzMGU3MTRmMDQ5MGFhZWExZjE0OWIzYjY5ZTMyIiwic3ViIjoidXJuOmFwcDplNjY2MzBlNzE0ZjA0OTBhYWVhMWYxNDliM2I2OWUzMiIsImF1ZCI6WyJ1cm46c2VydmljZTpmaWxlLmRvd25sb2FkIl0sImlhdCI6MTcwMTUwMTEzNiwiZXhwIjoxNzAxNTM3MTQ2LCJqdGkiOiI3YWE0MWRhZS05ZTA4LTQ3MTItODUwMi01YWQ4NTdmZjUyNzgiLCJvYmoiOltbeyJwYXRoIjoiL3VnZC85MTExZjNfNDFjNzBkNWNmNDQ5NGM5ZWFiNTcwMzBhZTcwYzFmOTkucnRmIn1dXSwiZGlzIjp7ImZpbGVuYW1lIjoibnVyLnJ0ZiIsInR5cGUiOiJhdHRhY2htZW50In19._xELHX-aTG4Q-1HuQICcQj2JDCICm-lyHzpuArruXXI

getFileInfo: {“mediaType”:“document”,“isPrivate”:false,“sizeInBytes”:685352,“fileUrl”:“wix:document://v1/9111f3_41c70d5cf4494c9eab57030ae70c1f99.rtf/nur.rtf”,“fileName”:“9111f3_41c70d5cf4494c9eab57030ae70c1f99.rtf”,“originalFileName”:“nur.rtf”,“mimeType”:“application/msword”,“hash”:“3756c27716b2b9518bd28adb2123720d”,“parentFolderId”:“visitor-uploads”,“_createdDate”:“2023-12-02T07:12:23.000Z”,“_updatedDate”:“2023-12-02T07:12:23.000Z”}

thats A.I. for you. Will have a look into it further if I get a chance. Busy time of year