Uploading images from backend using wix-media-backend

I’ve created a site API to upload images to the Media Manager. I used this documentation:
https://support.wix.com/en/article/wix-code-exposing-a-site-api-with-http-functions
https://www.wix.com/code/reference/draft/wix-media-backend.html
It is kind of strange to see ‘draft’ in the second URL. Brings me to my first question: is this API ready to be used and did someone has already managed to use the upload function?

Anyhow, in my http-functions.js I have

 
import {uploadImage} from 'backend/media';
...
 export function post_image(request) {

 let options = {
 "headers": {
 "Content-Type": "application/json"
    }
  };

 return request.body.text()
    .then((body) => {
 let record = JSON.parse(body);
 let image = CryptoJS.enc.Base64.parse(record.image);
 ...
 return uploadImage(image, record.filename, mime)
.then((fileInfo) =>
...
 .catch((error) => {
      options.body = {
        "error": error.message
       };
        return serverError(options);
  }); 

The image comes in as a base64 String. Is this the right way to convert it to a Buffer variable?

In media.js there is:

export function uploadImage(buffer, filename, mime) {
 
 return wixMedia.upload(
 "/Galleries/",
    buffer,
    filename,
    {
 "mediaOptions": {
 "mimeType": mime,
 "mediaType": "image"
      },
 "metadataOptions": {
 "isPrivate": false,
 "isVisitorUpload": false,
 "context": {
 "someKey1": "someValue1",
 "someKey2": "someValue2"
        }
      }
    }
  );
}

Result: upload() throws an error, resulting in returning a ServerError response
“error”:“Cannot read property ‘mediaType’ of undefined”
The folder ‘Galleries’ defined in the function, does get created… So I guess that either the upload isn’t working yet because of the draft notion, or that I just didn’t converted my image to the right Buffer type.

Does anyone can help me with this?

I think they just recently moved it out of draft. I tried to use it while it was in the draft only as well last month, and it didn’t work for me at the time.

The trick is to use Node.js’s Buffer class to create the buffer object from a Base64 string. Like here:

var buffer = new Buffer.from(unescape(body.base64Content), 'base64');

Well at least it works now
The https functions gets a POST request with a Dropbox shared URL, this URL is used for uploading it to the Media manager.

how you accomplished that? got same problem

I made an external API in integromat. From Wix I send a trigger and this external flow goes to a dropbox folder (transferred into that trigger). This flow goes and shares every file in that folder and this generates a unique link (you can set the lifespan of that link - i’ve set it to 2mins in order to let the upload happen correctly); this external API calls a webhook in Wix and transfers each Dropbox URL to the WixBackend and there I upload the given dropboxURL into the media manager.

export function uploadImageFromUrl(url,shootname, filename, mime) {
 return rp.get({ url, encoding: null })
    .then( (image) => {
 return mediaManager.upload(
 "/Galleries/" + shootname,
        image,
        filename,
        {
 "mediaOptions": {
 "mimeType": mime,
 "mediaType": "image"
          },
 "metadataOptions": {
 "isPrivate": false,
 "isVisitorUpload": false,
 "context": {
 "shoot": shootname,
 "filename": filename
            }
          }
        }
      );
    } );
 }

To be complete, I know there is a Dropbox integration to upload from the user interface but I need these pictures to be uploaded into a DataCollection the same time. Thats why I do it like this. After uploading Wix returns me Wix-URL and this goes into the database.

2 Likes

I want to upload images in media folder using third party API.

Third party API which is return image as json format.

Please help me ASAP because it’s very urgent and I am beginner in WIX server.