Media Manager Import Image from URL

Ask the community
,
1

I’m trying to import an image from the upload button to a specified folder. I couldn’t get the media manager upload backend to work for me because I couldn’t figure out how to get the image from the front-end upload button to the backend to be uploaded (buffer is apparently too above my head). So I was trying this method with importing from a URL, but apparently the type of URL I’m passing is wrong.

Front end:

export function button39_click(event) {
    $w("#uploadButton1").startUpload()
    .then( (uploadedFiles) => {
        console.log("File url:" + uploadedFiles.url);
        let url = uploadedFiles.url;
        let name = $w("#uploadButton1").value[0].name;
        let mime = get_url_extension(uploadedFiles.url)
        console.log(url+" "+name+" "+mime)
        importFile(url,name,mime);
    })
}

function get_url_extension( url ) {
    return url.split(/[#?]/)[0].split('.').pop().trim();
}

export function uploadButton1_change(event) {
    console.log($w('#uploadButton1').value)
}

Backend:

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

export function importFile(url, name, mime) {
  return mediaManager.importFile(
    "/Cats",
      url,
    {
    "mediaOptions": {
      "mimeType": "image/" + mime,
      "mediaType": "image"
      },
    "metadataOptions": {
      "isPrivate": false,
      "isVisitorUpload": false,
      "fileName": name,
      "context": {
      "someKey1": "someValue1",
      "someKey2": "someValue2"
      }
    }
    }
  );
}

Error:

  "code": -2100,
  "message": "incorrect external url",
  "payload": {
    "key": "wpm_error.missing_mandatory_parameter"
  }

Any help would be GREATLY appreciated. I’ve been trying to solve this one problem for a month and it’s the last piece of the puzzle I need for my project.

2

First of all, .startUpload got deprecated and you may want to switch to the newer method.
Second , it should be:

let url = "https://static.wixstatic.com/media/" + uploadedFiles.url.split('/')[3];//to convert it to external URL.

Third, keep in mind that this way you will have each image file twice: 1 the file that got uploaded via the upload button and a copy that you imported from the url.

3

Is there a way to stop the doubling? How would I take the image from the upload button and use the backend to upload it to the correct place?

4

@raraavismedia afaik, Velo currently doesn’t support this feature.
There’s a way to do it though, if you create your own upload button with a custom element (html, css, js) and, for example, read the base64 string and use the buffer package combined with the Velo media-backend upload() .
But it’s more complicated than the regular Velo coding.
If you wish to get into it, I can refer you to some articles: