Are mediaManager.getFileUrl and getFileInfo working as the docs claim?

Ask the community
,
1

Greetings. I was doing a little investigating on the wix-media-backend mediaManager API and I am not getting what I think is consistent with the docs. Could someone in charge of these APIs take a look and either correct me, or correct the docs?

Thanks in advance…

At the end of this post, please look at the FileInfo object returned by getFileInfo.

First inconsistency: getFileUrl doesn’t return what the docs say it should return.

The docs for getFileUrl say:
https://www.wix.com/corvid/reference/wix-media-backend.mediaManager.html#getFileUrl
Promise
Fulfilled - The file’s URL.

/* Returns a promise that resolves to:

Looking at the FileInfo object at the end of this post, I might expect that calling this would return either the fileUrl from the Image’s FileInfo, or the Media Manager URL:

// fileUrl as returned from getFileInfo

"fileUrl": "wix:image://v1/c565a4_40e71b65bf634bef97bd55d700749f77~mv2.jpg/0001_2_s.jpg#originWidth=600&originHeight=400"

// Media Manager URL provided when I open media manager and copy URL
https://static.wixstatic.com/media/c565a4_40e71b65bf634bef97bd55d700749f77~mv2.jpg

However, it does not. It returns something that looks like a download URL with a token:

https://download-files.wix.com/_api/download/file?downloadToken=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJ1cm46YXBwOmU2NjYzMGU3MTRmMDQ5MGFhZWExZjE0OWIzYjY5ZTMyIiwic3ViIjoidXJuOmFwcDplNjY2MzBlNzE0ZjA0OTBhYWVhMWYxNDliM2I2OWUzMiIsImF1ZCI6WyJ1cm46c2VydmljZTpmaWxlLmRvd25sb2FkIl0sImlhdCI6MTU5NTM1MDI4OCwiZXhwIjoxNjAwNTM0Mjk4LCJqdGkiOiJkNTkwZmMxZDY5ZTMiLCJwYXlsb2FkIjp7InBhdGgiOiIvbWVkaWEvYzU2NWE0XzQwZTcxYjY1YmY2MzRiZWY5N2JkNTVkNzAwNzQ5Zjc3fm12Mi5qcGciLCJhdHRhY2htZW50Ijp7ImZpbGVuYW1lIjoiMDAwMV8yX3MuanBnIn19fQ.NJC38B5Yg0B11WTazj8ITjvozTqtqit2Wh903_s9Ei0

What is this returning? What should it return? Why doesn’t it return anything that resembles EITHER the FileInfo.fileUrl, or the Media Manager URL?

Second inconsistency: getFileInfo should work with the parameter fileUrl, but doesn’t

The docs for getFileInfo say that I should be able to use as a parameter EITHER the filename, OR the value from the collection:

Here is what the docs say:

Pass one of the following in the file parameter:

  • Media Manager file name:

  • As returned in the fileName property from the importFile() and upload() functions. Make sure to pass the file name only, without the URL and without the string “Media” in the name.

  • Wix URL:

  • As found in image type fields of database collections.

  • As returned in the fileUrl property from the importFile() and upload() functions.

When I dump the image field from my database collection (.csv dump), I see the following.

(This is also the same as what the Media Manager gives me when I open up the image and click "copy URL.)

https://static.wixstatic.com/media/c565a4_40e71b65bf634bef97bd55d700749f77~mv2.jpg

So, it seems like there are 2 different URLs. The Media Manager URL, and the FileInfo.fileUrl. I’m not actually sure why.

However, when I pass that value into getFileInfo, I get a 405

{"error_code":405,"error_description":"The method is not allowed for the requested URL.","error_info":null}

Likewise, when I pass in the URL as returned from getFileInfo, I get a 405. FWIW, I tried passing all the following permutations as the fileUrl:

"wix:image://v1/c565a4_40e71b65bf634bef97bd55d700749f77~mv2.jpg/0001_2_s.jpg#originWidth=600&originHeight=400"
"wix:image://v1/c565a4_40e71b65bf634bef97bd55d700749f77~mv2.jpg/0001_2_s.jpg"
"wix:image://v1/c565a4_40e71b65bf634bef97bd55d700749f77~mv2.jpg/"
"wix:image://v1/c565a4_40e71b65bf634bef97bd55d700749f77~mv2.jpg"

Here is the object that is returned from getFileInfo():

{
  "fileName": "c565a4_40e71b65bf634bef97bd55d700749f77~mv2.jpg",
  "fileUrl": "wix:image://v1/c565a4_40e71b65bf634bef97bd55d700749f77~mv2.jpg/0001_2_s.jpg#originWidth=600&originHeight=400",
  "hash": "3527d5168bebda7969d67507e326de1d",
  "sizeInBytes": 67023,
  "mimeType": "image/jpeg",
  "mediaType": "image",
  "isPrivate": false,
  "iconUrl": "wix:image://v1/c565a4_40e71b65bf634bef97bd55d700749f77~mv2.jpg/0001_2_s.jpg#originWidth=600&originHeight=400",
  "parentFolderId": "797ef1b0d539441d9d100caf17969ef7",
  "originalFileName": "0001_2_s.jpg",
  "width": 600,
  "height": 400,
  "labels": [
    "Plant",
    "Flower",
    "Leaf",
    "Groundcover",
    "Flowering plant",
    "Herb",
    "Leaf vegetable"
  ],
  "opStatus": "READY"
}
2

Great investigating.
Hopefully this will add some clarity:
Creating a URL for a media file or The truth about getFileURL

3

I just looked at the API docs for getFileURL and I see that they now say:

“returns a Promise that resolves to a download URL and token for the specified file.”

So thank you for correcting the docs.

What led me to my (exhaustive) research on MediaManager APIs was a need to be able to PROGRAMMATICALLY get the Wix file info from an image that has already been uploaded to the Wix MediaManager. If you upload it yourself programmatically, you can capture the file info and save it somewhere. But if the image is ALREADY in the file manager, there is no API with which you can programmatically get the file info.

My particular use case was that I was building a site from an old site that already had thousands of images for the product catalog. I was not about to hand upload each and every one and manually attach them to a gallery in each and every row of the product database (I did that once, and it literally took me 2 weeks of hand clicking through the very slow Wix MediaManager UI). Instead, I bulk uploaded them using the Wix UI. Once there, though, it was impossible for me to programmatically insert them into Gallery objects for each product in the database in any kind of straightforward or supported way, because there was no way I could map the filename that I knew to the filename that Wix MediaManager created.

For example, I had a map in my old database between a product ID and an image filename:
ID: product0003
IMG: 0003_4_s.jpg
IMG: 0003_2_b.jpg

For each row in the database, I had to find the corresponding images in the MediaManager, and insert them into that row’s gallery object.

You wouldn’t believe what I had to do.

I created a dummy test page and put a gallery on it. I added every single image in the MediaManger into the gallery. Then in onReady, I looped through every item in the gallery and dumped the gallery blob to the console. Then I copied/pasted the entire console output to my own text file.

From there, I had to run an elaborate regex to extract the filename I knew from the gallery blob. (make a mental note of the area I highlighted in bold ) so that I could map it back to the data blobs that I was inserting for each row.
Gallery blob.src:
wix:image://v1/c565a4_eb72acb0d54e41ce860e0a8960cf8e2c~mv2.jpg/ 0003_4_sjpg #originWidth=800&originHeight=600

I needed to turn this into:
0003_4_s.jpg

So that I could map it to the correct row in the product database (which I saved my original product ID of 0003 in addition to the Wix generated UUID)

Here is my “beloved” regex:

var pre_regex = ‘wix:image://v1/[A-Z|a-z|0-9|_]{39}~mv2.jpg/’;
var post_regex = ‘[#]*’;
var pre_removed = src.replace(src.match(pre_regex), ‘’);
var post_start_idx = pre_removed.search(‘#’);
var orig_filename = pre_removed.substring(0, post_start_idx);
var plant_id = orig_filename.substring(0,4);
var final_filename = orig_filename.replace(orig_filename.match(‘jpg’), ‘.jpg’);

The code above…thankfully…allowed me to take a gallery blob, map it to the correct database row ID, and then insert the blob lock stock and barrel into the gallery field of the correct row in the new database I was creating. I went from gallery image to gallery image.

The next thing I needed to do was to insert a single image into each row of the database (just taking the first image from the gallery). Remember, the only thing I have is the gallery blob. There’s no easy/programmatic way to put 1000 single images on a page and read them programmatically. The only way to programmatically get all of the MediaManager file info is to put everything into a single gallery and loop through it.

So…now I have to go from gallery image blob to image blob.

BTW, If I go manually into the Wix media manager and select “copy URL”, I get this:
https://static.wixstatic.com/media/c565a4_48aa3479b4734e28b7325ce0733b37de~mv2.jpg

However…if I manually insert an image into a database, and then dump the database, the string that is stored in the database is:
wix:image://v1/c565a4_eb72acb0d54e41ce860e0a8960cf8e2c~mv2.jpg/ 0003_4_s.jpg #originWidth=800&originHeight=600

The wixstatic URL doesn’t work as an image field in the database. You need the image field in the form that the database understands.

Again, please make a mental note of the areas I highlighted in bold.

I’ll distill it here:
Gallery src blob from DB: 0003_4_sjpg
Image src from DB: 0003_4_s.jpg

Remember…all I have access to programmatically is a gallery blob. I want to be able to programmatically add the first image in a gallery into a separate image field in the same row. This means, I have to digest a gallery blob, and produce an image blob…which means…finding the place where the missing . should be, and inserting it. This is the only thing that is different about the two blobs. Here they are side by side for comparison
Gallery:
wix:image://v1/c565a4_eb72acb0d54e41ce860e0a8960cf8e2c~mv2.jpg/ 0003_4_sjpg #originWidth=800&originHeight=600

Image:
wix:image://v1/c565a4_eb72acb0d54e41ce860e0a8960cf8e2c~mv2.jpg/ 0003_4_s.jpg #originWidth=800&originHeight=600

So then…it was back to the regex drawing board to find the place in the string with the missing . and add it in. (I’ll spare you the next “beloved” regex that I had to use, but I basically had to part out the blob into 3 strings. The wix:image part then the bolded part, then the part from the # to the end. Once I had the bolded part in a separate string, I could turn jpg into .jpg. Then concat all the strings back together. OMG.)

Why…oh why, Wix, do you do this to me? Can’t you use the SAME PATTERN in a gallery src blob as you do in an image blob?

Or better yet…CAN’T YOU GIVE ME PROGRAMMATIC ACCESS TO THE FILENAMES IN THE MEDIA MANAGER SO I DON’T HAVE TO GO THROUGH THIS NIGHTMARE???

Even if all I wanted was the wixstatic URL in order to create an img tag on a page, there is STILL NO WAY TO PROGRAMMATICALLY GET IT!!!

Please, Wix, can you do some work on the MediaManager, Gallery, and Image APIs? They are all incompatible, and are SORELY LACKING in both clarity and usefulness.

Thank you

4

+1, next client who asks for wix vs my own server will tell him the lowest price for my own server because of this kind of issues… wix is still green for real world development as I see it on 2020. Hope this changes.

5

Hi,
You can workaround this by using the http-functions.js feature. You can find my code in this StackOverflow answer: https://stackoverflow .com/questions/67602025/how-to-create-a-list-of-wix-media-folder-images-with-url-and-name/72003236#72003236

6

Actually, since posting my original question, Wix/Velo has exposed an API to access the filesystem. It’s SOOOOO much better than all the hacks I had to do!

7

Where is the info on the “API to access the filesystem”? Doing a search in the VeloReference for it fails to find any links. Thanks.