Please people, how do I convert a blob image file eg:
blob:https://chidiejike-wixsite-com.filesusr.com/aa945e05-e308-408d-8a7c-5c42edd3f2e0
to a file readible by wix ?
I think you can install the blob-to-buffer node package. Create a buffer and then use mediaManager.upload()
Hello J.D. do you also know where to find an example?
Thanks for the response but there is no clear process to achieving this, also the import { mediaManager } from ‘wix-media-backend’; will render all the code on the page void
@russian-dima I used the buffer NPM to upload base64 images, and if needed I can post this part. But I’ve never used blot-to-buffer, so no example is available. But I guess that if you follow the documentation it’s not so hard.
Chidi, you need to handle it in a backend file.
It is easier to convert blob to base64 even at the HTML Js code. so if you can post the base64 to wix image code steps that would be great.
@jonatandor35
Hello J.D. one more time 
Ok, i know about the coding and decoding of the base-64-process.
My question would be more → Which FILE-SELECTOR is used?
How to open the FILE-SELECTOR for this CODE?
I am able to use a FILE-SELECTOR through an HTML-Component.
How do you do this in your case? Also using an HTML-Component for this?
Why i am asking? —> I am able to upload files from a File-Selector by using a HTML-COMPONENT. My aim is to do the same, completely without the usage of the HTML-Component. Is that possible?
@chidiejike OK. So install the buffer node package,
And do something like:
import { mediaManager } from 'wix-media-backend';
import { Buffer } from 'buffer';
export function uploadImage(data){
let image= data.base64;
let id = data.hash; //I used a hashed string for identification and avoiding duplicate uploads, you can use whatever you wish,
fileType = image.split("/")[1].split(";")[0];
let fileName = data.fileName;
if(!fileName){fileName = `newfile.${fileType}`;}
image= image.split(`data:image/${fileType};base64,`)[1];
let buffer = Buffer.from(image, "base64");
return mediaManager.upload(
`/usersImages/${userId}`,
buffer,
fileName, {
mediaOptions: {
mimeType: `image/${fileType}`,
mediaType: "image"
},
metadataOptions: {
isPrivate: false,
isVisitorUpload: true,
context: {
isUserFile: true,
id: id
}
}
}
)
}
P.S, I used the userId’s as folder name (where the image should appear), you can choose whatever you want instead.
@jonatandor35 Are you able to show → “data” in console? (completely expanded) ???
Where does data in your case come from ? → Upload-Button ?
Ok, i think for my own use-case the BUFFER-NPM-PACKAGE do not make any changes to get rid of the HTML-Coponent → because looking for M-Upload instead of S-Upload.
You surely will know what i mean.
That means → there wouldn’t be any advantages for me (in my case) to use the NPM-Buffer-package (since i am also able to do the same inside the THML-component.)
But drop me some lines, if i am on wrong way.
BTW: Just found this one, to understand the BUFFER and its prozesses a little bit better…
Perhaps also usefull for you @chidi.ejike ???
@russian-dima hi, the data is part of a parsed JSON that I’m sending from a desktop app via http-function. It contains:
base64 code for the image.
userId as identifier (I create media folder names per user),
file name,
hash unique string for this file (so I can reject it on re-sending)
@jonatandor35
Yes, this is exactly what i wanted to know 
.
A desktop-app —> sounds INTERESSTING !!!
Can you tell me more about it, if it’s not a TOP-SECRET one?
It’s a kind of → FILE-SELECTOR, or how to imagine your APP ?
@russian-dima I’d rather not posting too much details here, but it does involve file selecting (and file “liking”) as you guessed.
@jonatandor35 Ok, thanks! I understood! Then i will continue to use my own HTML-Solution. But thanks for info! I will look/search for the mentioned option.
I knew, that the UPLOAD-BUTTON could NOT be the SOLUTION ! 
Anyway, it was good to know, that there is also a NPM-PACKAGE for BUFFER.
I am not really sure if i perhaps even have already used it in the past 
@jonatandor35 Please at what point is the image converted because what I want to do is to capture an image uploaded from an Iframe code in base64(achieved), then capture the base64 image on the wix page through a post code(achieved) then convert that base64 image to a wix image(problem) and upload to a specific database(achieved).
import { mediaManager } from ‘wix-media-backend’ ; cannot be added to that page because it makes all the code there void.
the return mediaManager . upload code takes the image to the media database of wix which is not where I want the image to appear.
this is what my code looks like for the page where this happens. Buffer npm has been installed. the event.data is already the converted image to base64.
Do I need to create a .jsw file for buffer? what should be the content?
import { Buffer } from ‘buffer’ ;
$w ( “#html15” ). onMessage ( ( event ) => {
$w ( “#image318” ). src = event . data// in base64
solo ();
})
function solo (){
let image = $w ( “#image318” ). src
How do I achieve the conversion here
$w ( “#dataset104” ). onReady (() => {
let itemoo = $w ( “#dataset104” ). getCurrentItem ()
let Uppppdate = {
“title” : “RECEIVED” ,
“image” :converted wix image,
};
wixData . save ( “AIIMAGES” , Uppppdate )
. then (( results ) => {
let item = results ; //see item below
})
. catch (( err ) => {
let errorMsg = err ;
});
})
}
@chidiejike hi,
You should create a js w file in your backend.
Then:
FRONT END:
import {uploadImage} from "backend/media.jsw;
$w.onReady(() => {
$w("#html15").onMessage(async event => {
$w("#image318").src = await uploadImage(event.data);// in base64
})
})
BACKEND:
//media.jsw
import { mediaManager } from 'wix-media-backend';
import { Buffer } from 'buffer';
export function uploadImage(image){
fileType = image.split("/")[1].split(";")[0];
let fileName = `${Date.now()}.${fileType}`;
image= image.split(`data:image/${fileType};base64,`)[1];
let buffer = Buffer.from(image, "base64");
return mediaManager.upload(
`/uploadedImages`,
buffer,
fileName, {
mediaOptions: {
mimeType: `image/${fileType}`,
mediaType: "image"
},
metadataOptions: {
isPrivate: false,
isVisitorUpload: true,
context: {
isUserFile: true,
}
}
})
.then(r => r.fileUrl);
}
Finally got it to work.
@chidiejike The async-await is a must. You can’t just remove them (but you can use promise.then() if you wish).
Anyway, I can’t tell you off the top of my head where the problem is.
You should debug the code, look for error in the site monitoring tool and see if you can locate the problem.
(P.S. I edited the post a few minutes after I published it. Make sure you use the newest version).