I'm trying to convert a excel file (which user upload it in a input file tag) to a html table tag.
I found a code on "redstapler" but it doesn't work.
I don't know where is the problem.
<html>
<head>
<script src="jquery.min.js"></script>
<script lang="javascript" src="xlsx.full.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="navbar"><span>Red Stapler - SheetJS </span></div>
<div id="wrapper">
<input type="file" id="input-excel" />
</div>
<script>
$('#input-excel').change(function(e){
var reader = new FileReader();
reader.readAsArrayBuffer(e.target.files[0]);
reader.onload = function(e) {
var data = new Uint8Array(reader.result);
var wb = XLSX.read(data,{type:'array'});
var htmlstr = XLSX.write(wb,{sheet:"sheet no1", type:'binary',bookType:'html'});
$('#wrapper')[0].innerHTML += htmlstr;
}
});
</script>
</body>
</html>
It works for me...
I downloaded and embedded the xlsx.mini.js from https://github.com/SheetJS/sheetjs
Make sure your path is correct here:
<script type="text/javascript" src="js/xlsx.mini.js"></script>
And also check the name of your sheet which you want to read.
sheet:"sheet no1"
Related
I am trying to make a drop-down box (select), and get the options from a sheet, but I can't get it to work. Actually the problem is, that I have to wait for the script.run to finish, before I add to the select. I therefore moved the add, to the successhandler-function, but somehow it doesn't do anything. If I run it, as this I only get option 1 and 2.
My document look like this:
The server-side code looks like this, stripped down to nothing, just to make sure the miss isn't coming from here.
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta dato="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="container">
<div class="row">
<form action="/action_page.php" id="inputform">
<div class="input-field">
<input id="tekst" type="text" class="validate">
<label class="active" for="tekst">Tekst</label>
</div>
<div class="input-field">
<select name="Choose" id="Choose">
<option value="" selected disabled hidden> Choose</option>
</select>
</div>
</form><!--- end form
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems);
var instance = M.FormSelect.getInstance(elem);
});
var konto = "Choose";
var x = document.getElementById("Choose");
var option = document.createElement("option");
option.text = "Option 1";
x.add(option);
google.script.run.withSuccessHandler(fillOption).getOption();
var option = document.createElement("option");
option.text = "Option 2";
x.add(option);
function fillOption(){
var konto = "Choose";
var x = document.getElementById("Choose");
var option = document.createElement("option");
option.text = "Option 3";
x.add(option);
}
</script>
</body>
</html>
The serverside code looks like this, stripped down to nothing, just to make sure the miss isnt comming from here.
function onOpen() {
var template = HtmlService.createTemplateFromFile("userform");
var html = template.evaluate();
html.setTitle("Just testing select").setHeight(500).setWidth(700);
SpreadsheetApp.getUi().showModelessDialog(html, "testing");
}
function getOption() {
}
I was curious if using input type = "file" will store the actual file that was selected? If so, how would I display that file, preferably a photo, inside of a div or span? I'm working on a project where people can sell their stuff. I'm looking for a way to display the picture that a user submits, somewhat like the way Facebook does.
How would you display that file
You would have a server recieve the form data, and then do one of the following
Serve the posted file from the server itself.
Upload the file to another server or cloud which serves the file.
You can then send this hosted URL to the client as an image source to show it.
You'll want to check the file to make sure it is not mallicious, and probably randomise the name to make attacking the system harder, to prevent someone from uploading a PHP shell and taking over the server.
I have figured out a way using javascript to display the picture after it's been selected for upload. The code is as follows (Entire document).
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<script>
function displayProduct(){
var product = document.getElementById("productTitle").value;
var productDesc = document.getElementById("productDescription").value;
var files = document.getElementById("blah").src;
document.getElementById("showProduct").style.display = "block";
document.getElementById("productHead").innerHTML = product;
document.getElementById("productD").innerHTML = productDesc;
document.getElementById("photo").innerHTML = files;
}
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah')
.attr('src', e.target.result)
.width(150)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#photo')
.attr('src', e.target.result)
.width(150)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
<title>XXXXXXXXX dot Com</title>
</head>
<body>
<header>
<img src = "brownBag.jpg" width = "8%" style = "float: left;">
<h3>Deal Finder dot Com</h3>
<nav class="cd-stretchy-nav">
<a class="cd-nav-trigger" href="#0">
Menu
<span aria-hidden="true"></span>
</a>
<ul>
<li><span>The Homepage of Nephilim42 Coding</span></li>
<li><span>CSS Portfolio Project</span></li>
<li><span>Javascript Portfolio Project</span></li>
<li><span>Play a game of Darts! Powered by Javascript</span></li>
<li><span>My First Business Website</span></li>
</ul>
<span aria-hidden="true" class="stretchy-nav-bg"></span>
</nav>
</header>
<main class="cd-main-content">
<label for = "form">
<form name = "postForm" id = "postForm" method = "POST" action = "">
<p>What are you selling?
<input type = "text" name = "productTitle" id = "productTitle">
</p><br>
<p>Please describe your product.
<textarea name = "productDescription" id = "productDescription" cols = "50" rows = "6"></textarea>
</p><br>
<p>Upload Picture:
<input type='file' onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
</p>
<input type = "button" name = "post" id = "post" value = "POST" onClick = "displayProduct()"><br>
</form>
<div id = "showProduct">
<p>Product Title:
<span id = "productHead"></span>
</p><br>
<p>Product Description:
<span id = "productD"></span>
</p><br>
<p>Uploaded Photo:
<span id = "photo"></span>
</p>
</div>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>
Below are some attached images. Unfortunately because I have low reputation here on stackOverflow, only the link will attach. Which do work when copied and pasted into the URL search bar. These images show the steps with what happens when uploading a file. unfortunately I have ran into a problem, but I will work on fixing it. The problem is on image #2. The second chunk of javascript in the readURL function is a failed attempt to rectify that.
Image 1) Upload button clicked, selecting image
Image 2) After image is selected and posted, the value of the file is sent via innerHTML to a span. The value seems to be a super long character string rather than the image in the span. I will try to work on this and fix it, and post on this thread the solution.
1 https://i.stack.imgur.com/2Ev4b.png
2 https://i.stack.imgur.com/L0ymG.png
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Literally Canvas</title>
<link href="css/literallycanvas.css" rel="stylesheet">
<script src="jquery-2.1.4.min.js"></script>
<script src="react-with-addons.min.js"></script>
<script src="underscore-min.js"></script>
<script src="js/literallycanvas-core.min.js"></script>
<script src="js/literallycanvas.js"></script>
</head>
<body>
<div class="literally"></div>
<form class="controls export">
<input type="submit" data-action="export-as-png" value="Export as PNG">
</form>
<script>
$(document).ready(function(){
//initial without jQuery
var lc = LC.init(
document.getElementsByClassName('literally')[0],{
imageURLPrefix:'img',
primaryColor:'#fff',
backgroundColor:'#ddd',
toolbarPosition:'top',
tools:
[
LC.tools.Pencil,
LC.tools.Eraser,
LC.tools.Line,
LC.tools.Rectangle,
LC.tools.Text,
LC.tools.Polygon
]
});
//export as png
$('.controls.export [data-action=export-as-png]').click(function(e) {
e.preventDefault();
window.open(lc.getImage().toDataURL());
});
});
</script>
</body>
</html>
I have download literallycanvas-0.4.11 and added the files under css/ and img/ to my project, as well as the appropriate file from js/.
I can see the initial is worked because I can see the primaryColor was changed but I can't find my tools.
I followed the literally canvas however it still something wrong.
Anybody can help me??
I changed imageURLPrefix option and it worked for me. Just write path to your img folder there.
var lc = LC.init(
document.getElementsByClassName('my-drawing')[0],
{
imageURLPrefix: 'path/to/your/img',
.....
.....
});
I am new to angularjs and I am using "emoji-min.js" and "emoji-min.css" to display the emoji in text field.
But I am not able to display. Here is my code:
<!doctype>
<html ng-app = "app">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="emoji.min.css">
<script src="angular.min.js"></script>
<script src="emoji.min.js"></script>
<script>
var app = angular.module("app", ["emoji"])
app.controller("AppCtrl", function ($scope) {
$scope.message = "String including Emoji codes :smiley:";
});
</script>
</head>
<body ng-controller="AppCtrl">
<textarea ng-model="message"></textarea>
<p ng-bind-html-unsafe="message | emoji"></p>
<pre>{{ message }}</pre>
</body>
</html>
Please tell where I am going wrong.
For ng-bind-html to work, you need to have ngSanitize module injected in your app.
checkout this
i am using SAP UI5 and don't know why is it showing object expected in line 347 while running index.html file in ie.
<html>
<head>
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<script src="resources/sap-ui-core.js"
type="text/javascript"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons,sap.ui.ux3"
data-sap-ui-theme="sap_goldreflection" >
</script>
<script type="text/javascript" src="OPM_CM.js"></script>
<script>
sap.ui.localResources("opm");
var view = sap.ui.view({id:"OPM_CM1", viewName:"opm.OPM_CM", type:sap.ui.core.mvc.ViewType.JS});
//view.placeAt("content");
buildShell();
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
thanks in advance.
This may be happening because the sap object is not available.
<script>
function init(){
sap.ui.localResources("opm");
var view = sap.ui.view({id:"OPM_CM1", viewName:"opm.OPM_CM", type:sap.ui.core.mvc.ViewType.JS});
//view.placeAt("content");
buildShell();
}
window.addEventListener('load',init);
</script>
adding your code to a function and calling it on body onload may do the trick.
Note: please also give more details about the error you are getting.