Wix-Media-Backend

Ask the community
,
1

Has anyone used the wix-media-backend API? the following code does not work:
import { mediaManager } from ‘wix-media-backend’;

export function uploadImage(image) {
return mediaManager.upload(
“/MyCert”,
image,
“myFileName.jpg”,
{
“mediaOptions”: {
“mimeType”: “image/jpeg”,
“mediaType”: “image”
},
“metadataOptions”: {
“isPrivate”: false ,
“isVisitorUpload”: true
}
}
);
}
export function button1_click(event) {
//Add your code for this event here:
// console.log($w(“#uploadButton1”).value)
let fname=$w(“#uploadButton1”).value[0].name
uploadImage(fname)
.then( (uploadedFile) => {
console.log(uploadedFile)
return
})
}
I receive the error:
TypeError: Cannot read property ‘upload’ of undefined

I am not sure how to get the file to upload. (I used the uploadbutton element to get the file from my hard drive. not sure if tht is right. The documentation is unclear on how to get the file contents…) thanks!

2

Are you testing your code in preview mode? From https://www.wix.com/corvid/reference/wix-media-backend.html I see the following:

| Note:
| Backend events don’t work when previewing your site.

Otherwise, maybe add " import wixMedia from ‘wix-media-backend’; " to your code as well? Not sure though, because the error points out the import didn’t work, but you’re importing it correctly.

3

Thanks for the feedback - I tried your suggestions but received the same error…

4

Note that you are using the Wix Media Backend upload function to upload a image to your media manager.
https://www.wix.com/corvid/reference/wix-media-backend.mediaManager.html#upload

Then you are trying again to upload a image again using the Wix Upload Button.
https://www.wix.com/corvid/reference/$w.UploadButton.html

Note that also with the Wix Upload Button that the image is only uploaded to the button itself and you get a URL returned for the image or you can get the image yourself through the Wix Upload Button yourself.
https://www.wix.com/corvid/reference/$w.UploadButton.html#UploadedFile

If you are wanting to use the Wix Upload Button to save the image to a dataet, then you will need to connect the Wix Upload Button to a dataset and either use a submit button or save function in your code as stated on the page for it.
https://www.wix.com/corvid/reference/$w.UploadButton.html#UploadedFile

There is a code example with the upload button if you want to look at it if you haven’t done so already.
https://support.wix.com/en/article/wix-code-using-the-upload-button-with-code

1 Like
5

Thank you for your response. I was using the Wix Upload Button and that process worked fine, except there is no way to control where the uploaded file will go. (all go to Visitor Uploads) (I was hoping to be able to target different images into different subfolders and it looked like the Wix-Media-Backend gives you that flexibility. But I cannot get the documented commands to work. See original error message above. I am unable to get any of the commands to work. It looks like there is a problem with import { mediaManager } from ‘wix-media-backend’; If you have any working examples; it would be appreciated… Thanks!!! Or is there a way to specify target location for the upload button?

6

Just be aware that the code for the Wix Media Backend API and it’s upload function must be used in your backend and so you would need code on your page to import this function and to get the returned result from it.

wix-media-backend
The wix-media-backend module contains functionality for working with media from backend code.

See here for more info.
https://support.wix.com/en/article/corvid-web-modules-calling-server-side-code-from-the-front-end

Whereas the extra part that you have added on underneath for the upload button itself is used on your frontend on the page where the upload button is, as shown in upload button API Reference.
https://www.wix.com/corvid/reference/$w.UploadButton.html

And also in the tutorial that I linked to previously.
https://support.wix.com/en/article/wix-code-using-the-upload-button-with-code

7

I achieved this with a 2 step process. FileUpload will always upload to “Visitor Upload” folder. Extract the filename using the mediaInfo backend method. Using the url patched as " let g_url = ‘https://static.wixstatic.com/media/’ + x.fileName;" and using node request-promise module to further copy the file stream to any media manager location.

export function uploadImage(url, filename, mime_type, folder_path) {
console.log(url);
return rp.get({ url, encoding: null })
.then( (image) => {
return mediaManager.upload(
folder_path,
image,
filename,
{
“mediaOptions”: {
“mimeType”: mime_type,
“mediaType”: “image”
},
“metadataOptions”: {
“isPrivate”: false ,
“isVisitorUpload”: false ,
“context”: {
“someKey1”: “someValue1”,
“someKey2”: “someValue2”
}
}
}
);
} );
}

8

Thank you for the suggestion! I am not familiar with “node request-promise module”. How do I install/import this ? I searched Corvid on this, but did not find what I needed .

9

If you go back to the Wix API Reference for Wix Media Backend API and the upload function.
https://www.wix.com/corvid/reference/wix-media-backend.mediaManager.html#upload

Then you will see an example already there for this…

Upload a file from a URL

This example demonstrates how to upload a file using a custom upload button. It assumes you have a regular button on your page wired to an event handler.

It also assumes that you have installed the request-promise node module to your site. The example uses request-promise to create a Buffer containing the contents of the file to upload.

import { mediaManager } from 'wix-media-backend';
import rp from 'request-promise';

export function uploadImage(url) {
  return rp.get({ url, encoding: null })
    .then( (image) => {
      return mediaManager.upload(
        "/myUploadFolder/subfolder",
        image,
        "myFileName.jpg",
        {
          "mediaOptions": {
            "mimeType": "image/jpeg",
            "mediaType": "image"
          },
          "metadataOptions": {
            "isPrivate": false,
            "isVisitorUpload": false,
            "context": {
              "someKey1": "someValue1",
              "someKey2": "someValue2"
            }
          }
        }
      );
    } );
 }

/* Returns a promise that resolves to:
 * {
 *   fileName: "43io8d_4pf9jwff83ec478a811fe3f714a9c869"
 *   mediaType: "image"
 *   isPrivate: false
 *   sizeInBytes: 3631
 *   mimeType: "image/jpeg"
 *   iconUrl: "wix:image://v1/506418..."
 *   fileUrl: "wix:image://v1/506418..."
 *   originalFileName: "myFileName.jpeg"
 *   hash: "a3ac7ddabb263c2d00b73e8177d15c8d"
 * }
 */
10

If you simply click on the ‘installed’ link above in the original Wix API pages, then you would have been taken to this page that shows you how to add nodeJS to your website.
https://support.wix.com/en/article/corvid-managing-external-code-libraries-with-the-package-manager#installing-a-new-package

11

Thanks everyone for your help - I have installed ‘request-promise’ via Package Manger :
request-promise
v4.2.2 ISC
The simplified HTTP request client ‘request’ with Promise support. Powered by Bluebird.

I am now getting the following error when I add the “import rp from ‘request-promise’’ statement” as shown above.

  1. There was an error in your script

  2. Error: Cannot find module ‘os’

For testing purposed the only code on this page are the two import statements

import { mediaManager } from ‘wix-media-backend’;
import rp from ‘request-promise’;

thanks again…

12

OK - Update - I put all the above code in a backend module called "uploadImgae.jsw. called function 'uploadImage (variables…) from webpage and Presto! it works. Now if there was a way to remove ‘old’ images, that would be great - thanks for all the help

13

oops it’s “uploadImage.jsw”

14

How did you call uploadImage from your web page? The uploadImage function in the backend requires a URL input, yet all you have in the web page is the filename as a string from the Upload button, or am I missing something.

Also, I’m not familair with Request-Promise. In brief, what is this statement doing:?
rp . get ({ url , encoding : null })
. then ( ( image ) => {…

15

Hi. I’m getting a 403 error response to the URL formed by " https://static.wixstatic.com/media/’ + x.fileName;"
Is there something more that I need to do?

16

GOS, can you please explain how, from a web page, you generate the URL needed to call uploadImage(). An UploadButton only gives you a filename as a string and I cant access the DOM createObjectURL method.