I want to convert a blob file to a png. I tried this:
var blob = new Blob([ia], {type: 'image/png'});
$scope.farmerRegisterObj.farmerImage = blob;
I want to convert it into file object ..and should be able to append in a Formdata.
A Blob is a File like object, or more exactly, a File object is a Blob with a name property.
You can create a File object from a Blob thanks to the File(blob, name) constructor, but this will be useless in almost every use cases*.
All you can do with a File can be done with a Blob.
For instance, in your case, you can append a Blob directly into a FormData so that it is sent as a file/multipart :
var form = new FormData();
form.append(fieldName, blob, fileName);
* I only used it once, while trying to hack the behavior of browsers default page title when viewing a file like an image in a tab, and it only partially worked only in FF. If someone has real use cases where a File is needed, I'd be glad to know about it.
Related
I am using the package hopding/pdf-lib from github within the browser to generate a pdf. I get the result as a uint8array. I can send this to the browser using rndme/download from github which stores the pdf first to the local disk and then sends it to a new browser tab and opens it in the pdf viewer. As I dont want to store it to disk i tried the following code:
const pdfBytes = await pdfDoc.save(); // create the pdf as uint8array
//download(pdfBytes, fn, "application/pdf");
let blb = new Blob(pdfBytes, {type: 'application/pdf'});
let link = window.URL.createObjectURL(blb);
window.open(link);
This opens the new tab with the pdf viewer, however it is empty. I checked the blob with the debugger and it tells me:
Blob { size: 772729, type: "application/pdf" }
There are no error messages. Why is the target empty?
The pdfBytes should be passed into the blob constructor in an array. The first argument of the blob constructor should be an array containing all the objects to be inserted into the blob.
An error is not being thrown because pdfBytes is an array of numbers, so all the numbers in the array are being inserted into the blob, rather than pdfBytes itself.
The blob creation should look like this:
let blb = new Blob([ pdfBytes ], {type: 'application/pdf'})
// notice how pdfBytes is passed inside of an array
Brilliant!! That's working. Thanks alot!
How do you view a blob data that is from a sql database file (.db .db3 and others) and view it on web browser by only using a single html file? The blob data are probably meant to be seen as an image file (jpg, png and others)
Let's say I have a blob data like this:
du�� C�BVwv�q8q7k�1�H�asfdasdfasdf�#s;47sk"as��'7hib-�3$asdffdsfa�a�����U�����P������
And I want to put that single blob data directly (without calling the database file, just using the value of the blob itself) inside a html file so I can directly open it from my browser without installing other software or setting up a local server inside my computer.
I'm sorry if I explain this weirdly, I rarely code, I honestly don't know anything about sql or that server thingamajig, I just want to view the blob file.
You could use Blob. Here I construct a blob and then turn it back into a string that I insert in the document.body.
var array = ['<p>Hello World!</p>'];
var blob = new Blob(array, {type : 'text/html'});
const reader = new FileReader();
reader.addEventListener('loadend', e => {
document.body.innerHTML += e.target.result;
});
reader.readAsText(blob);
And I guess that the Filereader can also read a file if needed.
I'm trying to upload a file, but i want to normalize it's name fisrt, it works on other browsers, but in IE11, i searched and i found out that this method (normalize) is not supported, so i'm using polyfill unorm. so normalizing works fine now, but we can't change the fileName directly, we need to create a new file. But we can't use new File because it's not supported too. So I used new Blob, but the problem is that i don't get the filename on the server side, it's always blob.
The code for other browsers :
var fileName = file.name.normalize('NFD').replace(/[\u0300-\u036f]/g, "");
var newFile = new File([file], fileName, { type: file.type });
newFile.label = 'FICHIER';
The code for IE11
fileName = unorm.nfd(file.name);
newFile = new Blob([file], { type: file.type });
newFile.label = 'Fichier';
newFile.name= fileName;
To generate the request to the server, i use formdata :
fd = new FormData();
fd.append("id", param);
fd.append(file.label || "uploadedFile", file, file[paramName]);
Can you tell me what should i do to get the filename or if there is another way to do this.
The Blob object doesn't contain the name property, so, we can't change name via the Blob object.
After getting the file data, I suggest you could append a new parameter to log the new file name, then, when submits the form or save the uploaded file, you could send the file data and the new file name to the server.
Besides, here is another thread about upload file using FormData, please refer to it:
Angular File Upload
File Upload using AngularJS
I have a file upload that saves images as .png on the server and the link in a mysql database. To show thumbnails of the image before uploading I have a function that convertes the file list object to a preview pic. Now I want the user to edit the file selection later. For that I need to load the images from the server back as thumbnails. I think the best way to do this is to convert the file path stored in the database to a file object and apply this object to the function that creates the thumbnails that I don't need to rewrite this function.
So my question is how can I convert my stored image links to a file list object?
Edit:
upload:
user selection -> file object -> base 64 -> blob -> display blob -> (maybe) edit -> upload selection as base 64 to server -> base 64 to .png -> save pic -> save link
later edit selection by user(how to do?):
saved link -> file object -> base 64 -> blob -> display blob -> (maybe) edit -> ...
saved link -> file object How to do? Possible? Better way?
I hope it's now clearer to understand.
If someone has an idea how to do this or a better way please answer.
(I know that you should show Code when asking a question but I don't think that it is necesarry to upload the whole upload function here)
You process is all frowned, so I may not answer correctly your question, but I'm pretty sure this is an X-Y problem.
Javascript File objects inherit from the Blob object.
From MDN :
A File object is a specific kind of a Blob, and can be used in any context that a Blob can.
Never convert a File to a base64 dataURL, if it's to convert it back to a Blob ; this makes no sense and only pollute the browser's memory.
To display a Blob (or a File) in the browser, from media elements, or iframes, use the URL.createObjectURL(blob) method. This will return a blobURI, that will be available only for the life time of the initiating page, and only for the user's browsers. In case of user uploaded Files, the file is not even copied to memory, and the uri returned is just a direct pointer to the file on the user's system.
inp.onchange = function(){
var url = URL.createObjectURL(this.files[0]);
var img = new Image();
img.onload = function(){
document.body.appendChild(this);
}
img.onerror = function(){
console.log('probably not a supported image file');
}
img.src = url;
}
<input id="inp" type="file" accept="image/*">
If you need to modify the image, you can do so by drawing the resulting image on a canvas.
Then, instead of exporting your canvas to a dataURI, directly use the toBlob method, which can be polyfilled.
To send you File/Blob on your server, send the File/Blob directly instead of its 30% heavier base64 string representation.
This can be done really easily thanks to the FormData API.
var xhr = new XMLHttpRequest();
xhr.onload = done;
var formData = new FormData();
formData.append('file', theFile, fileName);
xhr.open('POST', yourServer);
xhr.send(formData);
Then you can retrieve it server side just like any File uploaded through the basic Multipart/Form method.
I am developing a JavaScript little webmail.
I receive from the server a Base64-encoded string, that represents a file (it could be whatever type). I decode the string, a map it to a Uint8Array, and with it, I generate a Blob object with I create a data URI with
FileReader.readAsDataURL(blob)
Until here is pretty straightforward, but I am having problem with the download part.
I put the DataURI in
window.open(dataURI)
But chrome opens a new window and display my image, or my text. But I need to avoid this behaviour, and download the file instead.
I have red that this could be done with Content-Disposition "attachment" but I am not sure if it is my case, because I am generating the file from a string from the server.
Anyone who can help me understand?
Did you try to use "saveAs" ?
saveAs(blob, "hello.zip");
In the case you need wide browser support you could try polifill. More information
I am pretty sure you can set the type of the blob
var blob = new Blob(["Hello world!"], { type: "application/download" });
Edit:
without FileSaver.js:
var blob = new Blob(["Hi stack"], {type: 'application/download'});
var reader = new FileReader();
reader.onloadend = function(e) {
window.open(reader.result);
}
reader.readAsDataURL(blob);
Edit:
Documentation and browser support information ("Browser compatibility" tab):
FileReader
Blob