Currently, I choose the file and upload using 2 different buttons as follows:
<input type="file" file-model="myFile" />
<button ng-click="uploadFile()">upload me</button>
Is it possible to choose the file and upload in 1 single button?
I tried the following but did not work.
<input type="file" file-model="myFile" onchange="uploadFile()" />
You can use ng-file-select like this:
<input type="file" ng-model="fname" ng-file-select="uploadFile($files)">
Inside your controller, you'll get object:
$scope.uploadFile = function($files) {
var file = $files[0];
console.log(file);
}
More details:
http://blog.gitbd.org/file-upload-by-angular-and-php/
try this
<input type="file" file-model="myFile" onChange="uploadFile()" />
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
function uploadFile(){
alert("function accessed");
}
</script>
</head>
<body>
<input type="file" file-model="myFile" onChange="uploadFile()" />
</body>
</html>
Related
I have created a basic file upload form with google script. Im wondering if someone can help me add a progress bar or some sort upload percentage indiation so that users dont navigate from the form before upload is complete.
Here is the Google script: Code.gs
function doGet() {
var html = HtmlService.createHtmlOutputFromFile('index');
return html;
}
function uploadFiles(data)
{
var file = data.myFile;
var folder = DriveApp.getFolderById('XXXXXXXXXXXXXXXXXXXXXXXX');
var createFile = folder.createFile(file);
}
Here is the form code: index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<title>Upload Files</title>
</head>
<body>
<h1>File Uploader</h1>
<form>
<input type="file" name="myFile" multiple>
<br>
<br>
<input type="button" id="submitBtn" value="Upload Files">
<label id="resp"></label>
</form>
<script>
document.getElementById('submitBtn').addEventListener('click',
function(e){
google.script.run.withSuccessHandler(onSuccess).uploadFiles(this.parentNode)
})
function onSuccess(data){
document.getElementById('resp').innerHTML = "File Uploaded Successfully!";
}
</script>
</body>
</html>
i am trying to pass the values from one html page to another html page but i am getting some errors..
below is my html page one code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function first() {
location.href = "onclick2.html";
}
</script>
</head>
<body>
<button onclick="first()" >Home</button>
<form action="onclick2.html" method="post">
<input type="text" name="sender" />
<input type="submit" value="send"/>
</form>
</body>
</html>
below is my html page 2 code
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function first() {
location.href = "onclick.html";
}
</script>
</head>
<body>
<button onclick="first()">Home2</button>
<form action="onclick.html" method="get">
<input type="text" name="reciver" />
</body>
you can pass value in url and transfer it as given below :
location.href = "http://www.domainname.com/login.html?FirstName=admin&LastName=admin"
I have two HTML pages: firstpage.html and secondpage.html. In firstpage.html, there is a form-
firstpage.html:
<!DOCTYPE html>
<html>
<head>
<title>Form Filling</title>
</head>
<body>
<form action="secondpage.html" method="GET">
Enter Serial Number: <input type="number" name="serialNumber" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
The firstpage data is sent to secondpage.html. I want to display and use the form data serialNumber in secondpage.html-
secondpage.html:
<!DOCTYPE html>
<html>
<head>
<title>Display</title>
</head>
<body>
<form name="selva" action="thirdpage.html">
<input type="hidden" name="kumar">
</form>
<script type="text/javascript">
var locate=window.location;
document.selva.kumar.value=locate;
var text=document.selva.kumar.value;
function pass(str)
{
point=str.lastIndexOf('=');
return(str.substring(point+1,str.length));
}
document.write("Serial Number" + pass(text));
</script>
</body>
</html>
So now I can pass the serialNumber variable from firstpage.html to secondpage.html so that the above code in secondpage.html will show the serial nuimber, and I want same serial number in at thirdpage-
thirdpage.html:
<!DOCTYPE html>
<html>
<head>
<title>Repeating</title>
</head>
<body>
<form method="link">
Enter Serial Number2: <input type="number" name="burns" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
please tell how to print a data in all those pages?
The simplest method I could find for this is, write all the three pages in a single html file and display them based on conditions. This way you dont need to use localstorage.
Other method will be to use query parameters. You can simply learn how to use them. Here's the link to simple javascript-handled query params plugin:
http://jillix.github.io/url.js/
You can pass the serial no as a query parameter to another html. If you are confused on how to use this method, let me know and I'll tell you in detail.
I try to make upload page without refresh, when I select the file and press the button it does not come back with the file information if I use value, it gives me c:/fakepath/filename or undefined. I just want to upload file without using FormData.
Here is the code
<!doctype html>
<html lang="en">
<head><script src="http://localhost/jquery-1.10.2.js"></script></head>
<body>
<form enctype="multipart/form-data">
<input type="file" name="up[]" multiple>
<input type="file" name="up[]">
<input type="file" name="upload">
</form>
<script>
$( "form" ).submit(function( event ) {
event.preventDefault();
});
function omg(){
var elements= $( "form>*" );
$formdata=new FormData();
for(i=0;i<elements.length;i++){
var element=elements[i];
var elementtype=element.type;
var elementname=element.name;
if(elementtype == "file"){
if(element.value !== ""){
var files=element.files;
alert(files.name);
$("div").append(element.value + "<BR>");
}
}
}
}
</script>
</body>
</html>
Like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>File upload</title>
</head>
<body>
<form action="fileupload.php" enctype="multipart/form-data" target="myFrame">
<input type="file" name="up[]" multiple>
<input type="file" name="up[]">
<input type="file" name="upload">
<input type="submit" value="send">
</form><iframe style="display:hidden" name="myFrame"></iframe>
</body>
</html>
I am trying to get the full path of a file or a folder in html with a file selector.
I tried to use input with type file but it does not give me a correct path.
<html>
<head>
<title>Roy Baranes</title>
<script src="js/jquery-1.10.2.js"></script>
<link type="text/css" rel="stylesheet" href="css/styles.css">
<script>
$(document).ready(function(){
$("#getIt").click(function(){
alert($("#label").val());
});
});
</script>
</head>
<body>
<div id="wrapper">
<div class="form">
<input type="file" id="label">
<button id="getIt">Import</button>
</div>
<header>
<div>
<p>Welcome, please type text to search</p>
</div>
</header>
<form id="searchbox">
<input id="search" name="search" type="text" placeholder="Type here">
<input id="submit" type="submit" value="submit">
</form>
</div>
</body>
</html>
when I want to choose a folder, I use following code:
<input type="file" id="label" webkitdirectory directory multiple>
but after I choose and type import the alert shows me following path
c:\fakepath\ *the first file in the folder - whereas I was expecting this path: * \ the file name that i choose - when i choose file