Create a URL for a media file: the truth about getFileURL

So you want to create a URL to an image or video that you’ve uploaded to the Media Manager ?

The simplest way is to use a static URL like this:

let imageUrl =`https://static.wixstatic.com/media/${fileName}`;

Keep reading for what fileName really means.

There’s a bit of confusion about getFileUrl, so let’s clear some things up.

  • getFileURL gives you a download URL with a token.

  • The token will expire after 600 minutes so if you want to get to your file after 10 hours using the returned URL, this function is not for you.

The nice thing about getFileURL is that you can use it for content where you don’t want to make the URL permanently available.

If you want to use the link to your file for more than 10 hours you need to regenerate the URL and token, or you can use a static link as shown above.

So what is fileName ?
fileName is not the name of the file in the UI of the Media Manager.
The fileName that you want for your URL is a unique identifier assigned by the Media Manager when you upload a file using upload() or importFile() or getFileInfo() and can be found in the objects returned by each of these functions.
If you want to see the fileName in the UI:

  1. Open the Media Manager.

  2. Select a file.

  3. Click on the down arrow next to File Info.

  4. Click Copy URL .

  5. Do a Paste somewhere to see the static URL including the filename .
    You’ll get something like:

https://static.wixstatic.com/media/81c916_38c28d77469d40419732e0667200eb48~mv2.jpeg

7 Likes

This post brings world peace, solves global warming, and is a great reason to have a beer.

8 Likes

Can we get one post for documents as well?

UPDATE:
Follow the steps in this article to get your media file’s URL. As stated above, fileName will be in the URL. However, each media type has a different format for the fileName string as follows:

Image/GIF:
https://static.wixstatic.com/media/{22d494_cb2a8a381bb1495e9a320ae23f4fd18d~mv2.gif}

Video: https://video.wixstatic.com/video/{22d494_fef6ff6f52b04b4aa1e1c0ab6d1bb194}/360p/mp4/file.mp4

Audio: https://static.wixstatic.com/mp3/{22d494_5543f167bf1c45ea984bc76e699b457b.mp3}

Document:
https://8b7eef41-7fbb-440b-928a-a442878112a3.usrfiles.com/ugd/{22d494_bddbcfb54d4442a7a042a3ab81347458.pdf}

2 Likes

See update in the comments below :slight_smile:

This does not solve my problem. It still requires that you MANUALLY open every image/file and get the URL, which you could always do. This is nothing new. I need a PROGRAMMATIC way of getting this info. As far as I can tell from this article, there is still no way to get the filename using any Wix API if the file has already been uploaded. Yes, I know I can get the URL at the time of upload, but once it’s there, you cannot get it by using a totally programmatic solution. Correct?

Again, the only way I’ve found to get the filename without having to manually click on every single image is to multi-select every image using the Media Manager, and put them all into a single gallery. Then loop through the gallery, capture the slug, and massage it using a regexp into the filename you’re looking for. It’s partially automated, but still requires the manual step of creating the gallery.

I am looking for a PROGRAMMATIC way of doing this. Either by allowing me to get all files in a specific directory, or by mapping MY filename to WIX’s filename programmatically.

Am I reading the above article wrong? It seems like you have to use the Media Manager to do any of this and you cannot write code to do it.

Thank you for disambiguating the naming convention of each kind of file. But it still does not solve the problem of requiring laborious manual steps to get at your file URLs.

1 Like

Wix makes it complex for generate URL programmatically.

1 Like

You can get the url by using zapier or integromat type tools. Say if a form is submitted with documents/video, you can program them to remove the file name, and attach the constant parts of the url around it.

@rebecca this works for everything except the video for some reason. whenever I am uploading a video through a form, it just shows in a loading state and no URL is created. Snapshot attached.

If I’m not wrong, which occasionally does happen, if you are uploading the files with code then when you uploaded the file, you could put the returned promise / file information (including the file name and url) into a database, and access it programmatically by querying the database information.

Yes, I’ve never disputed that. My annoyance is not with programmatically uploading. My annoyance is that if your stuff is ALREADY there, you cannot programmatically access it. Please try this:

  1. Upload some images to a folder

  2. Do this using the media manager UI, or some other way that is NOT through the file upload API. (basically, do not capture the file name while you’re uploading it).

  3. Sometime after the files are sitting in the media manager, try to write code that gets the media files by directory, filename, or any other rational way to browse a file system.
    Spoiler alert: You can’t.
    The advice I was given by Wix support was to store the filenames in a collection. This is what I will have to do.
    Because I already have all the images/media in the media manager, and I did not have the forethought to capture the filesystem in a database when I uploaded it, I will have to put every single image into a gallery, then iterate through the gallery using the API, and put the files in a collection. There is a kind of insane mapping between the slug that Wix uses and the filename of the original file (the human readable filename, like mydog.jpg)

If anyone wants the crazy regexp, let me know and I’ll dig it out of my code.

OOOOOOMMMMMMMMMGGGGGGGGG
This has been fixed!

Wix has just released new Media Manager APIs that allow you to get folders, files, parent folders, etc.

Check out the announcement from July 7:

I played with it a couple of days ago, and it is WONDERFUL. I am breathing a massive sigh of relief because I needed this sooooo badly.

@yisrael-wix said:
“This post brings world peace, solves global warming, and is a great reason to have a beer.”

The July 7 announcement brings world peace, solves global warming, and is a great reason to have a beer.

1 Like

Glad that you are so happy :slight_smile:

