I have the following tensor in nodejs:
I then encode it to PNG like so:
const encodedTensor = await tf.node.encodePng(intTensor);
And pipe it to the frontend like this:
fs.writeFileSync("image.png", encodedTensor);
const readStream = fs.createReadStream('image.png');
readStream.pipe(res);
Finally, this is what shows up in my console:
What is this format? and how can I download the image on the client?
Or is there any other way of converting the tensor to images in nodejs and then downloading it on the client?
Thank you
It turns out that the ouptut in the console is a stringified/damaged version of uint8 array. It gets damaged while being sent from the server to client.
That's why instead of sending it as an int8 array I converted it to a buffer on the server, and then the buffer to a base64 string like so:
const encodedTensor = await tf.node.encodePng(tensor);
const data = Buffer.from(encodedTensor).toString("base64");
res.send(data);
After that I used this function to download the image on the client:
function downloadBase64File(contentType, base64Data, fileName) {
const linkSource = `data:${contentType};base64,${base64Data}`;
const downloadLink = document.createElement("a");
downloadLink.href = linkSource;
downloadLink.download = fileName;
downloadLink.click();
}
downloadBase64File("image/png", response.data, "image.png");
Hope it helps someone.
Related
I'm currently trying to send my files to my express server but every time I try and send my request the body is empty. After some research, it seems like they would not be stored in req.body so I'm not sure how to actually access the files that I've stored in my formdata.
Clientside code
export default async function UploadToFireStorage(accepetedfiles,fileVals){//Index are 1-1
const formData = new FormData();
formData.append('files', accepetedfiles);
try{
const response = await fetch(`https://someUrl`,{
method:"POST",
body: JSON.stringify(formData)
})
const jsonData = await response.json()
console.log(jsonData) //Attempt to see how my req is formed
}catch(error){
console.log(error)
}
}
express code
app.post('/uploadNewFiles',async(req,res)=>{
try{
const files = req.? // im not sure what to access after sending my formdata
for(let file = 0;file < files.length;file++){
let storageRef = ref(storage, `files/${files[file].path}`);
let uploadTask = await uploadBytesResumable(storageRef, files[file]);
}
res.json(files)
}catch(error){
res.json('Error: ' + error)
}
})
So just to clarify my question. I know when I make a fetch request I can package data that needs to be sent so I can post it and then extract it using something like let someVar = req.body.someVar and I've tried that with my file array but am unable to get my file array back and i'm not totally sure how to access it from req.
To properly post the files, don't use JSON.stringify. Set the body equal to formData directly. See this answer for more detail.
On the server side, you'll need to use a body parser that can handle multi-part form data, like multer . See this answer for more detail.
I have a response containing an image in png format,but I am unable to display it in react since it is not a url
pic of response
does anyone know how I can convert this png into a URL so I can insert it into my src of img tag?
This is something I did when I was doing a similar thing in a React project.
1) Assuming the following:
The response that we get from the API is not BASE64 encoded
The responseType is not specified in the request
A png is the response
The response data will look like this :
With characters that does not look friendly.
2) With changed responseType
Set responseType: "arraybuffer" in the request
The response will now have arrayBuffer in data of the response
The response can then be converted to base64 by
let base64ImageString = Buffer.from(response.data, 'binary').toString('base64')
If you want to display it on an img tag, then
prepend data:image/png;base64, to the Base64 string
let srcValue = "data:image/png;base64,"+base64ImageString
But in your case, it seems like you are only getting the file name as a string and not the file itself.
Why not treat imege you need as Bese64 string? If you're able to convert you png image to a Base64 string (server side obviously) you can easily use it in img tag as src attribute value.
If you have the image inside your application ( assets folder or whatever ) you could display it like that
<img src={`assets/${coverImage}`}>
Else The image should be sent from the API in the base64 format and then you could simply display it like that.
data = "base64 image"
<img src={`data:image/jpeg;base64,${data}`} />
same in my case. "react": "17.0.1", "react-native": "0.64.2",
my response contains png image(no URL, no base64),
I converted my response into base64 as below,
const makeApiRequest = async()=>{
try {
const response = await apiCaller('ProfileImage',{"thisID": "ABCD","thatID": "1234"})
if(response.status === 200){
const dataResponse = await response.blob()
let blob = new Blob([dataResponse], { type: "text/plain" });
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function () {
var base64String = reader.result;
setImageFromAPI(base64String.substr(base64String.indexOf(', ') + 1)); //Setting response to hook
}
}else{
console.log(response.status)
}
} catch (error) {
console.log("components/profile/ProfileTimeline.js:-",error)
}
}
But when I use it in my image tag its shows no image, and i don't know why
<Image source={{uri: `data:image/png;base64,${imagefromAPI}`}} style={{width:100, height:100}} resizeMode="cover" />
I am trying to get an presigned url image upload working correctly. Currently the upload succeeds when selecting an image from the IOS simulator, however when I actually try to view the file it seems the file is corrupted and will not open as an image. I suspect it has something to do with my FormData but not sure.
export async function receiptUpload(file) {
const date = new Date();
const headers = await getAWSHeaders();
const presignUrl = await request.post(
urls.fileUpload.presignUpload,
{file_name: `${date.getTime()}.jpg`},
{headers}
)
.then(res => res.data);
const formData = new FormData();
formData.append('file', {
name: `${date.getTime()}.jpg`,
uri: file.uri,
type: file.type
});
const fileUpload = presignUrl.presignUrl && await request.put(
presignUrl.presignUrl,
formData
)
.then(res => res.status === 200);
}
I have tried from other fixes to change the file uri like so...
Platform.OS === 'android' ? file.uri : file.uri.replace('file://', '');
however this does not seem to work either.
I did this just recently in my current project and the following code is a working example for my use case. I didn't need to convert to a blob either though I am uploading to AWS S3 so if you are uploading elsewhere that may be the issue.
export const uploadMedia = async (fileData, s3Data, setUploadProgress = () => {}) => {
let sendData = { ...fileData };
sendData.data.type = sendData.type;
let formData = new FormData();
formData.append('key', s3Data.s3Key);
formData.append('Content-Type', fileData.type);
formData.append('AWSAccessKeyId', s3Data.awsAccessKey);
formData.append('acl', 'public-read');
formData.append('policy', s3Data.s3Policy);
formData.append('signature', s3Data.s3Signature);
formData.append('file', sendData.data);
return axios({
method: 'POST',
url: `https://${s3Data.s3Bucket}.s3.amazonaws.com/`,
data: formData,
onUploadProgress: progressEvent => {
let percentCompleted = Math.floor((progressEvent.loaded * 100) / progressEvent.total)
setUploadProgress(percentCompleted);
}
})
}
I would first check to see where the issue is occurring. After uploading can you view it on whatever storage service you are trying to upload it to. If so it's something on React Native side. If it doesn't ever get uploaded to the location you know its an error in your upload process. Might help you track the exact location of the error.
I had to do this recently for a project. I believe the data is a base64 string when coming directly from the file input. So the issue is your are uploading a base64 string not the image by simply passing the data field. I had to process it before uploading to the signed URL with the following method.
private dataUriToBlob(dataUri) {
const binary = atob(dataUri.split(',')[1]);
const array = [];
for (let i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], { type: 'image/jpeg' });
}
This answer fixed it for me: How can I upload image directly on Amazon S3 in React Native?
I had tried uploading with axios and fetch with FormData. The download went through but the image file was not readable, even when downloaded to my Mac from the S3 console:
The file "yourfile.jpg" could not be opened. It may be damaged or use a file format that Preview doesn’t recognize.
Only after trying to upload with XHR with the correct Content-Type header did it work. Your signedUrl should be correct as well, which seems to be the case if the download goes through.
I'm trying to convert an audio file into a Base64String to upload to a server.
For certain reasons, I want to do this on the phone before I upload this. I'm using React Native inside the Expo kit.
My file structure looks like this:
let uriParts = uri.split('.');
let fileType = uriParts[uriParts.length - 1];
let formData = new FormData();
formData.append('file', {
uri,
name: `file.${fileType}`,
type: `audio/${fileType}`,
});
Assume we have the uri and it's a .wav audio file
I was able to do this conversion with a NodeJS server with multer doing the heavy lifting.
It would give a buffer to the route and then I could convert the buffer to a base64 string and then send it to another server to process the buffer.
Any idea how can get this done on React Native or purely on the frontend?
Thanks!
You can use FileReader class.
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
console.log(reader.result);
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
Or you can send as a blob (It is not base64).
Use https://github.com/wkh237/react-native-fetch-blob library
I'm trying to upload audio file to Firebase Storage in my Ionic2 project.
First I recorded a audio file using Media plugin (Cordova plugin), and this file is playing well. From the Android storage and from the media plugin method (this.media.play()...;).
Second I need to push the recorded file to Firebase Storage.
this is my code:
let storageRef = firebase.storage().ref();
let metadata = {
contentType: 'audio/mp3',
};
let filePath = `${this.file.externalDataDirectory}`+`${this.fileName}`;
const voiceRef = storageRef.child(`voices/${this.fileName}`);
var blob = new Blob([filePath], {type: 'audio/mp3'});
voiceRef.put(blob);
After reading the Firebase doc, I can push blob to Firebase.
The file is successfully pushed to Firebase Storage with empty data (95 Byte).
this is screenshot:
The problem isn't a Firebase issue
My problem is solved by using the File cordova plugin method (readAsDataURL()) and the putString(fileBase64,firebase.storage.StringFormat.DATA_URL) method.
First, I create a file reference:
let filePath = "this.file.externalDataDirectory" + "this.fileName";
Then I transform the file to a base64 string by using the readAsDataURL method that returns a promise containing the file as a string base64. Also, I push the file to Firebase using the putString method that has two parameters the File that returned by the readAsDataURL and the second is firebase.storage.StringFormat.DATA_URL.
My Final code:
let storageRef = firebase.storage().ref();
let metadata = {
contentType: 'audio/mp3',
};
let filePath = `${this.file.externalDataDirectory}` + `${this.fileName}`;
this.file.readAsDataURL(this.file.externalDataDirectory, this.fileName).then((file) => {
let voiceRef = storageRef.child(`voices/${this.fileName}`).putString(file, firebase.storage.StringFormat.DATA_URL);
voiceRef.on(firebase.storage.TaskEvent.STATE_CHANGED, (snapshot) => {
console.log("uploading");
}, (e) => {
reject(e);
console.log(JSON.stringify(e, null, 2));
}, () => {
var downloadURL = voiceRef.snapshot.downloadURL;
resolve(downloadURL);
});
});
That's working fine for me.
Thanks.