Convert img Javascript variable to $_FILES['name']['tmp_name']; - javascript

I can convert javascript functions to php to use it on server side through:
in JS:
$("#containerphp").load("save.php", {firstValueContainer:firstValue, secValueContainer:secValue});
in php (save.php):
$firstVal = $_REQUEST['firstValueContainer'];
$secVal = $_REQUEST['secValueContainer'];
It works fine but now I need to send a image variable (var image = canvas.toDataURL("image/png");) from javascript to php. I saw that the following code works to send it but in a form (without JS):
$_FILES['name']['tmp_name'];
Anybody knows how can I convert my image from JS to php in this context?
Thank you all.

You can use the following
var image = canvas.toDataURL("image/png");
and send it to php
$_FILE can not be used here because $_FILE is An associative array of items uploaded to the current script via the HTTP POST method.
convert javascript functions to php to use it on server side through:
$("#containerphp").load("save.php", {firstValueContainer:firstValue, secValueContainer:secValue, imageValue: image});

Related

How to create a function that returns an array of image paths in javascript?

How can I create a function that loops through a folder in my directory called "data." It contains only image files, and I will keep adding more image files to it. Previously, I was using the following function that returns an array of URLs:
function _image_urls(){return(
[
"https://images.pexels.com/photos/4050284/pexels-photo-4050284.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
"https://images.pexels.com/photos/1323550/pexels-photo-1323550.jpeg?auto=compress&cs=tinysrgb&w=600",
"https://images.pexels.com/photos/2002719/pexels-photo-2002719.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
"https://images.pexels.com/photos/919606/pexels-photo-919606.jpeg?auto=compress&cs=tinysrgb&w=600",
"https://images.pexels.com/photos/1983038/pexels-photo-1983038.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
"https://images.pexels.com/photos/1702624/pexels-photo-1702624.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
"https://images.pexels.com/photos/3631430/pexels-photo-3631430.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
"https://images.pexels.com/photos/5011647/pexels-photo-5011647.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
"https://images.pexels.com/photos/135018/pexels-photo-135018.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
"https://images.pexels.com/photos/161154/stained-glass-spiral-circle-pattern-161154.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
]
)}
I'm trying to create a function that returns an array of paths for all the images in the data folder. I have been trying the following approach:
function _image_urls(){
const image_folder = 'data';
const image_extension = '.jpg';
let image_urls = [];
for (let i = 0; i < 10; i++) {
let image_url = image_folder + i + image_extension;
image_urls.push(image_url);
}
return image_urls;
}
It seems like this will just return an array like:
[
"data0.jpg",
"data1.jpg",
"data2.jpg",
"data3.jpg",
"data4.jpg",
"data5.jpg",
"data6.jpg",
"data7.jpg",
"data8.jpg",
"data9.jpg"
]
If that's what you're getting, then you need to use i as the index for an array that contains the file names.
The bigger question is how are you getting that list of files in the first place? This is generally not something that JavaScript can do on its own. If the files exist on the server, you'd need some server-side script to actually access the folder and output the array of file names - this can then be put into an array several ways (either writing it directly to the code if you allow your server side code to process the JS file or probably more likely using an XHR to request the file names and then populate the array when you get the response.)
If you write this server side script such that it formats the output as JSON, then it could simply be a matter of using JSON.parse() to convert the output to an array directly without any need to iterate over the response such as the function in the question.
EDIT/UPDATE after comment from OP:
Since you're using PHP on the server side, I would create a server side script that readers the contents of the "Data" folder and outputs a JSON formatted string which can then be parsed by the JS on the front end.
In general, this is done using the scandir function. See https://www.php.net/manual/en/function.scandir.php for details.
and the steps would be as follows:
Use scandir to get an array of files in the Data folder
Remove the first two items in the array (. and ..)
Use the json_encode function to convert the array to a JSON formatted string
Echo that string
Then on the page where you have your JS you have two options:
Include the PHP script described above such that it becomes a JS array using JSON.parse().
Use an XHR to request the PHP script, and when you get a response use JSON.parse() to set it as an array variable.
The first method is outdated, but very simple - though it does require that your JS code is parsed by PHP which may or may not be possible/advisable depending on your server configuration.
The second method is probably what you should do, as long as you're fine with the array being populated after the page loads and that you wait for the XHR to complete before calling any functions that rely on the array.
The main thing to know here is that what you want to do is not possible using only JavaScript because JS cannot read the contents of a folder on the server. Your JS will need to interact with some server side code in order to read the contents of a folder into any array.

how to retrieve the value of javascript var through python?

