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;
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 have a PHP script that's outputting a CSV file and up until now I've been just using a link and passing parameters that are used to determine the output in the GET data. However recently the size of the data increased and now that code gets Error 414 - Request URI too Large. I tried using a hidden form to do it with POST but it just reloaded the page and didn't supply a prompt to download the file and all of the suggestions I've been able to find online about doing it with AJAX suggest using a link with GET data instead. Does anyone know a workaround that will have the browser still let the user easily download the data?
Presently I'm just setting the href attribute of a <a> tag.
$("#exportCSV").attr('href', "myscript.php/?data=" + exportData);
exportData has become too long for GET data but I want to maintain the behavior where if you click on a link that has say a CSV file being outputted the browser provides a download dialog for the user.
I've searched for this answer in the past but have never come across an answer for this problem. I'm hoping the SO community can finally put this question to rest. I need to know how to embed an image whose source bytes are retrieved via a POST request in JavaScript/ JQuery. POST is needed because in order to generate the image the server needs to be sent a base64 encoded string of instructions from the client. Sometimes those instructions are too lengthy to be sent via GET. Also, I'm working with some legacy code right now, so I'm trying to avoid changing major functions of the server code. It's still sth that is possible to do, just not preferred as editing server code won't always be an option in future situations.
I know you can embed base64 in an img tag. I know you can also do it by rendering the data on a canvas. But both of those methods require you either have an encoded base64 string...
<img src='data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0.....AwXEQA7'>
A standard URL...
<img src="www.examplesite.com/theimage.png">
Or a URL that uses GET parameters.
<img src="www.examplesite.com/getImage.php?id=9001">
What about a URL that uses POST parameters?
<script>
var url = 'www.examplesite.com/getImage.php';
var postData = {'id': 9001};
var outDiv = document.getElementById("outputDiv");
$.post(url,postData,function(data){
// What do we do here to display the returned image?
// The image will have the Content-Type: 'image/png'.
});
</script>
From the post data, create the image on the server, then return a code to the client to access the image e.g. imagabd1. Then have a getImage.php script which returns an image via a get with a unique identifier to the image created. Add an image element to the DOM and add the get request as the src. Example:
1) Post sends base64 data.
2) Server creates image and stores on server
3) Server returns a code, e.g. imagabd1
4) Create an image element on the client and add http://server/getImage?id=imagabd1 as the source. The server should know what image to return given this get request.
Make sure the script is returning the Base64, should be as simple as:
outDiv.html('<img src="' + data '">');
Or change the SRC attr of an image:
element.attr('src', data)
I am building a Discussion Forum as part of a bigger application I am building, the forum is just 1 section of the Application.
For my TextArea fields when posting a new Topic or a Post Reply, I have decided that nothing is as good as the PageDown Markdown Library. It is the same one that StackOverflow uses on all their sites and it works better than many of it's competitors.
The way the library ships though, I am not happy with the default Insert Image functionality. You hit the button to insert an image and it allows you to enter a URL for an Image and then it inserts the proper MarkDown syntax to show the linked image.
This just won't cut it. I need the functionality that you see on StackOverflow! Very similar anyways.
I need it to show a Dialog when you click the Insert Image button, like it does now, but instead of just an input field for a Image URL, it will have 2 filed options...
Upload image from your computer
Insert an Image URL and it will then DOWNLOAD the image from that URL and insert it into the post just as if you had uploaded it from your computer. This is important to not confuse this step. IT should not simply insert the Image linking it to the original Image URL. Instead it will take that URL and download/upload the Image to the same server that the upload from computer option does and then it will insert the NEW Image URL pointing to the newly uploaded image!
Based on some simple HTML like below for a Dialog window with a filed for my Upload from Computer functionality, which I already have working. I need to come up with some JavaScript and PHP that will download/save a remote image to my upload folder on my server when a button is clicked using only the URL that will be inside the URL text input field.
So it will need to do a few things...
Fetch and save an image file to my uploads folder using PHP when the only thing that the PHP function will receive is a URL of the image which could be on the same server or most likely a remote server.
After successfully saving/uploading an image from the URL, the PHP function will return a JSON string with the status/error and if successful then it will also return the actual URL and filename of where the new image is saved on the local server. The JavaScript/AJAX script will receive this JSON response and insert the Markdown syntax for the image into the PageDown editor.
The PHP function will need to ensure that the URL that it is trying to save/download is a valid image file and not some malicious file! Also not simply just some file of the wrong filetype like a non-image file unless we are allowing the file type.
It will be part of a module installed on many dinosaur servers so it needs to work on as many servers as possible too!
From the web
From your computer
I would be greatful of any help, tips, code snippets or anything to help with this. At this stage I really just need to build a nie PHP function that will upload images from a remote URL and also ensure that the URL passed in is a real image file or even better that it is in the allowed file types array!
A couple years ago I had started this but have now lost it and I am starting over and don't remeber much about how I went about doing it then.
The easiest way to download a file from a remote server would be to use copy (http://php.net/manual/en/function.copy.php):
copy('http://someurl.com/image.png', '/var/www/uploads/image.png');
As this function returns a bool, it is easy to determine whether the operation was successful and create a JSON response.
To verify that the file is an actual image, there is unfortunately no way that is 100% sure. It is probably enough to check the mimetype though. You can use finfo for that (http://php.net/manual/en/function.finfo-file.php):
$finfo = finfo_open(FILEINFO_MIME_TYPE);
echo finfo_file($finfo, $filename);
finfo_close($finfo);
For a gif, this would return image/gif for example. You will have to hardcode a list of all mimetypes you want to allow.
The setup I work on is the following: A HTML-page with a canvas element displaying a Processing JS sketch and a form that allows to pass parameters to the sketch using JS-function Processing.getInstanceById(getProcessingSketchId()).setSomeParam();, which works just fine.
The user should also be able to upload an image to the server, the name/path of which is then also handed to the sketch to do loadImage(String path). The file upload (using PHP from here) works perfectly fine as well but now here is the question:
How can I get the name of the uploaded image on the server and pass it to the Processing sketch?
If the form's action tag points to a distinct PHP-file, the site with the canvas sketch is quit (variable $destination not available) or if the form's action tag points to the site itself (being a PHP-site, checking for if(isset($_POST['formSubmitted'])) {), the sketch is restarted losing all the previously changed parameters.
I also managed to have the form submission target to an internal iframe and display the uploaded image there, but that still doesn't solve my problem.
Thanks a lot in advance for any helpful hints!
It sounds like you have the data flow worked out but are struggling because a standard form upload causes a page refresh.
I would suggest using AJAX to post the image to a specific PHP image receiver service. When the AJAX upload is complete, the javascript can then call to the server to fetch the uploaded object and manipulate it as needed without refreshing the page.