I’m trying to insert a blob url something like blob:http://localhost:8000/d986abd0-8e4a-4731-b0
With embed method by react quill
quill.current.editor.insertEmbed(
quillRange.current.index,
"image",
blob:http://localhost:8000/d986abd0-8e4a-4731-b0
)
But when I inspect the code in browser I see something like below
The Embed method works totally fine with normal http urls, but in my case I need to convert the binary data from server convert it to blob url and then display, can someone please tell how can I do that
According to https://github.com/quilljs/quill/issues/1795#issuecomment-340308922, you can try sanitize.
// ...
const Image = Quill.import('formats/image');
Image.sanitize = () => url; // You can modify the URL here
// ...
Related
I am working on different ways of displaying a PDF to get better on a project at work. I am able to insert a url to a PDF into an iframe element and it displays the PDF fine. Sometimes we have a use case where the front end receives a pdf as application/pdf instead of a url in a json object.
For this, I turn the application/pdf into a blob and create a url for the blob. This worked great on everything except Android, so I am testing out some methods with iFrame.
I would like to take this sample pdf http://www.pdf995.com/samples/pdf.pdf, turn it into a blob, and insert the blob url in the src of an iframe element for the purposes of testing blobs as iframe sources on Android Chrome browsers.
function App() {
const samplePdf = "http://www.pdf995.com/samples/pdf.pdf"
const blob = new Blob([samplePdf], { type: 'application/pdf' });
const url = URL.createObjectURL(blob)
return (
<>
<h1>iFrame Rendering of PDF Blob</h1>
<iframe title="pdf" src={url} style={{ height: '1250px', width: '100%' }}></iframe>
</>
);
}
export default App;
This is what renders in the React app
What am I missing to get the content of the pdf to display? React is not a requirement, just seemed an easy way to start a quick practice project.
You need the data to construct the blob while the URL just points to the data you need. Let's go & get it:
const getLocalPdfUrl = async () => {
const url = 'http://www.pdf995.com/samples/pdf.pdf';
const response = await fetch(url);
const blob = await response.blob();
return URL.createObjectURL(blob);
};
This function returns a Promise that will (hopefully) resolve with the URL you can use to construct the iframe. It's async, so, don't forget to wait for the promise to resolve.
Testing note
Fetching external resources from the frontend is restricted by CORS, so, pdf995.com's link will not work. It's also not a trivial task to find a dummy PDF document that would allow fetching itself from the FE.
To test if it works, I'd propose to place the PDF file in the /public folder (or similar) & serve it on the same locslhost as the app.
I know that my code works because I have been using it in firefox. When I switched to chrome, this code snippet has stopped working due to chrome unable to read the url generated by URL.createObjectURL().
export const image_preview = () => {
$('.js-thumbnail').off()
$('.js-thumbnail').on('change', function(event) {
// add event to each file input
const img = $(this).siblings('img')
const url = URL.createObjectURL(event.target.files[0]) // url to user's image
img.attr('src', url)
URL.revokeObjectURL(url) // free the allocated object
})
}
The url itself is generated but chromium fails to load it in my image tag.
Some posts suggests to use webkitURL api instead of URL but that didn't work either. Do you know the cause? Is this also a problem in other browsers as well?
You need to wait for the image has loaded before revoking its URL.
Image resources begin to load in a microtask after we set their src (among other reasons to allow setting crossOrigin properties after we set the src), so when the browser will read the src change, the line URL.revokeObjectURL(url) will already have been called, and the blob:// URL already pointing to nowhere.
So simply do
const img = $(this).siblings('img')
const url = URL.createObjectURL(event.target.files[0]) // url to user's image
img.attr('src', url)
img.one('load', (e) => { URL.revokeObjectURL(url); });
I'm getting a blob file from mySql and It looks like the image below.
and I'd like to show this image through <img src={imagefile}/> (I'm using React.js).
How can I the blob file to url link?
I tried URL.createObjectURL(imagefile)
but It gives me an error that
Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided
please Help ToT
You need to convert you data to base64 by using the folowing code, then use can use Base64 in your img tag < img src="yourbase64here"/>
let base64String = btoa(String.fromCharCode(...new Uint8Array(data)));
i have a code which calls an image via URL.
Now the URL returns a protocol buffer, when i open the link separately in a new tab it shows text " ["imagename",[[null,null,"data:image/jpeg;charset;utf-8;base64,#encoded#"]]]"
since the URL returns a text response, is there any way i can get the whole response into a string(10K+ characters) and then i can slice it and put it in the img src.
i just want to put the whole code into single html file or is there a way to write proto schema inside the html code and then retrieve data from it. (I have just started with programming)
//Html
<img id="image" Src="#URL">
//javascript
var imgstring=document.getElementById("image");
//when i print this, I get it as "[object HTML ImageElement]"
//if i use the .value it gives the output as "undefined"
Maybe this would like to help you:
var byteArray = new Uint8Array(#Buffer Data#);
var blob = new Blob([byteArray]);
const url = window.URL.createObjectURL(blob);
I am using Winjs(javascript for windows 8 app).
what I want is to create a simple blob object from a specific url of my static image by giving the path.
What is the solution?
Any help will be appreciated.
'MSApp.CreateFileFromStorageFile()` as used below will work. if you need to send the file using WinJS.xhr() you can set as data in xhrOptions.
var uri = new Windows.Foundation.Uri('ms-appx:///images/IMG_0550.jpg');
var self = this;
Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri).then(function ongetfilecomplete(storageFile)
{
var file = MSApp.createFileFromStorageFile(storageFile);
var url = URL.createObjectURL(file, { oneTimeOnly: true });
// assume that this.imageElement points to the image tag
self.imageElement.setAttribute('src', url);
}).then(null, function onerror(error)
{
});
refer the link in case you are looking for upload the blob to azure. For send the blob to your webservice also, code will be on these lines.
URL.createObjectURL("") should work. I use it all the time. Test it with some other URLs. You could do it in debug mode in the JS console to make it easier.