I need to get the data of productSkus[ using python but I don't know how to access it. the javascript comes from http://www.ulta.com/lid-lingerie-eye-tint?productId=xlsImpprod15361061 .
This is how it looks like.
<script type="text/javascript">
var currentSkuId = '2502111';
var currentProductId = 'xlsImpprod15361061';
var productSkus = new Object();
productSkus[2502111] =
{"displayName":"Fame & Fortune","id":"2502111","imgUrl":"http://images.ulta.com/is/image/Ulta/2502111?$detail$","largeImgUrl":"http://images.ulta.com/is/image/Ulta/2502111?$lg$","swatchImgUrl":"http://images.ulta.com/is/image/Ulta/2502111sw?$50px$","swatchHoverImgUrl":"http://images.ulta.com/is/image/Ulta/2502111sm?$md$","skuSize":"0.13","skuSizeUOM":"oz"};........
Can anyone help me with this?
If you want to use productSkus on the server side, then you need to use AJAX to send the JS variable to the server.
As Django template is compiled server side. It is then sent to the client where their browser executes the JavaScript. Nothing that is changed by the JavaScript executing on the client browser can have an affect on the template. It's too late at that point.
However the JavaScript could do something like make another request from the server for more information. Or you could just pre-compute the value on the server before you send it to the client.
You can of course use Django templates to set JavaScript variables.
<script>
var myVar = '{{ py_var }}';
</script>
use html form to submit the data to server, or across api

How to export variable data to a JSON file on the server using JavaScript/PHP?

So let's say I have a HTML page and an input box on it. The user will type something in it, then I'll store it as a variable in JS, and then, can I somehow write the data of that variable to an already existing JSON file on the server?
How can I achieve this using JavaScript and/or PHP?
EDIT: I actually want to know how to write the data of a PHP variable to a JSON file that is in the same directory as the PHP file.
file_put_contents("json_file.json",json_encode($array));Result:{"key":"value","anotherkey":"anothervalue"}Note: file_put_contents function will overwrite your file!Edit: appendable: $array = json_decode(file_get_contents("json_file.json"),true);
$array['your_new_key'] = "your_new_value";
file_put_contents("json_file.json",json_encode($array));

Passing JSON to the server like GET/POST to get a file instead of ajax reply

I've an object created in javacript with a lot of data and I serialize it to JSON to send it to the server. After this, the server must do somework and create a dynamic file, so it can be downloaded.
For the last routine I created an ASHX but can be modified. Already I'm getting a "httpcontext" that I found in another question how to work with it to get the data from the JSON, so my question is not related about this.
The problem (more oriented to JS) is this one:
How can I sent the JSON to the ASHX as a URL/GET/POST to the generic handler to avoid the "ajax reply" and be the user open a new window with the link dinamically generated?
Thanks, sorry for my english (please edit) and kind regards!
Note 1: I can't use third-part code
Note 2: I can't use JSON.NET
Note 3: I can't save the report on the server so the response must be a generated file to download, even more, the download itself is the response of the server.
---UPDATE----
I've been read this question:
Can I post JSON without using AJAX?
The only thing I don't understand from that question is how to make it work, thinking in that I've a "link" to download
I assume you do not want to refresh the whole page so there is a workaround.
1) Ajax-load an iframe which is a separate aspx file for example.
2) In the codebehind of that separate aspx file, generate the file in memory and convert it to an array of bytes.
3) Then use Response to stream the bytes to the user.
Finally I resolved the issue with this (in the right way).
I just take my json object and send it trough POST with a dynamic form generated with javfascript
var dataToPostInExport = JSON.stringify(queryToVerify);
//Convert To POST and send
var VerifyForm = document.createElement("form");
VerifyForm.target = "_blank";
VerifyForm.method = "POST";
VerifyForm.action = "file.ashx";
var dataInput = document.createElement("input");
dataInput.type = "hidden";
dataInput.name = "mydata";
dataInput.value = dataToPostInExport;
VerifyForm.appendChild(dataInput);
document.body.appendChild(VerifyForm);
VerifyForm.submit();
Then in the ashx file:
Dim DataToParse As String
DataToParse = HttpContext.Current.Request.Form("mydata")
Dim JSSerializer As New JavaScriptSerializer
Dim QueryToExport as my very own type!
QueryToExport = JSSerializer.Deserialize(Of My Own Type)(dataToParse)

parse XML and insert data in MySQL table

I am trying to parse a xml file that i have (using javascript DOM). and then i want to insert this data in a mysql table (using php).
I know how to parse xml data. But i am unable to figure out how to use php and javascript together and insert data in mysql table.
Kindly help me in this.
Best
Zeeshan
Why don't you just use PHP DOM to parse the XML ?
e.g:
$doc = new DOMDocument();
$doc->load('book.xml');
echo $doc->saveXML();
After loaded your document $doc you can use the PHP DOM functions.
The JavaScript needs to send the data to the server. There are several ways this can be achieved.
Generate a form and submit it
Use XMLHttpRequest directly
Use a library like YUI or jQuery
Once there, you get the data (from $_POST for example) and insert it into MySQL as normal.
You can use jQuery to do this, for example:
<house>
<roof>as</roof>
<door>asd</door><window number="12">iles</window></house>
$('path_to_xml',xml).each(function(){
roof = $('roof',this).text();
door = $('door',this).text();
num_wind = $('window',this).attr('number');
});

Categories