Hi,
I’m trying to use the upload() backend API from wix-media-backend, I’m passing DataURI as the fileContent parameter, “data:image/jpeg;base64,/9j/4AAQSkZ…” from the page to the backend but I get an error back " “StatusCodeError: 406 - {“error_code”:-7751,“error_description”:“Failed to get image info.”}” and the image is not upload to the destination folder in wix media.
Am I doing something wrong? which format the fileContent should be in?
BTW - even if I put the DataURI in the backend code directly, it returns the same error.
regards,
Guy.
Hey,
Can you send over your complete import image function?
The uploadFile() needs to be a buffer object.
Once i get it i can advise,
Regards
Hi,
It would be great if you an help !
this is the backend API located in “aModule.jsw”:
// Filename: backend/aModule.jsw (web modules need to have a .jsw extension)
import { mediaManager } from ‘wix-media-backend’ ;
export function uploadImage(imageContent,name) {
console.log( "in upload image " +name);
//console.log("in upload image - content "+imageContentTemp);
return mediaManager.upload(
“/myUploadFolder/subfolder” ,
imageContent,
name,
{
“mediaOptions” : {
“mimeType” : “image/jpeg” ,
“mediaType” : “image”
},
“metadataOptions” : {
“isPrivate” : false ,
“isVisitorUpload” : false ,
“context” : {
“someKey1” : “someValue1” ,
“someKey2” : “someValue2”
}
}
}
);
}
This is the code in the wix page which takes the dataURI from a input text element which I manually populate (for testing purposes) from https://www.site24x7.com/tools/datauri-to-image.html and calls the backend API:
import {uploadImage} from ‘backend/aModule.jsw’ ;
export function buttonUploadImage_click(event) {
//Add your code for this event here:
console.log( “in click uploadImage” );
//Add your code for this event here:
let image = $w( ‘#textImage’ ).value;
uploadImage(image, “test image” ).then((fileInfo) => {
console.log( “File info:” )
console.log(fileInfo.fileName);
console.log(fileInfo.isPrivate);
console.log(fileInfo.fileUrl);
})
. catch ((error) => {
console.log(error);
});
}
Ohk cool
So is the image value base64?
If so you need to convert to a buffer object, Install the NPM module buffer and use the below import function.
var Buffer = require('buffer').Buffer
function processImage(base, name) {
var buffer = Buffer.from(base, 'base64')
return mediaManager.upload(
"/SomeFolder",
buffer,
name, {
"mediaOptions": {
"mimeType": "image/png", //or image/gif or image/jpg etc
"mediaType": "image"
},
"metadataOptions": {
"isPrivate": false,
"isVisitorUpload": false,
"context": {
"someItem1": 'item1',
'someItem2': 'item2'
}
}
}
).then((img) => {
console.log("Image has been imported into Content Manager; ", img)
return img
}).catch((err) => {
console.log("Image failed import: ", err)
return err
})
}
A Few notes
As per the wix docs here you will need to create an event to do something after the process of transcoding is complete. IE save the image into a database, if so put the record ID in the Context of the upload so you can retrieve it later.
Reference Links
- Wix Media Backend File Upload Event - Events - Velo API Reference - Wix.com
- NPM Buffer Module -
buffer - npm
I will try it out soon, many thanks for your help !
No worries, let me know how you go so i can close the post if your happy with the results and answer
Hi,
Do you know what’s the idea behind isPrivate and the token?
I’ve managed to upload an image with isPrivate and invoke the GetFileURL() to get the URL with the token so only using this URL, the image can be retrieved.
However, if I have a page which display this image within an image element, the image.src will have to refer to this URL, so the user or other user can save this URL and download the image from any computer.
How does the private and token can prevent from other users to view the image?
I thought that each time a user login, the session will have a token to its images which will be used to retrieve the images, but I do not see how this related to the above functionality.
thanks,
Guy.
I’ve placed the suggest code, I note that the “require()” need to include “buffer/” and not “buffer”, I’ve tested both anyhow but I get an error " “TypeError: source.on is not a function”. this is also he same error I got when I used a javascript function I’ve found which converts to a buffer in the page.
This is all the log I get:
This is the backend code:
var Buffer = require( ‘buffer/’ ).Buffer;
export function uploadImage(imageContent,name) {
console.log( "in upload image, name " +name);
console.log( “in upload image, content length” +imageContent.length);
var buffer = Buffer. from (imageContent, ‘base64’ );
return mediaManager.upload(
“/myUploadFolder/subfolder” ,
buffer,
name,
{
“mediaOptions” : {
“mimeType” : “image/jpeg” ,
“mediaType” : “image”
},
“metadataOptions” : {
“isPrivate” : false ,
“isVisitorUpload” : false ,
“context” : {
“someKey1” : “someValue1” ,
“someKey2” : “someValue2”
}
}
}
);
}
The DataURI starts with: “data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/4QyGRXhpZgAATU0AKgAAAAgABwESAAMAAAABAAEAAAEaAAUAAAABAAAAYgEbAAUAAAABAAAAagEoAAMAAAABAAIAAAExAAIAAAAeAAAAcgEyAAIAAAAUAAAAkIdpAAQAAAABAAAApAAAANAACvyAAAAnEAAK/IAAACcQQWRvYmUgUGhvdG9zaG9wIENTMyBNY…”
I’m starting to lose hope regarding this, I’m thinking of using Google cloud storage API which has control of privacy in addition to storing files.
thanks,
Guy.
Steps:
dataURI = base64 string using format
"data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/4QyGRXhpZgAATU0AKgAAAAgABwESAAMAA
1 - Install “buffer” npm module;
2 - import { Buffer } from ‘buffer’ on Backend module
3 - remove the data type from base64 string
let data = dataURI.split( ‘data:image/jpeg;base64,’ )[ 1 ]
4 - Create Buffer decoding base64
let imgBuffer = Buffer. from (data, “base64” )
5 - Call mediaManeger.upload
return mediaManager.upload(
“/myUploadFolder” ,
imgBuffer,
“myFileName.jpg” , {
“mediaOptions” : {
“mimeType” : “image/jpeg” ,
“mediaType” : “image”
},
“metadataOptions” : {
“isPrivate” : false ,
“isVisitorUpload” : false ,
“context” : {
“someKey1” : “someValue1” ,
“someKey2” : “someValue2”
}
}
}
)
.then(image => {
console.log( “UPLOAD OK image =” , image)
return image
})
. catch ((err) => {
console.log( "UPLOAD Image failed import: " , err)
return err
})
Remarks:
1 - Filename (myFileName.jpg) needs to match base64 string and the “mimeType”: “image/jpeg”.
I uploaded a png (base64 and mineType) but used fileName.jpg ang get bad image.
Hello, what did you do to resolve this? Are you able to paste the code that fixed your uploading issue?
Does not work for me. I’m using Google Cloud storage to store my files.
BTW - how do you pass the file content from the page to the backend? I’ve used html for that. I know that you cannot send more than 200KB to the backend code.
You can definitely send more than 10KB. I’ve used it to store video and audio files more than 50MB in size.
I believe you can use Wix Fetch to do it, but I’m also doing it with HTML via XHR, because I wanted to be able to show progress (which works now btw!). I send the file buffer via formdata
