How to upload blob to Parse? - javascript

I am trying to upload blob to Parse. I can get a file to upload just fine, but I am trying to upload a blob that I get from canvas after doing a crop in Javascript. The line that I use to define a new parse File to be uploaded looks like this
var parseFile = new Parse.File("some_file_name.png", file);
Since the Blob Object is basically a File object without the meta attributes, I was hoping to be able to do something like this..
var parseFile = new Parse.File("some_file_name.png", blob);
But the result of this is parseFile being 'undefined'. And I thus cannot call subsequent methods to continue with the upload.
I can't seem to find any info anywhere else, and was hoping someone with a little more insight may know if I am missing something or on the wrong path. Any help is greatly appreciated!

It turns out that I can achieve the desired result by creating a Parse File object with the Base64 Data Url directly, instead of trying to create a Blob first.
var url = canvas.toDataURL("image/png");
var base64 = url.split('base64,')[1];
var parseFile = new Parse.File(name, { base64: base64 });
I found the answer here..
converting dataURI to File to use in Parse - javascript
Hope it helps someone!

Related

modify a zip file in react/javascript

I wanted to allow user to modify a zip file which they uploaded and then submit it to the server. My UI is made using react js and I am using JsZip library to do it.
var zip = new JSZip();
let myZip = null;
zip.loadAsync(f).then( zipFile => {
Object.keys(zipFile.files).forEach(filename => {
zip.file(filename, text);
myZip = zipFile.generateAsync({type : "string"}).then(function (blob) {
myZip = new File([blob], "hello.zip");
});
;
})
});
Note:The zip has just one file at entry level. Rest are inside a folder.
Problem is that I am unable to create the final zip using generateAsync function. The myZip object is null.
Any help is appreciated. Thanks.
Thanks for the help. I solved it by changing the type from string to blob in the generateAsync function.The documentation was a bit unclear about the list of possible "type" and their uses. Instead of creating a string then a File object out of it, this allowed me to directly create a blob and use it in my POST request.

JS: How to create a file of type image, from base64

I'm trying to convert png file, produced by https://html2canvas.hertzen.com/ to a blob file, that I'd send to API.
Code below produces such output that API does not throw 400, however the file is somehow corrupted.
Is there something wrong with the way I construct the blob?
const data = new FormData();
const [, binary] = image.toDataURL().split(',');
const blobFile = new Blob([window.atob(binary)], { type: 'image/png' });
data.append('attachments[]', blobFile, 'screenshot.png');
Alright, turns out canvas is already well equipped for translating itself to blob. All you have to do is use canvas.toBlob(cb) and you are ready to go.

PDFjs custom file name with blob

I am using pdf js out of the box.
The problem is that I am using a blob "blob:http://localhost:9001/12fc5fc1-bd5f-4af1-a434-0e38cb55ead"
Because of this, the url doesnt contain ".pdf" so when viewer.js parses it, it dowloads as "document.pdf"
If there anyway to use a custom file name in this situation?
Thanks
Well, there are a couple of problems here:
1) When you use Blob you are pointing to an address of memory of your browser, thats the main reason you get that name.
2) to get a pdf, you should set your blob with the type of pdf, here is an example:
var blob = new Blob([data], {type: 'application/pdf'});
var url = window.URL.createObjectURL(blob);
you will get that extrange url but with a pdf extention.
The same you can do with zip or other type of file. Hope this answer helps!

decoding a bin file to mp3 using Node Js

I am encoding a MP3 file to Base64 in Node Js using this method :
encodebase64 = function(mp3file){
var bitmap = fs.readFileSync(mp3file);
var encodedstring = new Buffer(bitmap).toString('base64');
fs.writeFileSync('encodedfile.bin', encodedstring);}
and then again I want to construct the MP3 file from the Base64 bin file, but the file created is missing some headers , so obviously there's a problem with the decoding.
the decoding function is :
decodebase64 = function(encodedfile){
var bitmap = fs.readFileSync(encodedfile);
var decodedString = new Buffer(bitmap, 'base64');
fs.writeFileSync('decodedfile.mp3', decodedString);}
I wondered if anyone can help
Thanks.
Perhaps it is an issue with the encoding parameter. See this answer for details. Try using utf8 when decoding to see if that makes a difference. What platforms are you running your code on?
#Noah mentioned an answer about base64 decoding using Buffers, but if you use the same code from the answer, and you try to create MP3 files with it, then they won't play and their file size will be larger than original ones just like you experienced in the beginning.
We should write the buffer directly to the mp3 file we want to create without converting it(the buffer) to an ASCII string:
// const buff = Buffer.from(audioContent, 'base64').toString('ascii'); // don't
const buff = Buffer.from(audioContent, 'base64');
fs.writeFileSync('test2.mp3', buff);
More info about fs.writeFile / fs.writeFileAsync

Base64 encode/decode and download content generated in URL

I am generating a string through JavaScript and I need to download it to a text file with a predefined dynamic filename. This way there will be no room for error by employees.
This is obviously not possible in JavaScript due to security issues. However, from what I have read it should be possible with base64 encoding.
I managed to encode the string and open a url with the decoded data. The string has been decoded successfully in this URL. The format is as follows:
var data = 'data:text/plain;base64,'+L_EncodedData;
document.location = data;
I need to open a file dialog with the decoded data so the employees can download the content generated in this URL.
Any help?
Many thanks in advance
If you're still looking for an answer to this, check out my answer here. This is how I would adapt it for your needs.
// Convert the Base64 string back to text.
var txt = atob(data.reportBase64Bytes);
// Blob for saving.
var blob = new Blob([byteString], { type: "text/plain" });
// Tell the browser to save as report.txt.
saveAs(blob, "report.txt");
If you use this, make sure you grab the polyfills that I mention in the other post.
This block is fixed.
window.OpenWindowForBase64 = function(url, callback) {
var image = new Image();
image.src = url;
var w = window.open("");
w.document.write(image.outerHTML);
if (callback) {
callback(url);
}
}

Categories

Resources