This is my sample HTML code
<html>
<head>
<title>
fileupload
</title>
</head>
<body>
<form action="process.jag" method="post" id="" name="">
<!-- File input filed -->
<input type="file" name="myFile">
<!-- The submit button. It calls the server side function uploadfiles() on click -->
<input type="submit" id="" value="Upload File">
</form>
</body>
</html>
This is my jaggery code
<%
var verb=request.getMethod();
if (verb=='POST'){
var log = new Log();
var file = request.getFile("myFile");
file.move("C:\Users\vatsal ramesh gosar\Desktop\New folder\form\fileUploadUsingJaggery"+file.getName());
response.sendRedirect("https://www.google.com");
}
%>
It is giving a NULL Pointer Exception.
Please help me solve this problem with an efficient code.
request.getFile("myFile") does not represent a physical file, rather it represent a stream to the uploaded file. Hence you cannot "move" it using file.move("/moving/path") function. If you want to save the uploaded file, then use the following code snippet.
var uploadedFile = request.getFile("myFile");
var savedFile = new File("/path/to/save/location/" + uploadedFile.getName());
savedFile.open('w');
savedFile.write(uploadedFile.getStream());
savedFile.close();
In Jaggery documentation I haven't find any way to upload image into the server. But some alternatives there...
You encode the image into base64 encoding, you may use this way too encode the images on base64
$path = 'myfolder/myimage.png';
$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);
then send the encoded String using POST request using Jaggery.
Related
My website auto clear text in tag input html after 10 minutes. also I set idle timeout session 1 hour
enter image description here
IMO: I think you should use blazor for this if you are using MVC with Razor Pages or some js framework.
The server does not have to manage the presentation layer.
If you just want to clear the text in the HTML input after a certain time then you could try to use setTimeout() function of JavaScript.
In the function, you could reset the input value.
Example:
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<script>
const myTimeout = setTimeout(clrval, 3000);
function clrval() {
document.getElementById("txt1").value = "";
}
</script>
</head>
<body>
<h1>This is test page....</h1>
<h2>Textbox value will be cleared after 3 seconds.</h2>
Test Field : <input type="text" id="txt1" value="This is my sample text..."></br>
</body>
</html>
Output:
Let me know if you have further questions.
HTML file
<!DOCTYPE html>
<html>
<style>
textarea {
width: 500px;
height: 500px;
}
</style>
<head>
</head>
<body>
<h1>CSV Report Generator</h1>
<form method='POST' action='/' id='submitCSV'>
<textarea name='csv' form='submitCSV'></textarea>
<br>
<input type='submit' value='Get CSV'>
</form>
<br>
<div>
<h3>CSV Response</h3>
</div>
</body>
</html>
Relevant Server Side Code
app.post('/', (req, res) => {
let csvReport = parseJSON(req.body.csv);
// res.end('<h1>Hello World</h1>');
res.end(csvReport);
/*
templating & html
file system - read file from client & insert CSV into appropriate spot -> send back to client
readfile => 'string of all the html'
*/
})
Basically, I'm sending in some JSON data through my form to the server via a post request. Once I have the JSON data, I'm basically parsing it into a different format and sending that back (code not shown since it's not relevant). What I'm trying to do is somehow read the HTML that the form is contained in so I can insert it into the HTML and send that whole HTML string back as the server response. It is dumb as there's many tools to use instead but I am doing it this way because I am required to do so. How can I read the contents of my html file from which the request came from?
I am using Node-RED on Bluemix, I want to let the user upload a document, here is the relevant code fragment in a function/template of a flow
<form action="/upload" method="POST">
<h1>Upload PDF</h1>
<input type="file" name="myFile" />
<input type="submit" />
</form>
When I run it, I chose a file and press 'submit', but then comes the message
Cannot POST /upload
Then I went to http://flows.nodered.org/node/node-red-contrib-http-multipart
, in the example there it says
You can upload to a node with the following configuration:
[{ "name": "myFile" }]
and access the files using the following function on the out port of the node
var fields = msg.req.fields;
msg.fields = Object.keys(fields);
var myFile = fields["myFile"][0];
msg.localFilename = myFile.path
...
1) How can I upload a node with the configuration?
2)Once I get the file name, how do I retrieve it to be sent to the next services? -the next service is 'Conversion' - it takes in the file name.
To make it work, you need :
1- a classic http node connected to a html node where you put your form :
<form enctype="multipart/form-data" action="/fileUploaded" method="POST">
<input type="file" name="myFile" />
<input type="submit" />
</form>
2- Then you put your HTTP multipart node with Fields :
[{ "name": "myFile"}]
You link that node to a function node with the following code :
var fields = msg.req.files;
msg.fields = Object.keys(fields);
var myFile = fields["myFile"][0];
var fs = global.get('fs');
var inStr = fs.createReadStream(myFile.path);
var outStr = fs.createWriteStream('/app/public/upload/testUpload');
inStr.pipe(outStr);
msg.localFilename ='/upload/testUpload'
return msg;
You will need to have a folder named "upload" under /app/public/
You will also need 'fs' :
In bluemix-settings.js in functionGlobalContext add fs:require('fs')
In package.json, add "fs":"x.x"
The file will be copied there : /app/public/upload/testUpload
Then we will be able to access it via msg.localFilename in the next node, for example in a HTML page like this :
<html>
<body>
<h1>Job Done</h1>
File uploaded here
</body>
</html>
install multer for node-red and then restart node-red.
npm install node-red-contrib-http-multipart
After you are done with the installation correctly, you will see httpInMultipart Node.
basic html file upload code:
<form action="/upload" enctype="multipart/form-data" method="POST">
<input type="file" name="myFile" />
<input type="submit" />
</form>
httpInMultipart->Function->Http Response Node
Configure the httpInMultipart Node:
method: POST
url: /upload
Fields: [ { "name": "myFile"} ]
In function node Write the following code:
var file = msg.req.files;
var filesize
msg.test=file;
var localFilenamePath = file.myFile[0].path;
var fileSize = file.myFile[0].size;
var response={};
if(msg.test)
{
response.statusCode=0;
response.localFilenamePath=localFilenamePath;
response.fileSize = fileSize;
response.sendMessage="Successful";
}
else
{
response.statusCode=1;
response.sendMessage="Failed";
}
msg.payload=response;
return msg;
And Voila! We are done!
I am using html code to create a dashboard where user can select a date and then based on selected date fetch some values from remote APIs and then show these values in the sheet.
I have html file something like:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<form>
<select name="Student" id="category">
<option value="" selected="selected">Select Student</option>
<option value="Abercrombie, Amber">Abercrombie, Amber(Gr 11)</option>
<option value="Yupa, Jason">Yupa, Jason(Gr 9)</option>
</select>
Date: <input type="text" id="datepicker" name="datepicker">
<input type="submit" value="Submit" onclick="myFunction()">
</form>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("category").value;
var x2 = document.getElementById("datepicker").value;
//document.getElementById("demo").innerHTML = x;
google.script.run.functionToRunOnFormSubmit(x, x2);
google.script.host.close();
}
</script>
</body>
</html>
I have code.gs as follows:
function fncOpenMyDialog() {
//Open a dialog
var htmlDlg = HtmlService.createHtmlOutputFromFile('HTML_myHtml')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setWidth(500)
.setHeight(300);
SpreadsheetApp.getUi()
.showModalDialog(htmlDlg, 'Dashboard');
};
function functionToRunOnFormSubmit(fromInputForm, datevalue) {
Logger.log(fromInputForm);
Logger.log(datevalue);
SpreadsheetApp.getActiveSheet().getRange('B3').setValue(fromInputForm);
SpreadsheetApp.getActiveSheet().getRange('B4').setValue(datevalue);
};
When I select the function(fncOpenMyDialog()) from script-editor, It create a dashboard on the spreadsheet, Where I am able to select the date but as in functionToRunOnFormSubmit function I am logging the argument and then correspondingly setting the B3 and B4 cell values. It is not getting updated also It is not getting logged in the script editor.
The problem is you are calling "close" right after calling the google.script.run function which is an asynchronous ajax call.
In some cases it likely doesnt even give the browser enough time to start the ajax call or it gets cancelled because the page is closing. So sometimes it might reach the backend script, and sometimes wont.
take a look at the documentation and handle both success (close dialog from there) and failure (show error to the user)
https://developers.google.com/apps-script/guides/html/reference/run
While the documentation doesnt show it explicitly, you can hook both calls like this:
google.script.run.withFailureHandler(onFailure).withSuccessHandler(onSuccess).yourCall();
I am trying to add a folder selector to my node webkit app. Looking at the docs I can just use:
<input type="file" nwdirectory />
But these still seems to return the number of files, which it is not supposed to do.
here is the test code,
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<input type="file" id="fileDialog" nwdirectory />
<script>
function chooseFile(name) {
var chooser = $(name);
chooser.change(function(evt) {
console.log($(this).val());
});
chooser.trigger('click');
}
chooseFile('#fileDialog');
</script>
</body>
</html>
How can I get just the folder path as I will then use this with the fs module
Thanks
EDIT: This looks like a regression issue in v0.12.0 Alpha as it appears to work fine in v0.11.5.
Hope this is helpful for you.