Uploading to specified folder in Media Manager

Ask the community
,
1

Hello, so I’ve tried and tried to wrap my head around using buffer to upload to a specified folder, but I can’t seem to do it. I’m following all the instructions there and on Velo API but I guess we’re I’m stuck is on the front end.

When I hit submit, I want to make sure my file is going into a specified folder. However, I can’t figure out how to call the backend module, pass the file (not as an array), and have it go into the correct folder.

Here is my example front end code (visually it’s just a standard upload button and a submit button on the page), I was just testing using the cats version which would put an image into the “/Cats” folder:


import {uploadImageCats} from 'backend/kennelCats.jsw';
import {uploadImageDogs} from 'backend/kennelDogs.jsw';
import {uploadImageOthers} from 'backend/kennelOthers.jsw';
 import { Buffer } from 'buffer';

$w.onReady(function () {

});

export function button39_click(event) {
    let file = $w("#uploadButton1").value;  
    console.log(file)
    uploadImageCats(file);
}

The backend JSW module code:

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

export function uploadImageCats(buffer) {
  return mediaManager.upload(
    "/Cats",
    buffer,
    "myFileName.jpg",
    {
      "mediaOptions": {
        "mediaType": "image"
      },
      "metadataOptions": {
        "isPrivate": false,
        "isVisitorUpload": false,
      }
    }
  );
}

Any help would be appreciated because this is stretching me beyond my normal capabilities but it’s something I really need for organization sake in my databases. Thanks!

2

In one of the following posts, you should find your answer…

  1. https://www.wix.com/velo/forum/coding-with-velo/how-to-get-file-buffer-from-file/p-1/dl-615dd9ac081a1900161bd6d5-615dd63b494b760016bc2428-1

  2. https://www.wix.com/velo/forum/coding-with-velo/how-to-upload-from-buffer/p-1/dl-612ebb4fc11e490016aab20a-60a1ab9547db520016de0b67-6

  3. https://www.wix.com/velo/forum/coding-with-velo/getuploadurl-doesn-t-return-a-token

3

After scouring these threads, is there no way to make this work WITH the wix upload button and scripting? Is it only accomplishable using an HTML component?

4

@raraavismedia
After you have read this, your right question will be…
https://www.wix.com/velo/reference/wix-media-backend/mediamanager-obj/upload

… → how to generate the buffer-data without an HTML-Component, i think :roll_eyes:

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

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

Can someone please break this down in a way that can be followed clearly? I read through the links, and the information is all over the place. For example:

I can upload just fine using the button.uploadfiles(). The issue is that I’d like to be able to create a folder and then upload the images to that folder. I do not see a way to do this using the button’s exposed methods. This current post appears to have a solution but is difficult to follow. For example, I copied and pasted the code above as a starting point, and I got an error with the first line.

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

Cannot find module ‘wix-media-backend’ or its corresponding type declarations.

I have a general understanding of how the Wix back-end works but seeing the process in the context of finding a solution to this specific problem will go along way.

I’m requesting the specific steps to accomplish the exact task of uploading to a specified folder and returning the Wix URL… All using Wix code.

For example

  1. What needs to be done to get access to wix-media-backend?

  2. What is the buffer-source / buffer-data and how do you get it?

  3. How do you create and HTML-Component-File-Selector in WIX?

  4. How do you use it to get all needed info, including base-64-code?

  5. How do you send all the gathered data to your site?

  6. How do you use the provided code from Wix-API on back-end(send DATA to backend)

  7. How do you handle the data on the backend

  8. What is the code I’d use for the button click method?

A lot of people would benefit from a straightforward, easy-to-follow solution. If anyone got this to work, please highlight your steps.

Thank you in advance.

6

Those links were not helpful. None even addressed the 1st thing I had asked for. My hope is that someone who understands the links that you provide (or just knows how to do it) can break out the necessary information to accomplish uploading images to a specified folder using code.