WixMedia Backend not working

Ask the community
,
1

Whenever I try to use the upload function from WixMedia Backend API, the following error appears in the browser console:

1366×184 25.6 KB

Here’s my code:

export function html1_message(event) {
  mediaManager.upload("/Media", event.data).then(() => { console.log("done!"); });
}

Is this a bug or am I doing something wrong?

2

You need to show all your code as you can’t have used just that above.

https://www.wix.com/corvid/reference/wix-media-backend.mediaManager.html#upload

Examples
Upload a file

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

export function uploadImage(buffer) {
  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": "f6c0f9_g2ae28cf29ec4639bc45698fee57cf56~mv2.jpg",
 *    "mediaType": "image",
 *    "isPrivate": false,
 *    "sizeInBytes": 51085,
 *    "mimeType": "image/jpeg",
 *    "iconUrl": "wix:image://v1/f6c0f9_g2ae28cf29ec4639bc45698fee57cf56~mv2.jpg/myFileName.jpg#originWidth=300&originHeight=300",
 *    "fileUrl": "wix:image://v1/f6c0f9_g2ae28cf29ec4639bc45698fee57cf56~mv2.jpg/myFileName.jpg#originWidth=300&originHeight=300",
 *    "originalFileName": "myFileName.jpg",
 *    "hash": "bee2f8aab80b0d011499361c2eb189eb",
 *    "labels": [
 *      "Blue",
 *      "Butterfly",
 *      "Turquoise"
 *    ],
 *    "width": 300,
 *    "height": 300
 * }
 */
3

Examples
Get a URL and token to be used for uploading a file by POST

/***************
 * Wix Backend *
 ***************/

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

export function getUploadUrl() {
  return mediaManager.getUploadUrl(
    "/myUploadFolder/subfolder",
    {
      "mediaOptions": {
        "mimeType": "image/jpeg",
        "mediaType": "image"
      },
      "metadataOptions": {
        "isPrivate": false,
        "isVisitorUpload": false,
        "context": {
          "someKey1": "someValue1",
          "someKey2": "someValue2"
        }
      }
    }
  );
}

/********************************
 * External Node.js application *
 ********************************/

import * as request from 'request-promise';

async function uploadImageViaUploadUrl(uploadUrl, uploadToken, contentStream, fileName, contentType) {
  const body = {
    upload_token: uploadToken,
    file: {
      value: contentStream, // a Node.js Buffer with the file content
      options: {
        filename: fileName,
        contentType: contentType
      }
    }
  };

  const response = await request.post({url: uploadUrl, formData: body, json: true});
  return `wix:image://v1/${response[0].file_name}/${response[0].original_file_name}#originWidth=${response[0].width}&originHeight=${response[0].height}`;
}
4

@givemeawhisky I tried that too, but it still doesn’t work. I think the problem is that is doesn’t recognize mediaManager, even though I imported it.

5

If you have this at the top of your code then it should recognise it well.

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

The issue you have is that you are not getting any value for the upload and hence the undefined error, plus you need to make sure that you have the return added before the media upload.

Also note that this is meant to run from the page and not from any html component, to do that you will need to use onMessage and postMessage to send your data to the page first. https://www.wix.com/corvid/reference/$w.HtmlComponent.html

Hence why you need to have the (buffer).

export function uploadImage(buffer) {

fileContent - Buffer
Buffer containing the content to be uploaded.

Backend events don’t work when previewing your site.

6

Oh I need to put the code in backend, I thought about it, but didn’t do it.
I now added the following code to the backend:

import { mediaManager } from 'wix-media-backend';
export function uploadVideo(buffer) {
return mediaManager.upload(
"/Media",
buffer,
"deltatime.mp4", {
"mediaOptions": {
"mimeType": "video/mp4",
"mediaType": "video"
},
"metadataOptions": {
"isPrivate": false,
"isVisitorUpload": false,
"context": {
"someKey1": "someValue1",
"someKey2": "someValue2"
}
}
}
);
}

And in the page code I have:

import { mediaManager } from 'wix-media-backend';
import { uploadImage } from 'backend/upload.jsw';

export function html1_message(event) {
uploadVideo(event.data);.then(function () { console.log("done!"); });
}

But it still doesn’t work. Now it returns the error “Uncaught (in promise) Error”.