Base64 encode file in map function
I need to create my own file array to send to a REST. I send some files true a form and need to base64 encode the file value in the array.
What is the best way to do the in React. I need the content file part to be base64 encoded. Right now i just get the following in my consol.log.
0: "content: '[object File]', fileName: 'download.jpg', contentType: 'image/jpeg', length: '16344'"
1: "content: '[object File]', fileName: 'download2.jpg', contentType: 'image/jpeg', length: '8903'"
I need the [object File] to be base64 encoded.
var files = Array.from(values.file);
const filesToUpload = files.map((file) =>
"content: '" + file + "', fileName: '" + file.name + "', contentType: '" + file.type + "', length: '" + file.size + "'");
console.log(filesToUpload);
reactjs encoding
asked yesterday
ComCool
50211
add a comment |
I need to create my own file array to send to a REST. I send some files true a form and need to base64 encode the file value in the array.
What is the best way to do the in React. I need the content file part to be base64 encoded. Right now i just get the following in my consol.log.
0: "content: '[object File]', fileName: 'download.jpg', contentType: 'image/jpeg', length: '16344'"
1: "content: '[object File]', fileName: 'download2.jpg', contentType: 'image/jpeg', length: '8903'"
I need the [object File] to be base64 encoded.
var files = Array.from(values.file);
const filesToUpload = files.map((file) =>
"content: '" + file + "', fileName: '" + file.name + "', contentType: '" + file.type + "', length: '" + file.size + "'");
console.log(filesToUpload);
reactjs encoding
asked yesterday
ComCool
50211
Do you want to convert base64Image to file or reverse?
– Harish Soni
yesterday
I want to convert the [object File] to a base46 string.
– ComCool
yesterday
add a comment |
I need to create my own file array to send to a REST. I send some files true a form and need to base64 encode the file value in the array.
What is the best way to do the in React. I need the content file part to be base64 encoded. Right now i just get the following in my consol.log.
0: "content: '[object File]', fileName: 'download.jpg', contentType: 'image/jpeg', length: '16344'"
1: "content: '[object File]', fileName: 'download2.jpg', contentType: 'image/jpeg', length: '8903'"
I need the [object File] to be base64 encoded.
var files = Array.from(values.file);
const filesToUpload = files.map((file) =>
"content: '" + file + "', fileName: '" + file.name + "', contentType: '" + file.type + "', length: '" + file.size + "'");
console.log(filesToUpload);
reactjs encoding
asked yesterday
ComCool
50211
I need to create my own file array to send to a REST. I send some files true a form and need to base64 encode the file value in the array.
What is the best way to do the in React. I need the content file part to be base64 encoded. Right now i just get the following in my consol.log.
0: "content: '[object File]', fileName: 'download.jpg', contentType: 'image/jpeg', length: '16344'"
1: "content: '[object File]', fileName: 'download2.jpg', contentType: 'image/jpeg', length: '8903'"
I need the [object File] to be base64 encoded.
var files = Array.from(values.file);
const filesToUpload = files.map((file) =>
"content: '" + file + "', fileName: '" + file.name + "', contentType: '" + file.type + "', length: '" + file.size + "'");
console.log(filesToUpload);
reactjs encoding
reactjs encoding
asked yesterday
ComCool
50211
asked yesterday
ComCool
50211
edited yesterday
asked yesterday
ComCool
50211
asked yesterday
ComCool
50211
asked yesterday
ComCool
50211
50211
Do you want to convert base64Image to file or reverse?
– Harish Soni
yesterday
I want to convert the [object File] to a base46 string.
– ComCool
yesterday
add a comment |
Do you want to convert base64Image to file or reverse?
– Harish Soni
yesterday
I want to convert the [object File] to a base46 string.
– ComCool
yesterday
Do you want to convert base64Image to file or reverse?
– Harish Soni
yesterday
Do you want to convert base64Image to file or reverse?
– Harish Soni
yesterday
I want to convert the [object File] to a base46 string.
– ComCool
yesterday
I want to convert the [object File] to a base46 string.
– ComCool
yesterday
add a comment |
1 Answer
1
active
oldest
votes
You can use a FileReader to read a file and output Base64-encoded data. You will have to wrap the call in a Promise and then use that to map the array.
I've prepared a quick example for you. Note that when you map a File to a function returning a Promise, you will have to await all the Promises before continuing.
const input = document.querySelector ("#files");
function getBase64 (file) {
return new Promise ((resolve, reject) => {
const reader = new FileReader ();
reader.readAsDataURL (file);
reader.onload = _ => resolve (reader.result);
reader.onerror = e => reject (e);
});
}
input.onchange = () => {
let files = Array.from (input.files);
files = files.map (async file => ({
content: await getBase64 (file),
fileName: file.name,
contentType: file.type,
length: file.size
}));
Promise.all (files).then (result => console.log (result));
}<input id="files" type="file" multiple>answered yesterday
NikxDa
2,81111531
How do I mix this with the code I got so I get somewhing like.0: "content: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMTEhUUExMWFhUXGSAaGBgYGB8fHxs', fileName: 'download.jpg', contentType: 'image/jpeg', length: '16344'"
– ComCool
yesterday
Simply map to a full object. I have updated my answer.
– NikxDa
yesterday
How do I then turn my result into a var I can use?
– ComCool
yesterday
You can use it. I print it usingconsole.log, but you can do anything you want.
– NikxDa
yesterday
I just can't tovar test = result. Not that easy when it's async. I need to use the array data to post to my REST API togehter with some other for data.
– ComCool
21 hours ago
|
show 1 more comment
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53944533%2fbase64-encode-file-in-map-function%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can use a FileReader to read a file and output Base64-encoded data. You will have to wrap the call in a Promise and then use that to map the array.
I've prepared a quick example for you. Note that when you map a File to a function returning a Promise, you will have to await all the Promises before continuing.
const input = document.querySelector ("#files");
function getBase64 (file) {
return new Promise ((resolve, reject) => {
const reader = new FileReader ();
reader.readAsDataURL (file);
reader.onload = _ => resolve (reader.result);
reader.onerror = e => reject (e);
});
}
input.onchange = () => {
let files = Array.from (input.files);
files = files.map (async file => ({
content: await getBase64 (file),
fileName: file.name,
contentType: file.type,
length: file.size
}));
Promise.all (files).then (result => console.log (result));
}<input id="files" type="file" multiple>answered yesterday
NikxDa
2,81111531
How do I mix this with the code I got so I get somewhing like.0: "content: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMTEhUUExMWFhUXGSAaGBgYGB8fHxs', fileName: 'download.jpg', contentType: 'image/jpeg', length: '16344'"
– ComCool
yesterday
Simply map to a full object. I have updated my answer.
– NikxDa
yesterday
How do I then turn my result into a var I can use?
– ComCool
yesterday
You can use it. I print it usingconsole.log, but you can do anything you want.
– NikxDa
yesterday
I just can't tovar test = result. Not that easy when it's async. I need to use the array data to post to my REST API togehter with some other for data.
– ComCool
21 hours ago
|
show 1 more comment
You can use a FileReader to read a file and output Base64-encoded data. You will have to wrap the call in a Promise and then use that to map the array.
I've prepared a quick example for you. Note that when you map a File to a function returning a Promise, you will have to await all the Promises before continuing.
const input = document.querySelector ("#files");
function getBase64 (file) {
return new Promise ((resolve, reject) => {
const reader = new FileReader ();
reader.readAsDataURL (file);
reader.onload = _ => resolve (reader.result);
reader.onerror = e => reject (e);
});
}
input.onchange = () => {
let files = Array.from (input.files);
files = files.map (async file => ({
content: await getBase64 (file),
fileName: file.name,
contentType: file.type,
length: file.size
}));
Promise.all (files).then (result => console.log (result));
}<input id="files" type="file" multiple>answered yesterday
NikxDa
2,81111531
How do I mix this with the code I got so I get somewhing like.0: "content: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMTEhUUExMWFhUXGSAaGBgYGB8fHxs', fileName: 'download.jpg', contentType: 'image/jpeg', length: '16344'"
– ComCool
yesterday
Simply map to a full object. I have updated my answer.
– NikxDa
yesterday
How do I then turn my result into a var I can use?
– ComCool
yesterday
You can use it. I print it usingconsole.log, but you can do anything you want.
– NikxDa
yesterday
I just can't tovar test = result. Not that easy when it's async. I need to use the array data to post to my REST API togehter with some other for data.
– ComCool
21 hours ago
|
show 1 more comment
You can use a FileReader to read a file and output Base64-encoded data. You will have to wrap the call in a Promise and then use that to map the array.
I've prepared a quick example for you. Note that when you map a File to a function returning a Promise, you will have to await all the Promises before continuing.
const input = document.querySelector ("#files");
function getBase64 (file) {
return new Promise ((resolve, reject) => {
const reader = new FileReader ();
reader.readAsDataURL (file);
reader.onload = _ => resolve (reader.result);
reader.onerror = e => reject (e);
});
}
input.onchange = () => {
let files = Array.from (input.files);
files = files.map (async file => ({
content: await getBase64 (file),
fileName: file.name,
contentType: file.type,
length: file.size
}));
Promise.all (files).then (result => console.log (result));
}<input id="files" type="file" multiple>answered yesterday
NikxDa
2,81111531
You can use a FileReader to read a file and output Base64-encoded data. You will have to wrap the call in a Promise and then use that to map the array.
I've prepared a quick example for you. Note that when you map a File to a function returning a Promise, you will have to await all the Promises before continuing.
const input = document.querySelector ("#files");
function getBase64 (file) {
return new Promise ((resolve, reject) => {
const reader = new FileReader ();
reader.readAsDataURL (file);
reader.onload = _ => resolve (reader.result);
reader.onerror = e => reject (e);
});
}
input.onchange = () => {
let files = Array.from (input.files);
files = files.map (async file => ({
content: await getBase64 (file),
fileName: file.name,
contentType: file.type,
length: file.size
}));
Promise.all (files).then (result => console.log (result));
}<input id="files" type="file" multiple>const input = document.querySelector ("#files");
function getBase64 (file) {
return new Promise ((resolve, reject) => {
const reader = new FileReader ();
reader.readAsDataURL (file);
reader.onload = _ => resolve (reader.result);
reader.onerror = e => reject (e);
});
}
input.onchange = () => {
let files = Array.from (input.files);
files = files.map (async file => ({
content: await getBase64 (file),
fileName: file.name,
contentType: file.type,
length: file.size
}));
Promise.all (files).then (result => console.log (result));
}<input id="files" type="file" multiple>const input = document.querySelector ("#files");
function getBase64 (file) {
return new Promise ((resolve, reject) => {
const reader = new FileReader ();
reader.readAsDataURL (file);
reader.onload = _ => resolve (reader.result);
reader.onerror = e => reject (e);
});
}
input.onchange = () => {
let files = Array.from (input.files);
files = files.map (async file => ({
content: await getBase64 (file),
fileName: file.name,
contentType: file.type,
length: file.size
}));
Promise.all (files).then (result => console.log (result));
}<input id="files" type="file" multiple>answered yesterday
NikxDa
2,81111531
edited yesterday
answered yesterday
NikxDa
2,81111531
answered yesterday
NikxDa
2,81111531
answered yesterday
NikxDa
2,81111531
2,81111531
How do I mix this with the code I got so I get somewhing like.0: "content: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMTEhUUExMWFhUXGSAaGBgYGB8fHxs', fileName: 'download.jpg', contentType: 'image/jpeg', length: '16344'"
– ComCool
yesterday
Simply map to a full object. I have updated my answer.
– NikxDa
yesterday
How do I then turn my result into a var I can use?
– ComCool
yesterday
You can use it. I print it usingconsole.log, but you can do anything you want.
– NikxDa
yesterday
I just can't tovar test = result. Not that easy when it's async. I need to use the array data to post to my REST API togehter with some other for data.
– ComCool
21 hours ago
|
show 1 more comment
How do I mix this with the code I got so I get somewhing like.0: "content: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMTEhUUExMWFhUXGSAaGBgYGB8fHxs', fileName: 'download.jpg', contentType: 'image/jpeg', length: '16344'"
– ComCool
yesterday
Simply map to a full object. I have updated my answer.
– NikxDa
yesterday
How do I then turn my result into a var I can use?
– ComCool
yesterday
You can use it. I print it usingconsole.log, but you can do anything you want.
– NikxDa
yesterday
I just can't tovar test = result. Not that easy when it's async. I need to use the array data to post to my REST API togehter with some other for data.
– ComCool
21 hours ago
How do I mix this with the code I got so I get somewhing like.
0: "content: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMTEhUUExMWFhUXGSAaGBgYGB8fHxs', fileName: 'download.jpg', contentType: 'image/jpeg', length: '16344'"– ComCool
yesterday
How do I mix this with the code I got so I get somewhing like.
0: "content: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMTEhUUExMWFhUXGSAaGBgYGB8fHxs', fileName: 'download.jpg', contentType: 'image/jpeg', length: '16344'"– ComCool
yesterday
Simply map to a full object. I have updated my answer.
– NikxDa
yesterday
Simply map to a full object. I have updated my answer.
– NikxDa
yesterday
How do I then turn my result into a var I can use?
– ComCool
yesterday
How do I then turn my result into a var I can use?
– ComCool
yesterday
You can use it. I print it using
console.log, but you can do anything you want.– NikxDa
yesterday
You can use it. I print it using
console.log, but you can do anything you want.– NikxDa
yesterday
I just can't to
var test = result. Not that easy when it's async. I need to use the array data to post to my REST API togehter with some other for data.– ComCool
21 hours ago
I just can't to
var test = result. Not that easy when it's async. I need to use the array data to post to my REST API togehter with some other for data.– ComCool
21 hours ago
|
show 1 more comment
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53944533%2fbase64-encode-file-in-map-function%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Do you want to convert base64Image to file or reverse?
– Harish Soni
yesterday
I want to convert the [object File] to a base46 string.
– ComCool
yesterday