I use to render data using EntityDataSource, and I use to store customer image as byte in database, the problem is how can I convert that byte to base64 on .aspx page itself to use it as image src, is there any way to do this in javascript.
Why do you need to convert a byte[] to base64 string? This won't allow you showing the image on the page. You could write a generic handler (.ashx) that will query the database, fetch the image bytes and write them to the response stream. Then you simply instruct your image src property to this generic handler.
Related
I am trying to convert image to byte array using only javascript and send to api. I have found this answer but it only shows to convert to base64 then send it to server side. Are there any other ways to convert to byte array using js or I can't just send byte array to api ?
I use UploadIfy to upload multiple files through ajax. Each time a file has been uploaded through an ajax request, and successfully saved on the server, I return the file name of that file to the client, BASE64 encoded.
I then add a DIV to the DOM where I use the BASE64 encoded file name as the value of a data attribute of that DIV, which I use as a unique reference to that DIV.
Secondly, I add an image to that DIV with an OnClick function to remove that file from the server through ajax, and I use that same BASE64 encoded filename as a parameter.
Example for an uploaded file 'test.pdf':
<div data-id="dGVzdC5wZGY="><img onclick="RemoveFile('dGVzdC5wZGY=')"/></div>
I access the the DIV using JQuery:
$("div[data-id='" + fn64 + "']")
where fn64 is the BASE64 encoded file name sent as a parameter.
Is there any way a user can create a filename which would break either my HTML or javascript? Or any other XSS risks? XSS is such a complicated matter that it's making me paranoid.
I cannot comment because I don not have 50 reputation points but.. Where is the base64 encoding taking place? is it on the server or the client? What does RemoveFile() look like?
I think if the input is encoded on server and then returned by the server you should be ok.
Also you could sanitize user input on the server to be extra safe.
I think more information is needed on how your code takes the file name and sends that to the server.
I have an ArrayBuffer in angularjs that I am trying to send to my backend endpoint in c#, I thought it was a regular byte array but it's not mapping appropriately
What would an ArrayBuffer map to as an object in c# if not a byte[]?.
I have a PDF file represented as that ArrayBuffer but now I would like to send it to the server, or perhaps is there a way to convert that ArrayBuffer to a File type in JavaScript and send it o the endpoint so that I can use something like an IFormFile?.
Thank you
I had a situation of same some long days back. What I did was, I converted the array buffer data to base 64 string in the js side and sent it to the backend c# code using post method,and again I decoded it to array buffer to regenerate the file on server side. By this way I achieved the mapping.
I used this code which helps to convert the array buffer to base 64 string in JS.
and this api of .net framework to convert back the base 64 string to file buffer.
I hope this would help you.
I stored some images in MySQL database in blob format by converting the image into base64 string and want to display on the front end.
Base64 string where the delimiters are missing.
Image Storing in MySQL database but while retrieving from database using hql it is fetched as base64 string in a list but all the delimiters like ;,: were removed due to which it is not converted to an image. Can anyone suggest me the solution to the problem?base64String in the list where the delimiters are removed by default which I fetched from MySQL database
but the starting of the base64 string should be data:image/jpeg;base64, where :;, are missed in the image.
I'm using jsOauth-twitter to upload an image to twitter which calls the update_with_media api method. It looks like it needs the actual image data. This is already on my webpage inside a normal <img src="localfile"> tag.
Using Javascript, can I get at the actual image data (JPEG) to pass it to the function? Is it available in the DOM? I need the raw image data so I can pass it to twitter as application/octet-stream, so base64 is no good to me.
It looks like the API requires the form to be sent as multipart/form-data, which means the media[] parameter is expecting a file rather than binary or base64 encoded data. If you use HTML file input inside a form, this should be fairly straightward.
If you must use the <img> tag, then it would be difficult. All I can think of is draw the image to a <canvas>, obtain a base64-encoded URI with toDataURI(), decode it to obtain the raw image data using window.atob(), then build the multipart/form-data POST body manually. This answer has some sample code for the first couple of things.
The Blob API may help in creating a file-like object which your OAuth library can accept (rather than manually building the request body), but its not very well supported yet.