We Keep Coding

Send canvas.toDataURL images to nodejs

I'm trying to send image from front-end script to my server.
Front-end script:
var img_data = canvas.toDataURL('image/jpg'); // contains screenshot image
// Insert here POST request to send image to server
And I'm trying to accept the data in the backend and store it into req.files to be able to access like this:
const get_image = (req, res) => {
const File = req.files.File.tempFilePath;
}
What way can I do to send the image to the server and get the image like in the example above?

your img_data is a base 64 string, which you can send to server directly in a post request
e.g.
await fetch('/api/path', { method: 'POST', headers: { "content-type": "application/json"}, body: JSON.stringify({ file: img_data }) });
On your backend, you can convert this string to binary, and save to file.
var fs = require('fs');
app.post('/api/path', async (req, res) => {
const img = req.body.file;
var regex = /^data:.+\/(.+);base64,(.*)$/;
var matches = string.match(regex);
var ext = matches[1];
var data = matches[2];
var buffer = Buffer.from(data, 'base64'); //file buffer
.... //do whatever you want with the buffer
fs.writeFileSync('imagename.' + ext, buffer); //if you do not need to save to file, you can skip this step.
....// return res to client
})

You have to convert it to a Blob first, and then append it to a Form. The form would be the body of the request that you send to server.
canvas.toBlob(function(blob){
var form = new FormData(),
request = new XMLHttpRequest();
form.append("image", blob, "filename.png");
request.open("POST", "/upload", true);
request.send(form);
}, "image/png");

How to upload HTMLAudioElement audio file to node server?

I'm currently playing an audio file using an external URL:
const url = 'http://s5.qhres.com/static/465f1f953f1e6ff2.mp3';
const audio = new Audio(url);
audio.play();
How can I programmatically upload this file to the node server? (so the mp3 file can be stored in the server)
Should I get the audio data and send it to the server using fetch()?
Some guidance would be appreciated.

This is how you can implement an upload function to upload your audioFile
first we download the file turn it into binary
second we uploaded
For the backend in nodejs you can use multer with express to setup and upload API so you can receive the file this is a guide that can help you
TBN : Read the code comment and you will understand how it works
// load status span
let Status = document.getElementById("status");
// messages for status
const DOWN_START = "File is being downloaded ...";
const DOWN_SUCCESS = "File is downloaded ...";
const DOWN_FAIL = "File failed to download with : ";
const UPLOAD_START = "File is being Uploaded ";
const UPLOAD_SUCCESS = "File is Uploaded";
const UPLOAD_FAILD = "File failed to upload with : ";
// function to update status span
const updateStatusMsg = (msg) => {
Status.innerHTML = msg;
};
// instansiate XMLHttpRequest
let downloadReq = new XMLHttpRequest();
let fileUrl = null;
// XMLHttpRequest Progress Listeners
downloadReq.addEventListener("progress", () => updateStatusMsg(DOWN_START));
downloadReq.addEventListener("load", () => updateStatusMsg(DOWN_SUCCESS));
downloadReq.addEventListener("error", () => updateStatusMsg(DOWN_FAIL));
// Grab url from input
const getUrl = (self) => {
fileUrl = self.value;
};
// Download File
const getFile = () => {
// [TIP] here i added a proxy for the app so you can have a valid cors so it can work locally
downloadReq.open(
"GET",
"https://api.allorigins.win/get?url=" + encodeURIComponent(fileUrl),
true
);
downloadReq.responseType = "blob";
// Setup listener onLoad
downloadReq.onload = function () {
//When the file is downloaded we pass it to the upload function
uploadFile(downloadReq.response);
// if you want also to read the file and play it you can use this
let reader = new FileReader();
reader.readAsDataURL(downloadReq.response);
reader.onload = function (e) {
console.log(reader);
console.log("DataURL:", e.target.result);
};
};
// Start Request
downloadReq.send();
};
// Upload
const uploadFile = (blob) => {
// Create A file
let audioFile = new File([blob], "audioFile");
updateStatusMsg(UPLOAD_START);
// Sending Using fetch here you can add your node.js End point
fetch("http://www.example.net", {
method: "POST",
headers: {
"Content-Type": "Your Content Type",
},
body: audioFile,
})
.then((response) => response.json())
.then((success) => updateStatusMsg(UPLOAD_SUCCESS))
.catch((error) => updateStatusMsg(UPLOAD_FAILD + error.message));
};
<input type="text" placeholder="Enter the file link" onchange="getUrl(this)" />
<input type="button" value="Upload File" onClick="getFile()" />
<br />
<span id="status"></span>

