How to upload image in web page using Javascript? - javascript

I want to upload the image in web page. There is no error in the code but still I can't upload the image in web page and show it in canvas. The image is upload in the web page but it not show in the canvas which i created. Please help me to find what wrong with my code?
here is the code for hole html page.
function upload(){
var dd=document.getElementById('can');
var filein=document.getElementById('finp');
var img = new SimpleImage(filein);
img.drawTo(dd);
}
function docolor(){
var dd1=document.getElementById("can2");
var colin=document.getElementById("clr");
var col=colin.value;
dd1.style.backgroundColor=col;
}
<html>
<head>
<script src="http://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js"></script>
</head>
<body>
<h3>HTML code for canvas and upload button</h3>
<canvas id="can">
</canvas>
<h3>Load Image</h3>
<input type="file" multiple="false" accept="image/*" id="finp" onclick="upload()" >
</body>
</html>

I think there is a mismatch in the IDs you use in HTML elements and JS Code.
function upload(){
var dd=document.getElementById('can');
var filein=document.getElementById('finp');
var img = new SimpleImage(filein);
img.drawTo(dd);
}
function docolor(){
var dd1=document.getElementById("can2");
var colin=document.getElementById("clr");
var col=colin.value;
dd1.style.backgroundColor=col;
}
<script src="http://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js" ></script>
<canvas id='can' class='canvasRoundCorders'></canvas>
<input id='finp' type='file' accept='image/*' onchange="upload()">

Related

How to get latest file name from upload file?

I follow Javascript - How to extract filename from a file input control and I have few problems with getting file name from input/upload file. I use this code to get file name from input file
var fileInput = document.getElementById('upload_file').files[0].name;
But when I change with another file, I still get my old file name and I need to refresh my browser to get latest file name. How to fix something like this?
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<input type="file" id="upload_file">
<br>
<h1 id="nama_file"></h1>
<script>
var fileInput = document.getElementById('upload_file').files[0].name;
//var filename = fileInput.files[0].name;
console.log(fileInput);
document.getElementById('nama_file').innerText = fileInput;
</script>
</body>
</html>
You need an event:
var filename = document.getElementById('filename');
document.getElementById('upload_file').addEventListener('change', function(e) {
filename.innerText = e.target.files[0].name;
});
<input type="file" id="upload_file">
<br>
<h1 id="filename"></h1>
You can add a event on every load and change the inner text of 'name_file' accordingly.
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<input type="file" id="upload_file">
<br>
<h1 id="nama_file"></h1>
<script>
var fileInput = document.getElementById('upload_file').files[0].name;
fileInput.addEventListener('change', () => {
document.getElementById('nama_file').innerText = fileInput;
});
console.log(fileInput);
</script>
</body>
</html>

how to implement file uploader to google drive web app code to hosted html site like instapage

I am trying to implement the example code found on https://developers.google.com/apps-script/guides/html/communication to my instapage site as an html code. Separately the web app works perfectly but after inserting it to instapage it fails to send the file to google drive.
Can you explain what did I do wrong? I was wondering if such an implemenation is possible at all. If not can you please let me know a workaround?
server.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('index')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function processForm(formObject) {
var formBlob = formObject.myFile;
var driveFile = DriveApp.createFile(formBlob);
return driveFile.getUrl();
}
html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function updateUrl(url) {
var div = document.getElementById('output');
div.innerHTML = 'Got it!';
}
</script>
</head>
<body>
<form id="myForm">
<input name="myFile" type="file" />
<input type="button" value="Submit"
onclick="google.script.run
.withSuccessHandler(updateUrl)
.processForm(this.parentNode)" />
</form>
<div id="output"></div>
</body>
</html>
I also attach a screenshot about the instapage implementation I tried:
enter image description here

Load image in DIV from url obtained from a TEXT BOX