But for future reference: The new MediaManager allows to call listFiles(), which will return all the files uploaded in the MediaManager.
Then you can loop over all these files and filter on originalFileName.
So , I suppose you would need something like this:

import { mediaManager } from 'wix-media-backend';

const filters = {
  parentFolderId: "..."
};

export function getFileByOriginalFileName(originalFileName) {
  return mediaManager.listFiles(filters)
    .then((myFiles) => {
    for(var i = 0; i < myFiles.length;i++){
      if(myFiles[i].originalFileName === originalFileName){
        return myFiles[i];
      }
    }
     return null;
    })
    .catch((error) => {
      console.error(error);
    });
}
1 Like

@ronald28659 There are new methods for listing files and folders.

They are: listFolders(filters, sort, pagination), listFiles(filters, sort, pagination);

The example code on the API docs is a little bit wrong, as it omits the parameters as optional, and they don’t appear to be optional, whether by design or bug (the intention may have been for them to be optional). I got red squigglies when I copy/pasted the example code, so I had to add in empty objects for the params.

You can use two new methods listFolders and listFiles to list the directories and files at each level. If the term “parentFolderId” is a little bit confusing, you can think of it as “the enclosing folder”

Here’s an example.

(Top level folders have a parentFolderId named “media-root”)

In my media manager, I have the following directory/file structure. Directories in blue, files in red:

(media-root)/ Plants/Large / 0001_s.jpg
(media-root)/ Plants/Large / 0001_2_s.jpg
… etc …

The complaint has been that you’ve never been able programmatically look up either the Wix filename, the original filename, or the directory structure or contents once the file was already in the Media Manager. Now you can:

First, I got the folders in the media root (you can do this by either passing an empty filter, or pass “media-root” as the parent folder ID).

const filters = {};
const sort = { order : ‘asc’ , field : ‘originalFileName’ };
const pagination = { limit : 100 };
return mediaManager . listFolders ( filters , sort , pagination ). then (( rootFolders ) => {

This returned all of my top level folders. One of which is Plants:
folderId : “25334a1d305d44888408d1f82c6e0387”
folderName : “Plants”
parentFolderId : “media-root”

Next, I did another listFolders, this time passing the Plants folderID:
const filters = {
parentFolderId : “25334a1d305d44888408d1f82c6e0387”
};
const sort = { order : ‘asc’ , field : ‘originalFileName’ };
const pagination = { limit : 100 };
return mediaManager . listFolders ( filters , sort , pagination ). then (( plant Folders ) => {

This returned the “Large” folder underneath the Plants folder:
folderId : “c3aa8f2936804701b12fee15ce90278b”
folderName : “Large”
parentFolderId : “25334a1d305d44888408d1f82c6e0387”

I have files (no folders) underneath “Large”, so I got them by using listFiles:
const filters = {
parentFolderId : “c3aa8f2936804701b12fee15ce90278b”
};
const sort = { order : ‘asc’ , field : ‘originalFileName’ };
const pagination = { limit : 100 };

return mediaManager . listFiles ( filters , sort , pagination ). then (( largeFiles ) => {

This returned the first 100 files in that directory. Here are the two I mentioned above (0001_s.jpg, 0001_2_s.jpg). There are a bunch of other properties, but I’ve only included the properties that are interesting to this conversation:

fileName : “c565a4_470557f697d34089b28ac2b5a8033361~mv2.jpg”
fileUrl : “wix:image://v1/c565a4_470557f697d34089b28ac2b5a8033361~mv2.jpg/0001_s.jpg#originWidth=600&originHeight=400”
originalFileName : “0001_s.jpg”
parentFolderId : “c3aa8f2936804701b12fee15ce90278b”

fileName : “c565a4_46b6cefb5ef74892930c5967e0674109~mv2.jpg”
fileUrl : “wix:image://v1/c565a4_46b6cefb5ef74892930c5967e0674109~mv2.jpg/0001_2_s.jpg#originWidth=600&originHeight=400”
originalFileName : “0001_2_s.jpg”
parentFolderId : “c3aa8f2936804701b12fee15ce90278b”

These two new Media Manager API methods give me more or less complete control over viewing the contents of my directory structure. I still don’t see a way to move, rename, or remove files using the API. I can only do read only operations.

In another Forum thread on this subject, someone was complaining about not being able to be GDPR compliant, because they cannot programmatically wipe out Visitor files. So it appears that might still be a hole in the API. But for my immediate need, just being able to traverse my directory tree and look up Wix’s filenames for my own human readable filenames is HUGE.

@polkaset Yes, I replied a bit too quick after just having checked the unchanged getFileInfo and Url methods getFileList() worked for me too :slightly_smiling_face:

How canIminstall the media manager module, when I put the import
I get Cannot find module ‘wix-media-backend’

Are you adding to backend code or frontend code? The wix-media-backend module contains functionality for working with media from backend code .

Learn more about backend modules here .

I would like to obtain the original file name from the fileinfo()
I was trying to do it from the front end calling the import wix-media-backend API
Then I do not know if I have to make a backend module and how to call the API from there

You can use the import wix-media-backend API inside a backend module.
Inside this file you can export your own function and import that in your page code from front end.
so if you define
export function myFunction(){ … } in backend code
you can call
import {myFunction} from “backend/myModule.jsw”
in your front end code and then use myFunction() in your Page Code

2 Likes

Hi @polkaset
I see you have mastered what i have spent hours trying to work out. I could really do with some help. I’m no coder and I’m just looking for a way to a get a list of my plant image file names sitting in media manager/plants.