Gcloud API file.save() data format

I'm using the gcloud API on a Nodejs web server to upload files. I'd prefer the files not be uploaded on the client side and instead uploaded on the server. Currently, I am producing a blob on the client side, then converting it to text and passing that to the server through a POST request. All of the information gets successfully passed from the client to the server as expected. This data is also uploaded to gcloud, however, Gcloud does not recognize this as a valid file nor does my computer when I download it.
What is the best way to get the contents of the file to gcloud from the server side? I've tried using dataURIs and reading the orignal file by text and both produce similiar issues. I've also explored piping a readFileStream from the blob on the server end but blobs are not natively supported by node so I have not done so yet.
Client Side
function readSingleFile(e, func, func2){
var file = e.target.files[0];
if(!file){
return; // Add error msg_here
}
var reader = new FileReader();
reader.onload = function(e){
let contents = e.target.result;
let img = document.createElement('img')
let cvs = document.createElement('canvas');
img.onload = ()=>{
cvs.width = img.width;
cvs.height= img.height;
let ctx = cvs.getContext('2d');
ctx.drawImage(img,0,0);
cvs.toBlob((res)=>{res.text().then((text)=>{func2(text)})}, "image/jpeg", 0.92);
}
img.src=contents;
func(contents);
}
reader.readAsDataURL(file);
}
Server Side
function publishPrintjob(dataObj){
try{
var newElemKey = database.ref().child('queue').push().key; // Get random Key
// Create a new blob in the bucket and upload the file data.
const gcloudFile = storage.file('images/' + newElemKey + '.jpg');
gcloudFile.save(dataObj.sockImageFile, function(err) {
if (!err) {
Console.log("File Uploaded!")
}
});
var data = {
date: dataObj.Date,
email: dataObj.email,
design: dataObj.Design,
author: dataObj.Author,
address: dataObj.address,
imageKey: newElemKey,
}
admin.database().ref('queue/' + newElemKey).set(data);
} catch(err){
console.log(err)
}
}
Note: func simply shows the image on the client side, func2 just adds the contents to the POST object.

Uploading a file directly from the computer would be easiest using the storage.bucket(bucketName).upload() function from the cloud storage library. However, this uses location of a file locally and thus will not work unless a file is transferred to the server and saved first. This could be achieved using multi-part form data. Using multipart or uploading locally are better methods for uploading to google storage.
Instead, I solve this by first converting the image to a dataURI, sending the data URI to the server via the body of a GET request, and then converting it to a buffer with a readable stream that can be piped to google storage.
Client
let formData = getFormData('myForm');
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Typical action to be performed when the document is ready:
}
};
xhttp.open("POST", "dashboard", true);
xhttp.setRequestHeader('Content-Type', 'application/json');
xhttp.send(JSON.stringify(formData));
xhttp.onload = ()=> {
console.log(JSON.parse(xhttp.response))
// Handle server response here
};
}
Server
// DataObject is the body of the GET request, the property imageFile is the URI from readFileAsURI
function uploadImageOnServer(dataObj){
try{
var newElemKey = database.ref().child('queue').push().key; // Get random Key to use as filename
// Create a new blob in the bucket and upload the file data.
const gcloudFile = storage.file('images/' + newElemKey + '.jpeg');
var fs = require('fs'); // Should be required at the top of the file
var string = dataObj.ImageFile;
var regex = /^data:.+\/(.+);base64,(.*)$/;
var matches = string.match(regex);
var ext = matches[1];
var data = matches[2];
var buffer = Buffer.from(data, 'base64');
// Create the readstream
const readableInstanceStream = new Readable({
read() {
this.push(buffer);
this.push(null);
}
});
readableInstanceStream.pipe(gcloudFile.createWriteStream()) // link to gcloud storage api
.on('error', function(err) {
console.log('error')
})
.on('finish', function() {
console.log('upload complete')
});
} catch(err){
console.log(err)
}
}

