I'm working on a REST web application that manages documents between users and uploaders. The backend is written in Java and my Document entity contains, besides various attributes, a byte[] content. I was able to send a file created at server side by
#GET
...
document.setContent(Files.readAllBytes(Paths.get("WEB-INF/testFile.txt")));
return Response.ok(document).build();
and retrieve it at front-end (vueJs) through
async function download(file) {
const fileURL = window.URL.createObjectURL(new Blob([atob(file.content)]));
const fileLink = document.createElement("a");
fileLink.href = fileURL;
fileLink.setAttribute("download",`${file.name}.${file.type}`);
document.body.appendChild(fileLink);
fileLink.click();
fileLink.remove;
window.URL.revokeObjectURL(fileURL);
}
the problem is that when I try to upload a file and then download it, its content is not parsed correctly (is shown undefined, string in Base64 or numbers depending on how I try to solve it). The file is sent by a post request and is retrieved through an input form bound to an onFileSelected function.
function onFileSelected(e) {
var reader = new FileReader();
reader.readAsArrayBuffer(e.target.files[0]);
reader.onloadend = (evt) => {
if (evt.target.readyState === FileReader.DONE) {
var arrayBuffer = evt.target.result;
this.file.content = new Uint8Array(arrayBuffer);
//this.file.content = arrayBuffer;
}
};
}
axios.post(...,document,...)
and I have tried using atob and btoa as well before assigning the value to this.file.content. If I print the file on server Welcome.txt it gives B#ae3b74d and if I use Arrays.toString(welcome.getContent()) it gives an array of numbers but as soon as it passed to the frontend its content become in Base64 welcome: { ... content: IFRoaXMgaXMgYSB0ZXN0IGZpbGUhIAo...}. Any idea? Thank you a lot!
My file is image link or any other file link. I was trying to call pinata pinFileToIpfs API (Documentation).
According to documentaion , i have to pass path of local file for appending. But i have AWS URL. How to still call the below API?
let data = new FormData();
data.append('file', fs.createReadStream('./yourfile.png'));
NOTE : I tried this also
data.append('file', s3.getObject({Bucket: myBucket, Key: myFile})
.createReadStream());
but it didnt worked out.
I spent 3 days on this and finally got it to work. The trick is that you will have a hard time POSTing a Stream directly to the Pinata API as it expects a File. I finally gave up and took the Stream coming from S3 and saved it to a temporary file on the server, then sent it to Pinata, then deleted the temp file. That works.
try
{
//Copy file from S3 to IPFS
AmazonS3.AmazonS3Utility m = new AmazonS3.AmazonS3Utility();
Stream myfile = m.GetObjectStream(fileName);
using (var client = new RestClient("https://api.pinata.cloud"))
{
//Add IPFS Metadata
JObject pinataOptions = new JObject(
new JProperty("cidVersion", "0")
);
string pO = JsonConvert.SerializeObject(pinataOptions, Formatting.Indented);
JObject pinataMetadata = new JObject(
new JProperty("name", fileName),
new JProperty("keyvalues",
new JObject(
new JProperty("file_url", FileUrl),
new JProperty("description", "")
)
));
string pM = JsonConvert.SerializeObject(pinataMetadata, Formatting.Indented);
string tempFile = AppDomain.CurrentDomain.BaseDirectory + #"temp\\" + fileName;
long fileLength;
using (FileStream outputFileStream = new FileStream(tempFile, FileMode.Create))
{
myfile.CopyTo(outputFileStream);
fileLength = outputFileStream.Length;
}
var request = new RestRequest("/pinning/pinFileToIPFS", Method.Post);
request.AddQueryParameter("pinata_api_key", your_APIKey);
request.AddQueryParameter("pinata_secret_api_key", your_SecretAPIKey);
request.AddParameter("pinataOptions", pO);
request.AddParameter("pinataMetadata", pM);
request.AddHeader("Authorization", your_Pinata_JWT);
request.AddFile("file", tempFile, fileName);
RestResponse response = await client.ExecutePostAsync(request);
File.Delete(tempFile);
return response.Content;
}
}
catch { }
I am using javascript and the Flask framework
I would like to retrieve in Flask in python the bytes of one or more files that the user will have chosen in my HTML page. To do this, when the user has chosen the files and has clicked on the send button, it triggers a function that uses the FileReader API to retrieve the base64 content of the file(s) that the user has selected.
After that, I would like to send the base64 data to flask with ajax.
But here is my problem, when I get the base64 string in python and compare it with the one in javascript, I notice the number of characters is exactly the same, but some characters are different as you can see on the screenshots below
size of character strings
And when I decode the base64 string, I get different bytes :
bytes variables
This makes me think that the problem is with the use of ajax
Code Python :
#app.route('/test', methods=['POST'])
def test():
if request.method == "POST":
files = eval(request.form.get("files"))
python_data = file.get("data")
javascript_data = "" # Copy from chrome console
len_python_data = len(python_data)
len_javascript_data = len(javascript_data)
base64_bytes_javascript = base64.b64decode(javascript_data)
base64_bytes_python = base64.b64decode(python_data)
Code Javascript :
let array_files = [];
let files_input = document.getElementById("files_input");
let files = files_input.files;
let reader = new FileReader();
function readFile(index) {
if( index >= files.length ) {
let data = "files=" + JSON.stringify(array_files);
$.ajax({
url: '/test',
type: 'POST',
data: data,
success: function (msg) {
console.log(msg)
}
});
return;
}
let file = files[index];
reader.name = file.name;
reader.onload = function() {
let file_info = {};
// get file content
let bin = this.result;
console.log(bin)
let data = bin.split(";")[1].replace("base64,", "");
file_info.name = reader.name;
file_info.data = data;
array_files.push(file_info);
readFile(index + 1)
}
reader.readAsDataURL(file);
}
readFile(0);
The problem is solved
In the base64 character string, the "+" were replaced by spaces after sending it to ajax.
I need to convert this C# code to JavaScript:
HttpClient client = new HttpClient();
string SECRET_KEY = "my_secret_key";
Byte[] bytes = System.IO.File.ReadAllBytes(#"c:\1.jpg");
string imagebase64 = Convert.ToBase64String(bytes);
var content = new StringContent(imagebase64);
var response = await client.PostAsync("https://api.openalpr.com/v2/recognize_bytes?recognize_vehicle=1&country=us&secret_key=" + SECRET_KEY, content).ConfigureAwait(false);
var buffer = await response.Content.ReadAsByteArrayAsync().ConfigureAwait(false);
var byteArray = buffer.ToArray();
var responseString = Encoding.UTF8.GetString(byteArray, 0, byteArray.Length);
I tried do this in JavaScript:
var file = document.querySelector('input[type="file"]').files[0];
getBase64(file).then(
data => $.ajax({
type: 'POST',
url: 'https://api.openalpr.com/v2/recognize_bytes?recognize_vehicle=1&country=br&secret_key=' + secret_key,
contentType: 'text/plain; charset=utf-8',
data: data,
success: function (ret) {
console.log(ret);
},
error: function (ret) {
console.log(ret);
}
}
Basically, both are intended converting an image to Base64 and send via POST to an API endpoint.
The conversion works as expected in both cases, however I get an error in JS.
Error 400: Error loading image
I don't have access to back end of this API and I don't have support.
I think some requirements are different, maybe the format of the type or something...
did you debugged the file variable where you are getting the base64 format . first try that and if this is not working try the below one to convert file to base64:
const toBase64 = file => new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
to call above method use : toBase64(file)
once the post request is formed check in the postman tool . I hope it will resolve your query .
I want to convert Base64String extracted from file(ex: "AAAAA....~") to a javascript file object.
The javascript file object what I mean is like this code:
HTML:
<input type="file" id="selectFile" >
JS:
$('#selectFile').on('change', function(e) {
var file = e.target.files[0];
console.log(file)
}
'file' variable is a javascript file object. So I want to convert a base64 string to the javascript file object like that.
I just want to get file object by decoding base64 string (encoded by other app from a file) without html file input form.
Thank you.
Way 1: only works for dataURL, not for other types of url.
function dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type:mime});
}
//Usage example:
var file = dataURLtoFile('data:text/plain;base64,aGVsbG8gd29ybGQ=','hello.txt');
console.log(file);
Way 2: works for any type of url, (http url, dataURL, blobURL, etc...)
//return a promise that resolves with a File instance
function urltoFile(url, filename, mimeType){
return (fetch(url)
.then(function(res){return res.arrayBuffer();})
.then(function(buf){return new File([buf], filename,{type:mimeType});})
);
}
//Usage example:
urltoFile('data:text/plain;base64,aGVsbG8gd29ybGQ=', 'hello.txt','text/plain')
.then(function(file){ console.log(file);});
const url = 'data:image/png;base6....';
fetch(url)
.then(res => res.blob())
.then(blob => {
const file = new File([blob], "File name",{ type: "image/png" })
})
Base64 String -> Blob -> File.
This is the latest async/await pattern solution.
export async function dataUrlToFile(dataUrl: string, fileName: string): Promise<File> {
const res: Response = await fetch(dataUrl);
const blob: Blob = await res.blob();
return new File([blob], fileName, { type: 'image/png' });
}
const file = new File([
new Blob(["decoded_base64_String"])
], "output_file_name");
You could use a lib like this to decode and encode base64 to arrayBuffer.
I had a very similar requirement (importing a base64 encoded image from an external xml import file. After using xml2json-light library to convert to a json object, I was able to leverage insight from cuixiping's answer above to convert the incoming b64 encoded image to a file object.
const imgName = incomingImage['FileName'];
const imgExt = imgName.split('.').pop();
let mimeType = 'image/png';
if (imgExt.toLowerCase() !== 'png') {
mimeType = 'image/jpeg';
}
const imgB64 = incomingImage['_#ttribute'];
const bstr = atob(imgB64);
let n = bstr.length;
const u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
const file = new File([u8arr], imgName, {type: mimeType});
My incoming json object had two properties after conversion by xml2json-light: FileName and _#ttribute (which was b64 image data contained in the body of the incoming element.) I needed to generate the mime-type based on the incoming FileName extension. Once I had all the pieces extracted/referenced from the json object, it was a simple task (using cuixiping's supplied code reference) to generate the new File object which was completely compatible with my existing classes that expected a file object generated from the browser element.
Hope this helps connects the dots for others.
Here is the Typescript version of accepted answer above by #cuixiping, now using Buffer instead of atob()
I saw deprecation warnings using atob() from TypeScript, although it isn't fully deprecated. Only one overload is. However, I converted mine to use the deprecation warning suggestion of Buffer. It seems more clean since it requires no extra loop to convert each character.
/***
* Converts a dataUrl base64 image string into a File byte array
* dataUrl example:
* data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIsAAACLCAYAAABRGWr/AAAAAXNSR0IA...etc
*/
dataUrlToFile(dataUrl: string, filename: string): File | undefined {
const arr = dataUrl.split(',');
if (arr.length < 2) { return undefined; }
const mimeArr = arr[0].match(/:(.*?);/);
if (!mimeArr || mimeArr.length < 2) { return undefined; }
const mime = mimeArr[1];
const buff = Buffer.from(arr[1], 'base64');
return new File([buff], filename, {type:mime});
}
at the top of the file you'll need an import to make the typings happy.
import { Buffer } from 'buffer';
No special npm packages are needed.
Heads up,
JAVASCRIPT
<script>
function readMtlAtClient(){
mtlFileContent = '';
var mtlFile = document.getElementById('mtlFileInput').files[0];
var readerMTL = new FileReader();
// Closure to capture the file information.
readerMTL.onload = (function(reader) {
return function() {
mtlFileContent = reader.result;
mtlFileContent = mtlFileContent.replace('data:;base64,', '');
mtlFileContent = window.atob(mtlFileContent);
};
})(readerMTL);
readerMTL.readAsDataURL(mtlFile);
}
</script>
HTML
<input class="FullWidth" type="file" name="mtlFileInput" value="" id="mtlFileInput"
onchange="readMtlAtClient()" accept=".mtl"/>
Then mtlFileContent has your text as a decoded string !
Complete Version for Typescript
async uploadImage(b64img: string) {
var file = await this.urltoFile(b64img,'name.png',this.base64MimeType(b64img));
}
//return a promise that resolves with a File instance
urltoFile(url, filename, mimeType){
return (fetch(url)
.then(function(res){return res.arrayBuffer();})
.then(function(buf){return new File([buf], filename,{type:mimeType});})
);
}
//return mime Type of bs64
base64MimeType(encoded) {
var result = null;
if (typeof encoded !== 'string') {
return result;
}
var mime = encoded.match(/data:([a-zA-Z0-9]+\/[a-zA-Z0-9-.+]+).*,.*/);
if (mime && mime.length) {
result = mime[1];
}
return result;
}
Thats Work for me Converting base64 Image to File