I'm trying to use the JSSoundRecorder(https://github.com/daaain/JSSoundRecorder) for recording a file on my website. I would like to send the resulting wav along with a form where I add more info. Is there a way to save the Blob in my form? So far I can only find a way to directly send the blob to the server using a Ajax request. Is there a way to put the result of the recorder in a hidden file or another smart solution?
You won't be able to upload it as a file [1] (via <input type="file">) with a form, but you could try to base64 encode it and submit it via <input type="text">. You'd then have to decode it on the server before writing it to a file. This JSPerf has a few different methods of converting a Blob to base64: http://jsperf.com/blob-base64-conversion
[1] How to set a value to a file input in HTML?
Related
Html:
<iframe [src] ="fileurl" #iframe>
</iframe>
<button (click)="saveDoc()">
</button>
Stuck at savedoc() functionality.
Typescript:
/*api call to get document blob data on load*/
var fileurl = new blob([res.body],{type:application/pdf});
fileurl = URL.createObjectUrl(fileurl);
savedoc(){//here need logic to access edited pdf content as blob }
I am able to view and write in pdf editable fields (as input or checkboxes) but I can't figure out once filled all details, how to save/access that edited PDF content (mostly in blob format) to send back to server when click on save button. I have also tried ng2-pdf-viewer library of npm but same issue. I have to send this edited pdf to server in blob format to replace with existing.
How can I access edited pdf content?
Edited: Alternative approach, if its possible to trigger saveAs event from code to save iFrame pdf in local drive? I am using Window.showSaveFilePicker();but saved file seem corrupted or not exist.
Have a look at PDF-LIB.
It is a great JavaScript library which provides all sorts of tools to manipulate PDF documents. There is even tooling for filling the fields and saving the newly filled PDF.
In a past project, I used this library to capture user information from an HTML form and have it inserted and saved into a PDF.
Note:
Remember that once you have the filled PDF on client side, you must send it back to server side to update the PDF that is stored on the server.
I want to create a website, where user fills out the form and after submitting I want to generate a html file for him with the data he filled and then allow him to download this file.
Is it possible with JS without server side JS?
You can create a link where href property is an encoded URI.
let exampleText ="My Name\nMy Surname\nMy Town\n"
let localfile = "data:text/plain;charset=utf-8," + encodeURIComponent(exampleText);
document.getElementById("linkfile").setAttribute("href", localfile);
<a id="linkfile" download="myInfo.txt">Click here to download</a>
If you want to do it JUST frontend side. You could use zip.js to convert those files into a zip, then convert it into a binary array, then convert it into a blob file, and prompt for download using this question.
You may have to casts your html files into DOM "File"s, this might be very slow on mobile since all processing will be done on client side.
I have a requirement to download a file from a url, then POST it to another site via single js call.
Use case:
User enter a file URL then click Re-Upload button
Conditions:
The file will be either audio/wav, audio/mp3, or a zip file with multiple wav and mp3
I need to POST using multipart/form-data
Questions:
How do I create multipart/form-data request via js manually?
Correct me if I am wrong, but I think I need to store the file content into an input field once I download it.
How to encode this file content into a string that will comes up as byte[] when uploaded?
I have an image on my HMTL page. This is generated by DevExpress library at runtime and the src url points to a DevExpress script with a cache key:
<img id="Chart_89_IMG" src="/DXB.axd?DXCache=30f02093-de66-4ed6-8557-2382065c701a" />
I'm trying to get this file onto the server in a subsequent form post to use in an email. I've tried just passing the url in my form, but by the time it gets to the server, I get a 404 (assuming the cache key is expired).
I've also tried using canvas to get the bytes and pass that to the server, but was having trouble converting that byte stream back to an image, and canvas won't work for IE8, which I need to support.
My last idea was to include a file upload input on my form and pass the image to the server that way. But, how can I create a file from an image in javascript to use as an upload?
Any other ideas would be appreciated too!
Since this was DevExpress, I was able to change the BinaryStorageMode to the session:
settings.BinaryStorageMode = BinaryStorageMode.Session;
Then after I posted the form, the chart's bytes were accessible in the Session:
byte[] bytes = ((DevExpress.Web.ASPxClasses.BinaryStorageData)HttpContext.Current.Session[sessionKey]).Content;
I'm trying to save the result of a XMLHTTPRequest to a PDF file.
I am communicating with a server I am calling to get a chunk of data formatted as PDF data.
I'm using XMLHTTPRequets to log into the server, then make a search request which in return creates a PDF which is streamed back to me though the XMLHTTPRequest.
I need to save that result as a PDF so I can later open it in Acrobat.
When I save the response text to a file the result is not a valid PDF. The request is doing something to the stream which makes it invalid as a PDF.
I have no control over that server so I cant make it send back a link to a temporary valid PDF file.
Is there a way around that ?
Is there a way to encode that stream into a valid PDF file ?
I am using Javascript for that application.
Thanks
Erez
what you could do is return from your http server an xml file like the following:
<resp><![CDATA[YOURPDFSTREAM]]></resp>
and them retrieve the RESP node to build your pdf file.
Don't forget to encode your stream in the desired encoding format as well.