How to post image to server from web camera canvas using toDataURL() ? javascript

I want to send image from capture by web camera then send to server for store that image.
function captureAndSendToServer() {
const player = document.getElementById('player')
const canvas = document.getElementById('canvas')
const context = canvas.getContext('2d')
context.drawImage(player, 0, 0, canvas.width, canvas.height)
var image = canvas.toDataURL("image/png")
// var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
axios
.post('http://localhost:3000/sendImageToCloudinary', image)
.then(response => {
console.log(response)
})
}
I using Cloudinary to store Image, the server code:
exports.sendImageToCloudinary = (req, res) => {
console.log(req.body)
cloudinary.v2.uploader.upload(req.body,
function (error, result) {
if (err) throw error
console.log(result)
res.json(result)
})
}
The error is
PayloadTooLargeError: request entity too large
And i've tried to console.log(image) and that output hundreds of thousands words.
So, what is the correct way to do that, thank you,

You can try something like the following-
var file = <your_file>;
var formdata = new FormData();
formdata.append('file', file);
formdata.append('cloud_name', '<cloud_name>');
formdata.append('resource_type', 'image');
formdata.append('upload_preset', '<upload_preset>');
var xhr = new XMLHttpRequest();
xhr.open('POST', "https://api.cloudinary.com/v1_1/<cloud_name>/image/upload",true);
xhr.onload = function () {
// do something to response
//console.log(this.responseText);
};
xhr.send(formdata);

Cannot open downloaded file from S3 with angular and NodeJS

I´m trying to download an jpg image from amazon S3 using the NodeJs SDK. I´m able to get the file object on the backend. However when I try to create a blob object and download it from angular, I cannot open the file. When I try to open it with any image editor I get an error as if the file is damaged or incorrectly formatted.
Here´s my Node JS code:
function downloadFile(file,callback) {
//Arranging file name
var fileKey = file.lifeCycle + "/" + file.id + "." + file.extension;
// download the file via aws s3 here
console.log('Trying to download file', file.id);
var AWS = require('aws-sdk');
var s3 = new AWS.S3();
var s3Params = {
Bucket: 'myBucket',
Key: fileKey
};
/*
res.attachment(fileKey);
var fileStream = s3.getObject(s3Params).createReadStream();
fileStream.pipe(res);
*/
s3.getObject(s3Params, function (err, data) {
if (err === null) {
res.send(data);
} else {
res.status(500).send(err);
}
callback(null);
});
}
});
The angular code:
vm.fileData = new ApiDownloadFile({fileId: 1});
vm.downloadFile = function(){
console.log("Downloading...");
vm.fileData.$query()
.then(function(response){
$log.log(response);
window.BlobBuilder = window.BlobBuilder ||
window.WebKitBlobBuilder ||
window.MozBlobBuilder ||
window.MSBlobBuilder;
console.dir(response.headers);
var blob = new Blob(response.Body.data,{type:response['content-type']});
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = "1.jpg";
link.click();
},function(err){
$log.log(err);
});
};

I solved the problem. The issue seemed to be with the Uint8 conversion.
I added this lines and it worked fine:
.then(function(response) {
try{
$log.log(response);
var arrayBufferView = new Uint8Array(response.Body.data); // Convert the response to fix the problem of opening the file
$log.log(arrayBufferView);
var file = new Blob( [arrayBufferView], {type: response.ContentType});