We Keep Coding

JavaScript Automatically Save Image File to Folder

How can I automatically save an image from canvas into a folder? I am using the
signature_pad-1.5.2 from szimek (link). Here is what I have tried so far:
HTML CANVAS
<div id="signature-pad" class="m-signature-pad">
<div class="m-signature-pad--body">
<canvas></canvas>
</div>
<div class="m-signature-pad--footer">
<div class="description">Signature</div>
<button type="button" class="button clear" data-action="clear">Clear</button>
<button type="button" class="button save" data-action="save">Save</button>
</div>
</div>
<script src="js/signature_pad.js"></script>
<script src="js/app.js"></script>
The signature_pad.js is for drawing in the canvas. Here is the content of my app.js from signature_pad-1.5.2 (I modified it a little):
app.js
var wrapper = document.getElementById("signature-pad"),
clearButton = wrapper.querySelector("[data-action=clear]"),
saveButton = wrapper.querySelector("[data-action=save]"),
canvas = wrapper.querySelector("canvas"),
signaturePad;
saveButton.addEventListener("click", function (event) {
if (signaturePad.isEmpty()) {
alert("Please provide signature first.");
} else {
newfolder = myObject.CreateFolder ("C:\\xampp\\htdocs\\signature\\resources\\sigs");
alert();
saveButton.href = signaturePad.toDataURL();
saveButton.download = 'image.png';
}
});
I am trying to save the image.png file to newFolder when I click the save button. Thanks

There is no way for javascript to access the filesystem, this is due to security concerns. You can store the image data as a string in a lot of places though, such as browser storage. Luckily for you it looks as though you're trying to store it in a web server's folder!
The best thing for you to do here is to make a script on the server that you want to store the image on. That script will accept a file POST request and store it in a server folder somewhere. This can be written in php for example.
Once you have that server-side script, make an AJAX request from the client (from the javascript) with the image data to that server script.
I would provide code samples and a more in-depth explanation, but unfortunately you haven't provided any real info about your tech stack and what exactly you're trying to accomplish. Good luck!

How to get values of input type file in angularjs?

I am creating simple application in angularjs using slim framework. In that, I am creating form for some data like name, categories, currency and Image file etc. In this app, I am having trouble with input type file. I can get all the data of textbox or radio button etc but I can't get data of input type file. Below is the code for that.
index.html :- HTML file
<form method="POST" enctype="multipart/form-data" class="form account-form" name="form" ng-submit="creator(user)" role="form">
<input type="text" name="name" ng-model="user.name" />
<input type="radio" name="category" ng-model="user.category" value="Science" >
<input type="radio" name="category" ng-model="user.category" value="Engineerig" >
<input type="file" ng-model="user.image_file" name="image_file">
</form>
registerController.js :- Controller file
app.controller('CreatorController', function($scope,$rootScope,$location,$http,CreatorService,FlashService) {
$scope.creator = function (user) {
// alert("create");
$scope.dataLoading = true;
CreatorService.creator(user)
.then(function (response) {
if(response.data['message']){
FlashService.Success('Registration successful', true);
$location.path('/crete-page');
} else {
FlashService.Error('Registration failed');
}
});
}
});
registerDB.php :- DB handler PHP file in slim framework dir
<?php
function insertUser($data) {
print_r($data); //Getting All data here from form but not getting File values
}
?>

If you want to send it to a server you can't just receive the file and send it, sometimes you have to transform it in a blob or something.
I found this fiddle
don't know if it works but you can try. (stupid stackoverflow makes me put code after a fiddle link, wtf!)
Or else you can use angular-file-upload, at least was what I used when I tried to do something like that. But I was using nodejs on the server and even on server I had to receive using another library specific for the situation. Dunno how it works with php.
GL!

This may be old question but i came across same problem and this is how i fixed it.
add this code to registerController.js
function getPath() {
$('#filePath ').on('change',function ()
{
var filePath = $(this).val();
$scope.fileURL = filePath;
});
}
getPath();
$scope.fileURL will then hold the data/value for the input file. you can then set user.image_file to be this value "$scope.fileURL"
and your html should be
<input id="filePath " type="file" ng-model="user.image_file" name="image_file">
hope this helps

Redirecting form submission to URL after sending the details to database

