How can I read file content from collection?

Ask the community
, ,
1

I need to display hiking tracks on map.
Tracks are stored in collection as gpx files: xml files containing gps coordinates.

1470×806 220 KB

I`ve managed to do that, but in a very tricky way, here is the code:

import { xml2js } from ‘backend/xml2js.jsw’ ;
import { fetch } from ‘wix-fetch’ ;
const wixSiteId = ‘446028c3-2d5a-4606-9c46-62c885db8c11’ ; // siteId found in page source code (<meta http-equiv=“X-Wix-Meta-Site-Id”)

$w . onReady ( function () {
var track = $w ( “#dynamicDataset” ). getCurrentItem ();
var fname = /^./(.)// . exec ( track . gps )[ 1 ]; // extract filename from value “wix:document://v1/ugd/537c68_0de0b12f8a084904a64e308145e8a5e8.gpx/OriginalFIleName.gpx”
var gpxUrl = https:// ${ wixSiteId } .filesusr.com/ugd/ ${ fname } ; // url to download file
getGpxData ( gpxUrl );
});

async function getGpxData ( gpxUrl ) {
var xml = ‘’ ;
await fetch ( gpxUrl , { “method” : “get” }) // download file
. then ( ( httpResponse ) => {
if ( httpResponse . ok ) {
return httpResponse . text ();
} else {
return Promise . reject ( “Fetch did not succeed” );
}
} )
. then (
responseText => {
xml = responseText ;
})
. catch ( err => console . log ( err ));

let jsData = await xml2js ( xml ); // parse xml
jsData = jsData [ ‘gpx’ ][ ‘trk’ ][ ‘trkseg’ ];
var points = ;

jsData . forEach ( function ( trkseg ,  snum ,  segArr ) {  // extract needed data   
    trkseg [ 'trkpt' ]. forEach ( function  ( trkpt ,  pnum ,  ptArr ){ 
        points . push ( trkpt [ "_attributes" ]);

});
});

$w ( "#gMap" ). postMessage ( points );  // pass data to the map

}
First problem: I could not find the way to read file content from the collection. The collection field returns a string like " wix:document://v1/ugd/537c68_0de0b12f8a084904a64e308145e8a5e8.gpx/OriginalFIleName.gpx "
So I am trying to download that file. But I also failed to find a way to get a direct url to file. I can add a button with downoad action onclic, but I cant get the url in my code. I found out that link consists of wix site id and file name. I cant get site id in my code, so I hardcoded it and then combined the url from site id and file name.
Then I am parsing xml to js.

The right way would be if I could read the file content on the backend, parse it to json, and only after that pass it to page.
The question is: how to read file content from collection?
Another question is: how to get an url to download file from my code?
Is this pattern permanent?: https:// ${ wixSiteId } .filesusr.com/ugd/ ${ fname }

2

Something like:

const wixURL = "wix:document://v1/ugd/537c68_0de0b12f8a084904a64e308145e8a5e8.gpx/OriginalFIleName.gpx";

const exteralURL = "https://5361b474-b6b7-4a60-afa5-eb7a001ddcee.usrfiles.com/ugd/" + wixURL.split("/")[4];
3

It looks better than regex but answering none of my questions

4

@oshulyak I thought you were asking how to convert the internal wix url (as stored in the database) to an external, direct URL to the file.