.src doesn't return the original filename

Ask the community
,
1

Hi,

I’m trying to extract the original filename from an image file in the media manager for further manipulation, but both the console return and the text box return omit this information. In this particular case it is returning:

wix:image://v1/3f382d_f8767428a1934de18f0cf3a7e7c8d90e~mv2.jpg/_.jpg#originWidth=1500&originHeight=1125

whereas I am expecting:

wix:image://v1/3f382d_f8767428a1934de18f0cf3a7e7c8d90e~mv2.jpg/brushes.jpg#originWidth=1500&originHeight=1125

Here is my code:

$w . onReady ( function () {

**let**  imageSource  =  $w ( "#myImage" ). src ; 
$w ( '#txtSrc' ). text  =  imageSource ; 
console . log ( imageSource );

});

Can anyone help on this? Thank you.

2

You will want to see the media backend API getFileInfo()

3

Hi, thank you for the tip. I’m very new to this and don’t understand how I apply the function. Do I need to use a wixdata query to retrieve the file and, if so, how do I insert it into the function - the parameter looks to be same as what I am wanting returned. Do I need to put the function in a web module then import it to the frontend? I’m working through the velo course but still very much in the dark. Any help or nudges would be much appreciated. I’ve looked at various pages about asychronous functions but still clueless.

4

Hello. Let me see if I can point you in the right direction.

The API I linked above is a backend function, so you will put this in a jsw file to be exported to the page and accessed from the page.

If you don’t already have what you need to pass to get file info, you can query the media collection instead which will also contain the filename.

So in your backend file, create a function that queries the media collection
Article on the media collction
API docs for wix data query
Once you get the result you can pass only the data you need to the page code

As far as learning how to work in async code, see if perhaps this video makes sense. Everyone learns differently but once it clicks for you I promise (…get it :joy:) it will make sense

5

:rofl:yep, get it…though that only refers to the joke - still struggling with async but I will get there, so thank you for pointing me in the right direction. I managed to get what I need by using a query on the particular collection to get the src of an image in media gallery array and then used that in a wixdata get command to retrieve he originalFileName. I probably went round the houses and it looks untidy but it achieved the desired result:

import wixData from ‘wix-data’ ;

$w . onReady ( function () {
let herName = $w ( ‘#text37’ ). text //box with unique identifier
wixData . query ( “Animals” ) //references collection
. eq ( “title” , herName ) //filters unique identifier
. find ()
. then (( results ) => {
if ( results . items . length > 0 ) {
console . log ( "media gallery is " , results . items [ 0 ]. mediagallery [ 0 ]. src ); //writes the src of first image in array to console
let myPic = results . items [ 0 ]. mediagallery [ 0 ]. src ; //assigns src to variable
wixData . get ( “Media/Files” , myPic ) //puts variable into media files search
. then (( item ) => {
console . log ( "The File is " , item . originalFileName ); //returns original filename for further manipulation
})
. catch (( err ) => {
console . log ( err );
});
} else {
// handle case where no matching items found
}
})
. catch (( err ) => {
console . log ( err );
});

});

6

Incredible! I’m so glad you got it working. That’s the first hurdle and as you understand more and practice more then you will be able to refine your approaches and begin to learn best practices and what your coding style is!