I am working on a popup newsletter signup. I already have the similar signup form in another page. I used the exact code and it works great. Once I submit the form, two actions has to happen.
Sending the form details to database
Redirecting to thank you page.
With the existing code(this is from a ecommerce website, I cannot manipulate the code), I can send the details to database - perfectly works fine, but
it is not redirecting to Thank You page, instead redirecting to the page hardcoded in the database(assigned to "action". Is there a way out?
This is the code.
<form name="MailingList" method="post" action="http://www.mywebsite.com/MailingList_subscribe.asp">
<input type="text" name="emailaddress" placeholder="Email Address" maxlength="100" size="28"> <br>
<input type="submit" name="Submit" value="Submit" width="260px">
</form>
Instead of this - http://www.mywebsite.com/MailingList_subscribe.asp, I would like to redirect to "www.mywebsite/thankyou.html" . If I assign www.mywebsite.com/ThankYou.html to "action" , then the form is getting redirected to Thank you page, but not sending the information to the database. I have to use HTML, I cannot call from outside file. I guess I need to use PHP, but I am unclear with the code.
Sorry my mind is all over the place, I guess I explained it clearly. Apologies if my question is unclear. Thanks

Give id to your form like formId and you can do this using jQuery,
Download the jQuery latest version from JQuery repo and then place the jquery.min.js file in your resources folder.
Updated
<script src="yourResourcesFolderPath/jquery.min.js"></script>
// above code will use the jQuery plugin online
// chances are that the file path might be wrong according to where you put the js file
// A simple way to try this is put your file in the same folder of your html file and then change above code to
// <script src="jquery.min.js"></script> change file name according to downloaded file name.
<script>
$(document).ready(function(){ // will run the below code after all html loaded
$('#formId').submit(function(){ // will be called upon form submission
$.ajax({
type: "POST",
url: "http://www.mywebsite.com/MailingList_subscribe.asp",
context: document.body
}).success(function() {
// this will be called when you return from your server submit code
location.href = "www.mywebsite.com/ThankYou.html";
});
});
)};
</script>

open file using jQuery

I try to open a file using jQuery. Here is my HTML,
<button onclick='load();'>load</button>
Here is my js code:
function load() {
var fileSelector = $('<input id="load" type = "file" multiple />');
fileSelector.click();
//code here to get the files ...
}
Now I want to get the loaded files, what should I do?

The HTML5 File Api (http://dev.w3.org/2006/webapi/FileAPI/) allows opening files, however the files must be selected by the User for security.
If you need to open a file without user interaction, then it is necessary to do this on the server side with a language like PHP for example.

Here's my solution
I used the file type input and then use the Jquery trigger function to trigger the click event for file input.
$(function(){
$("#btnFile").click(function(){
$("#file").trigger("click");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="file" type="file" hidden/>
<button id="btnFile">Click Me</button>

You can open JSON file with JavaScript and use fetch('json_file patch') .

to send a text file to server using javascript

I need to send a text file to server and get it saved. how can i do it using javascript???

There are all sorts of security issues surrounding this. Would you be happy to visit a website that would upload a file from your machine to the server?
For a generic website, where users are likely to have their permissions set to deny this sort of access it isn't possible.
If by chance, you are looking to do this for an application where you have control over the security settings for its users, and that you can guarantee its Windows and IE, then it is possible by reading the file and passing the details by posting to the server. See the following link : http://www.javascripter.net/faq/reading2.htm
However when you move away from IE or Windows, then you are going to struggle.

using ajax of course.
have a file on the server, PHP or ASP - depending on what your internet server is.
this file will accept the text file (data and name), and should also check for size and if this file already exists or not, and if all is ok- it will save it, and return a string "OK"
on the client, javascript side, just send the information to the server using ajax, or HTTPREQUST object - there's plentty of documentation for that around. and if you get back a response of "OK" then you know that it sent well.
even better: don't use HTTPREQUEST, but do dynmaic script tag insertion - where the source attribute of the script you're appending is that file on the server like:
var a = document.createElement('script');
a.type = 'text/javascript';
a.src = "http://server/serverFile.PHP?filename=XXX&data=LONG STRING OF DATA REPRESTING THE DATA TO BE SAVED PROBABLY LESS THAN 2K IN SIZE AND ALSO YOU SHOULD ESCAPE OR ATLEAST URIENCODE IT";
document.body.appendChild(a);
and on the server file, serverFILE.PHP:
<?php
// some code to save the request variable [data].
// if all is ok:
alert("ok")
// or:
result = "ok"
?>
get it?
note: you'll probably have a limit of less than 2K on the file size.

Javascript is a front-end language. You may use php or any server side language.

You can create an Ajax equiv function make an iframe with width and height=0px then make it the target of the form with the file upload input and process it with the action PHP
<form action="upload.php" target="target" method="post"
name="uploadform" id="uploadform" enctype="multipart/form-data">
<label for="input_file_upload">Upload:</label>
<input onchange="document.uploadform.submit();" size="80"
type="file" name="file_upload[]" id="file_upload"
multiple="multiple" />
<input type="hidden" name="fileUpload" value="upload" />
<input type="button" value="Upload" />
</form>
<iframe id="target" name="target" style="width: 0px; height: 0px;">
</iframe>