I am trying t load an image into div tag from a url which is obtained from a textbox.My current file is as follows..I don't know what else to be done
<html lang="en">
<head>
</head>
<body>
<input type="text" class="imageURL1">
<div class="ImageContainer">
image will appear here:
</div>
</body>
</html>
Using pure javascript you can load the image as follows. I am using the onChange event to detect whether url has been supplied to the textbox or not. On pressing Enter key, the image will be loaded in the div.
function addImage()
{
var url = document.getElementsByClassName("imageURL1")[0].value;
var image = new Image();
image.src = url;
document.getElementsByClassName("ImageContainer")[0].appendChild(image);
}
<html lang="en">
<head>
</head>
<body>
<input type="text" class="imageURL1" onChange="addImage();">
<div class="ImageContainer">
image will appear here:
</div>
</body>
</html>
You can try something like this.
$(document).ready(function(){
$("#Submit").click(function(){
var image_url = $(".imageURL1").val();
$(".ImageContainer").html("<img src='"+image_url+"' width='200'>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="imageURL1">
<button id="Submit">Submit</button>
<div class="ImageContainer">
</div>
Js fiddle example -> http://jsfiddle.net/0kvxpnmv/
$('<img src="'+image_url+'">').load(function() {
$(this).appendTo('.ImageContainer');
});
JS Fiddle
Use php
index.php file
<form action="GetURL.php" method="post">
<input type="text" name="url">
<input type="submit">
</form>
Now when they click submit it will take you to the new page
GetURL.php
$image_url = $_REQUEST['url'];
<html lang="en">
<head>
</head>
<body>
<input type="text" class="imageURL1">
<div class="ImageContainer">
<?php echo '<img src="{$image}"/>'; ?>
</div>
</body>
</html>
On this page you can see that in your imageContainer class you have the image url being posted with PHP
The best way to handle this from here would be to have the form on the same page as the image and have it post the url with ajax.
So you would type in the url to the textbox and when your done it refreshes the image url.
How about using a button to call a funtion that'll change the image src with url in the text box
HTML
<html lang="en">
<head>
</head>
<body>
<input type="text" class="imageURL1">
<button onclick="func()">Load image</button>
<div class="ImageContainer">
<img src="" id="imgContainer">
</div>
</body>
</html>
javascript
(function(){
var func = function(){
var url = $(".imageURL1").val()
$('#imgContainer').attr('src',url)
}
})();
Here's the jsFiddle with jQuery and without jQuery
Please see my code below, on the change event of the text input, it would create an jQuery img tag then add then use the URL from the input as the source and clear the contents of the output div. Once the image is loaded, it will replace the content of the output div.
$('.imageURL1').change(function() {
var $img = $('<img/>');
$img.attr('src', $(this).val());
$img.load(function() {
$('.ImageContainer').html(this);
});
});
This solution requires jQuery.
Working fiddle here.

Trying to load canvas image from file directory

I found this jsfiddle http://jsfiddle.net/t7mv6/86/ that works exactly like I need. Have been searching for examples and studied several online html5 canvas tutorials. I am trying to load several images selected from many in a directory to one html5 canvas.
I wrote this attempt to use the jsfiddle:
<!DOCTYPE html>
<html>
<HEAD>
<script type="text/javascript">
var input = document.getElementById('input');
input.addEventListener('click', handleFiles);
var i=0;
function handleFiles(e) {alert("here");
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image;
alert("hello");
img.src = URL.createObjectURL(e.target.files[0]);
img.onload = function() {
ctx.drawImage(img, 20,20);
alert('the image is drawn');
}
}
</script>
</head>
<Body >
<h1>Test</h1>
<input type="file" id="input"/>
<canvas width="800" height="500" id="canvas"/>
</body>
</html>
The above will not work on my chrome or firefox.
It seems to display initial page correctly but the image does not display in the canvas.
I think I may have a security problem or need to wrap it with an onload.
Don't really understand syntax for the onload function.
js console indicates no errors.
Any help appreciated!
Tim
You can select multiple images by adding the multiple attribute to your input.
<input type="file" multiple id="input"/>
Here's example code an a Demo on how to show your multiple images as thumbnails on a single canvas.
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var input = document.getElementById('input');
input.addEventListener('change', handleFiles);
function handleFiles(e) {
// var images=[];
var files=e.target.files;
for(var i=0;i<files.length;i++){
var img=new Image;
img.x=i*100;
img.onload=function(){
ctx.drawImage(this,this.x,0,80,this.height*(80/this.width));
}
img.src=URL.createObjectURL(files[i]);
}
}
body{ background-color: ivory; }
#canvas{border:1px solid red;}
<input type="file" multiple id="input"/>
<br>
<canvas id="canvas" width=400 height=300></canvas>

Updating image source with jQuery

So I'm trying to automatically update an image source using javascript but for some reason it won't work. The image is being retrieved from my php text generator (generates an image with text on it) the text is grabbed from a input box. I want it to automatically grab the text inside the inputbox then change the src of image to gen.php?text=Input_box_text_goes_here
here is my code:
<html>
<head>
<title>text generator</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
</head>
<body>
<script language=javascript type='text/javascript'>
setInterval(function () {
var str= document.form.letters.value;
$('#logo').src("gen.php?text="+str);
}, 10);
</script>
<img id="logo" name="logo" src="gen.php?text=default" />
<form name="form" action="">
Text: <input type="text" name="letters"/>
</form>
</body>
</html>
any help will be appreciated.
Change $('#logo').src("gen.php?text="+str); to $('#logo').attr("src", "gen.php?text="+str);.
try:
<script>
$(function(){
//reference the image
var img = $('#logo');
//use onkeyup instead of polling
$('input[name="letters"]').on('keyUp',function(){
//get the value every keystroke
var inputValue = $(this).val();
//apply the values to the image source
img.each(function(){
this.src = "gen.php?text="+inputValue;
});
});
});
</script>

Categories