BUG? wix-stores-backend => addProductMedia()

Hi,
i cant upload image media when using the upload button
maybe its due to all upload button images uploading to “Visitor Upload” folder in the media app
and on this folder the copy URL dos not work - so there is no external URL
but the addProductMedia() API should work with internal URLs and it dos not

example code:
FrontEnd:

import { mediaNewProductBackendFunction } from'backend/addProducts';
export function uploadButton_change(event) {
    $w("#uploadButton").startUpload()
        .then((uploadedFile) => {
           let url =  uploadedFile.url;
 	   let data=[{url}]
 	   let productId="YOUR PRODUCT ID"
                mediaNewProductBackendFunction(productId,data)
        })
} 

BackEnd Code: addProducts.jsw

import wixStoresBackend from 'wix-stores-backend';
export function mediaNewProductBackendFunction(productId, data) {
 return wixStoresBackend.addProductMedia(productId, data);
}

please help if you know who can fix it
or if you know other way to upload image and addProductMedia() API with code
i already try with Wix support but with no luck

Thank you!

1 Like

some one from wix?

???

same issue

@yisrael-wix

@yisrael-wix

I suspect that the URL from a file uploaded with the UploadButton is not suitable. I will pass this on to QA to see if this is a bug.

I fixed it. Place the url fromde the upload into an image element source, then set the product url to thedo source, of thethe image element

Thank you @yisrael-wix
how can i contact you?
i want to show you something big that i build

Nice walk around!!!
you added the upload button image to an Database Table and then take it from the table?

No,place an image element into the editor, any image from wix. Then after the upload, set the imageEditor.src = upload.url

Finally:
oductURL = imageEditor.src

hi,
we recently updated the API to use “src” property instead of “mediaId”/“url” to upload an image (this applies to all “productMedia” altering apis in stores-backend). as i see the docs were not yet updated with this change and we will work on it ASAP

here’s an example call:
addProductMedia(productId, [{
src: ‘https://i.ytimg.com/vi/jpsGLsaZKS0/maxresdefault.jpg’ // or wix:image://v1/289e7e_4d7e6ed33f324a0aa3e1821ee6142781~mv2.jpeg/file.jpg#originWidth=899&originHeight=1599
}])

Hi,
there is an error even in the code example for addProductMedia() in the Corvid API Reference itself!
It should be:
const url1 = “https://static.wixstatic.com/media/bb01c3_48…72b~mv2.jpg” ;
const data = [{ url: url1 }];
or for using mediaId:
const data = [{ mediaId: url1 }];
instead of:
const data = [{ url1 }];

Otherwise you’ll get the following error message:
"[“Error - Media not added to Product " {“message”:“requirement failed: media must have either url or media id”,“details”:{}}]”
See: https://www.wix.com/corvid/reference/wix-stores-backend.html#Media

// backend code
import wixStoresBackend from ‘wix-stores-backend’ ;
export function addProductMediaBackend ( productId , mediaData ) {
return wixStoresBackend . addProductMedia ( productId , mediaData );
}
// client-side code
addProductMediaBackend ( productId , data );

Using “src” instead of “url” or “mediaId” works as well.

Another major issue I experienced is the following: When trying to add media to a product ( addProductMedia() ) using fileUrl format (from FileInfo object), which is also used in the API Reference code example e.g.:
url1 = “wix:image://v1/bb01c3_48f…72b~mv2.jpg/1893186460.jpg#originWidth=500&originHeight=500”
I get an " internal server error " with no additional information!

Solution 1:
This format works only when using the “src” keyword, which is not yet documented in the API Reference!
const data = [{ src: url1 }];

Solution 2: Using “url” keyword - try the following format (from MediaManager GUI, “copy URL”). It worked for me:
[url2](
url2 = “https://static.wixstatic.com/media/”+url1.split(‘/’)[3].split(‘/’)[0];
const) [ = ](
url2 = “https://static.wixstatic.com/media/”+url1.split(‘/’)[3].split(‘/’)[0];
const) [“https://static.wixstatic.com/media/”](
url2 = “https://static.wixstatic.com/media/”+url1.split(‘/’)[3].split(‘/’)[0];
const) [+](
url2 = “https://static.wixstatic.com/media/”+url1.split(‘/’)[3].split(‘/’)[0];
const) [url1](
url2 = “https://static.wixstatic.com/media/”+url1.split(‘/’)[3].split(‘/’)[0];
const) [.](
url2 = “https://static.wixstatic.com/media/”+url1.split(‘/’)[3].split(‘/’)[0];
const) [split](
url2 = “https://static.wixstatic.com/media/”+url1.split(‘/’)[3].split(‘/’)[0];
const) [(](
url2 = “https://static.wixstatic.com/media/”+url1.split(‘/’)[3].split(‘/’)[0];
const) [‘/’](
url2 = “https://static.wixstatic.com/media/”+url1.split(‘/’)[3].split(‘/’)[0];
const) [)(
url2 = “https://static.wixstatic.com/media/”+url1.split(‘/’)[3].split(‘/’)[0];
const) [3](
url2 = “https://static.wixstatic.com/media/”+url1.split(‘/’)[3].split(‘/’)[0];
const) .](
url2 = “https://static.wixstatic.com/media/”+url1.split(‘/’)[3].split(‘/’)[0];
const) [split](
url2 = “https://static.wixstatic.com/media/”+url1.split(‘/’)[3].split(‘/’)[0];
const) [(](
url2 = “https://static.wixstatic.com/media/”+url1.split(‘/’)[3].split(‘/’)[0];
const) [‘/’](
url2 = “https://static.wixstatic.com/media/”+url1.split(‘/’)[3].split(‘/’)[0];
const) [)(
url2 = “https://static.wixstatic.com/media/”+url1.split(‘/’)[3].split(‘/’)[0];
const) [0](
url2 = “https://static.wixstatic.com/media/”+url1.split(‘/’)[3].split(‘/’)[0];
const) ;](
url2 = “https://static.wixstatic.com/media/”+url1.split(‘/’)[3].split(‘/’)[0];
const)
[const](
url2 = “https://static.wixstatic.com/media/”+url1.split(‘/’)[3].split(‘/’)[0];
const) data = [{ url: url2 }];

You can generate the static.wixstatic link by using e.g.:
url2 = " https://static.wixstatic.com/media/ " + url1 . split ( ‘/’ )[ 3 ]. split ( ‘/’ )[ 0 ];

Hope it helps solving your issues. Good Luck!

Thanks for the heads up. I sent this on to the docs team.

is there anyone that actually got past the 500 internal error that is consistently being thrown?

Please add your own issue into a new post instead of hijacking an old post regarding another subject. Explain what you are trying to do, what works, and what doesn’t. Also, add any code in a code block as stated in the Forum Guidelines .