|
Thank you very much, Richard.
|
|
|
|
|
I spent hours trying to figure this out and thought I would post a working sample since I could not find one that was complete.
Plus I'm going out of my way to not use JQuery anymore, and since this is within an Angular V6 component why not try it in TypeScript.
So the concept is to either select a image file using the file input or drop a image file on the target and show the image selected or dropped. Then use the FileReader and extract the Base64 and assign it to the src of the image element target, or you can create a new image element if you choose and assign the new src to it.
Point being to show the user something has happened to satisfy their new for instant gratification and to solve the issue of not wasting time going to the server, doing lots or work and sending it back.
In TypeScript, reader.result can return either a string or ArrayBuffer described as string|ArrayBuffer which was confusing to me because I had to make the TypeScript Lint happy so it would compile.
This would not work and the lint complained that type ArrayBuffer could not be converted to string.
b64Image = reader.result;<br />
dI.setAttribute('src', b64Image);
This would not work either with the same complaint
b64Image = reader.result;<br />
dI.setAttribute('src', b64Image.toString());
This worked without complaint
b64Image = reader.result.toString();<br />
dI.setAttribute('src', b64Image);
Working sample in TypeScript for an Angular 6 component.
9/19/18 16:43 - I got this wrong when I posted it. Had to research it again and add the listener.
Works but really slow setting the b64 hidden text box.
onDrop(event: any) {
let dI = document.getElementById('dropImage'),
b64 = document.getElementById('AvatarB64'),
files = event.target.items || event.dataTransfer.items,
file = files[0].getAsFile(),
reader = new FileReader,
b64Image = '';
this.containerReset();
this.imageFilename = file.name;
event.dataTransfer.dropEffect = 'copy';
if (file) {
this.imageType = file.type;
reader.addEventListener('load', function () {
b64Image = reader.result.toString();
dI.setAttribute('src', b64Image);
b64.setAttribute('value', b64Image);
}, false);
reader.readAsDataURL(file);
};
reader.onerror = (error) => {
console.log('', error);
};
event.preventDefault();
event.stopPropagation();
}
One thing here is the use of arrows, something I need to read up on. I suppose I could try it and see what happens but I need to move on and write the File Button code.
reader.onloadend = function () {
reader.onloadend = () => {
If you have any suggestions feel free to comment on it. Remember this is TypeScript.
Perhaps one day CP will add discussions for TypeScript or really Angular, React and NodeJS. I'm pretty excited about it and will most likely make the move to these technologies.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
modified 19-Sep-18 21:45pm.
|
|
|
|
|
I'm missing something here on matching the file type to the string.
I tried !== and !=
It must be related to the order of if and else if in which I'm not understanding the rule.
Perhaps every thing has to be true and finally false
https://www.tutorialspoint.com/typescript/typescript_if_else_statement.htm
I've checked the heck out of the strings to make sure it can actually match.
Scratching my head on this one. Don't forget this is TypeScript and not JavaScript.
This doesn't work
if (files.length > 1) {
event.dataTransfer.effectAllowed = 'none';
this.containerAlert(1);
console.log('drag canceled for too many files');
return false;
}
else if (fileType.split('/')[1] != 'jpeg' || fileType.split('/')[1] != 'png') {
event.dataTransfer.effectAllowed = 'none';
this.containerAlert(2);
console.log('drag canceled for not being an image file = ' + fileType.split('/')[1]);
return false;
}
else {
this.containerReset();
event.target.style.opacity = '0.4';
}
This works
if (files.length > 1) {
event.dataTransfer.effectAllowed = 'none';
this.containerAlert(1);<br />
console.log('drag canceled for too many files');
return false;
}
else if (fileType.split('/')[1] == 'jpeg' || fileType.split('/')[1] == 'png') {
this.containerReset();
event.target.style.opacity = '0.4';
}
else {
event.dataTransfer.effectAllowed = 'none';
this.containerAlert(2);
console.log('drag canceled for not being an image file = ' + fileType.split('/')[1]);
return false;
}
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
I think the problem is in your logic - in English: "if file type is not jpeg OR file type is not png" always evaluates to true. If the file type is "jpeg", then it can't be "png", so the part after the OR matches. If the file type is "png" then it can't be "jpeg", so the first part matches.
Replace the || with && and you should get the block executing when the file type is not "jpeg" AND not "png".
|
|
|
|
|
Oh your right, that did the trick.
I'm new to TypeScript and thought || would of done the job. Guess it would of failed in JavaScript as well.
This TypeScript is harder to write in.
if (files.length > 1) {
event.dataTransfer.effectAllowed = 'none';
this.containerAlert(1);
console.log('drag canceled for too many files');
return false;
}
else if (!fileType.match('^image/jpeg') && !fileType.match('^image/png')) {
event.dataTransfer.effectAllowed = 'none';
this.containerAlert(2);
console.log('drag canceled for not being an image file = ' + fileType.split('/')[1]);
return false;
}
else {
this.containerReset();
console.log('We have a valid image file')
}
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
I'm missing something here on matching the file type to the string.
I tried !== and !=
It must be related to the order of if and else if in which I'm not understanding the rule.
I've checked the heck out of the strings to make sure it can actually match.
Scratching my head on this one. Don't forget this is TypeScript and not JavaScript.
This doesn't work
if (files.length > 1) {
event.dataTransfer.effectAllowed = 'none';
this.containerAlert(1);
console.log('drag canceled for too many files');
return false;
}
else if (fileType.split('/')[1] != 'jpeg' || fileType.split('/')[1] != 'png') {
event.dataTransfer.effectAllowed = 'none';
this.containerAlert(2);
console.log('drag canceled for not being an image file = ' + fileType.split('/')[1]);
return false;
}
else {
this.containerReset();
event.target.style.opacity = '0.4';
}
This works
if (files.length > 1) {
event.dataTransfer.effectAllowed = 'none';
this.containerAlert(1);<br />
console.log('drag canceled for too many files');
return false;
}
else if (fileType.split('/')[1] == 'jpeg' || fileType.split('/')[1] == 'png') {
this.containerReset();
event.target.style.opacity = '0.4';
}
else {
event.dataTransfer.effectAllowed = 'none';
this.containerAlert(2);
console.log('drag canceled for not being an image file = ' + fileType.split('/')[1]);
return false;
}
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
This is for my Angular 6 training, in which I'm making a back end SPA for creating a Portfolio of work.
I'm writing this in TypeScript and not JavaScript, because it will just get compiled into JavaScript anyways.
So if a user selects more than one image file, or if the file is not an image file, I would like to cancel the event and send a message.
I've never done this before, or have had a drag and drop event canceled on me in the past using other web sites, so I have no creative ideas on what type of signal or alert to use.
Right now I'm using event.preventDefault() but it doesn't really do anything. I can still drop the files.
And I'm turning the drop target border red which works.
onDragOver(event: any) {
event.preventDefault();
event.stopPropagation();
event.target.style.opacity = '0.4';
let files = event.target.items || event.dataTransfer.items;
if (files.length > 1) {
event.target.style.border = 'dashed 3px #EE6363';
event.preventDefault();
console.log('drag canceled for too many files');
return false;
}
else if (files[0].type !== 'image/jpeg' || files[0].type !== 'image/png') {
event.target.style.border = 'dashed 3px #EE6363';
event.preventDefault();
console.log('drag canceled for not being an image file');
return false;
}
console.log('dragged files', JSON.stringify(files, null, 2));
console.log('dragged file count', JSON.stringify(files.length, null, 2));
}
If it ain't broke don't fix it
Discover my world at jkirkerx.com
modified 18-Sep-18 15:35pm.
|
|
|
|
|
In native Javascript, calling preventDefault indicates that the drop operation is allowed.
I suspect you need to remove the preventDefault calls from the if blocks, and add it to the end of the method instead.
ondragover Event[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Thanks Richard.
I ran across that link earlier and should of read in detail earlier.
The whole drag and drop thing is overwhelming at first. I could of used a NPM to do it for me but choose to write code.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
<script type="text/javascript">
var CurrentPage = 1;
function GetImageIndex(obj) {
while (obj.parentNode.tagName != "TD")
obj = obj.parentNode;
var td = obj.parentNode;
var tr = td.parentNode;
if (td.rowIndex % 2 == 0) {
return td.cellIndex + tr.rowIndex;
}
else {
return td.cellIndex + (tr.rowIndex * 2);
}
}
function LoadDiv(url, lnk) {
var img = new Image();
var bcgDiv = document.getElementById("divBackground");
var imgDiv = document.getElementById("divImage");
var imgFull = document.getElementById("imgFull");
var imgLoader = document.getElementById("imgLoader");
var dl = document.getElementById("<%=DataList1.ClientID%>");
var imgs = dl.getElementsByTagName("img");
var captionText = document.getElementById("caption");
CurrentPage = GetImageIndex(lnk.parentNode) + 1;
imgLoader.style.display = "block";
img.onload = function () {
imgFull.src = img.src;
imgFull.style.display = "block";
imgLoader.style.display = "none";
captionText.innerHTML = this.alt;
};
img.src = url;
Prepare_Pager(imgs.length);
var width = document.body.clientWidth;
if (document.body.clientHeight > document.body.scrollHeight) {
bcgDiv.style.height = document.body.clientHeight + "px";
}
else {
bcgDiv.style.height = document.body.scrollHeight + "px";
}
imgDiv.style.left = (width - 1000) / 2 + "px";
imgDiv.style.right = (width - 1000) / 2 + "px";
imgDiv.style.top = "100px";
bcgDiv.style.width = "100%";
bcgDiv.style.display = "block";
imgDiv.style.display = "block";
return false;
}
function HideDiv() {
var bcgDiv = document.getElementById("divBackground");
var imgDiv = document.getElementById("divImage");
var imgFull = document.getElementById("imgFull");
bcgDiv.style.display = "none";
imgDiv.style.display = "none";
imgFull.style.display = "none";
}
function doPaging(lnk) {
var dl = document.getElementById("<%=DataList1.ClientID%>");
var imgs = dl.getElementsByTagName("img");
var imgLoader = document.getElementById("imgLoader");
var imgFull = document.getElementById("imgFull");
var img = new Image();
if (lnk.id == "Next") {
if (CurrentPage < imgs.length) {
CurrentPage++;
imgLoader.style.display = "block";
imgFull.style.display = "none";
img.onload = function () {
imgFull.src = imgs[CurrentPage - 1].src;
imgFull.style.display = "block";
imgLoader.style.display = "none";
};
}
}
else {
if (CurrentPage > 1) {
CurrentPage--;
imgLoader.style.display = "block";
imgLoader.style.display = "none";
img.onload = function () {
imgFull.src = imgs[CurrentPage - 1].src;
imgFull.style.display = "block";
imgLoader.style.display = "none";
};
}
}
Prepare_Pager(imgs.length);
img.src = imgs[CurrentPage - 1].src;
}
function Prepare_Pager(imgCount) {
var Previous = document.getElementById("Previous");
var Next = document.getElementById("Next");
var lblPrevious = document.getElementById("lblPrevious");
var lblNext = document.getElementById("lblNext");
if (CurrentPage < imgCount) {
lblNext.style.display = "none";
Next.style.display = "block";
}
else {
lblNext.style.display = "block";
Next.style.display = "none";
}
if (CurrentPage > 1) {
Previous.style.display = "block";
lblPrevious.style.display = "none";
}
else {
Previous.style.display = "none";
lblPrevious.style.display = "block";
}
}
</script>
<style type = "text/css" class="modal" style="vertical-align: middle; text-align: center">
.modal
{
display: none;
position: absolute;
top: 0px;
left: 0px;
background-color:black;
z-index:100;
opacity: 0.8;
filter: alpha(opacity=60);
-moz-opacity:0.8;
min-height: 100%;
text-align:center;
width:100%;
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 1000px;
border-radius: 10px;
}
.imgg:hover{
opacity: 0.7;
}
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
#divImage
{
display: none;
z-index: 1000;
position: fixed;
top:50%;
left: -1000px;
border-radius:10px;
background-color:White;
height: 700px;
width: 950px;
padding: 3px;
padding-right:8px;
border: solid 1px black;
text-align:center;
}
.dlTable
{
border:double 1px #D9D9D9;
width:200px;
text-align:left;
}
.auto-style1 {
width: 1189px;
}
.auto-style2 {
height: 50px;
width: 1189px;
}
</style>
</head>
<body style="background-color: #CCCCCC">
<form id="form1" runat="server">
<center>
<div style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);width: 1203px; border-top-right-radius:10px;border-top-left-radius:10px; height: auto; vertical-align: top; background-color: #CECECE;">
<table class="style1" style="background-repeat: no-repeat; background-position: center center; margin-top: 0px;border-top-right-radius:10px;border-top-left-radius:10px; background-color: #CECFCE; border-collapse: collapse;" align="center">
<tr>
<td style=" background-color: #FFFFFF; text-align: center; vertical-align: top;border-top-right-radius:10px;border-top-left-radius:10px;" class="auto-style1">
<div style=" height: 348px; border-radius:15px; text-align: center; background-image: url('image/Banner.jpg'); background-repeat: no-repeat; width: 1200px;">
<div style="z-index:initial; background-image: url('bbb.png'); background-repeat: repeat; left: 0px; margin-top:-5px;height: 292px; ">
<p style="text-align: right;margin-top:-15px; "> <asp:HyperLink CssClass="a" ID="HyperLink7" runat="server" NavigateUrl="index.aspx" style="color: #003768" Font-Names="Arial">Home</asp:HyperLink> | <asp:HyperLink CssClass="a" target="_blank" ID="HyperLink1" runat="server" NavigateUrl="http://10.1.200.19:7777/webcenter/system/login.jsp" style="color: #003768" Font-Names="Arial">Login</asp:HyperLink>
</div>
</td>
</tr>
<tr>
<td align="center" class="auto-style1" style="background-position: 100%; background-color:#FFFFFF"; valign="top " >
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<ContentTemplate>
<div class="auto-style144" style="margin-top:10px; color: #18446B; width: 1162px;">
<asp:Label ID="Proj" runat="server" style="font-weight: 700; font-size: x-large"></asp:Label>
<br />
<br />
Project
<asp:DropDownList ID="project" runat="server" AutoPostBack="True" style="font-weight: 700; font-size: large;" Width="195px">
<asp:ListItem Value="No Porject's selected">Choose Project ....</asp:ListItem>
<asp:ListItem>Haram Project</asp:ListItem>
<asp:ListItem>Madina Project</asp:ListItem>
</asp:DropDownList>
Year
<asp:DropDownList ID="year" runat="server" AutoPostBack="True" style="font-weight: 700; font-size: medium;" Width="72px">
<asp:ListItem>2018</asp:ListItem>
<asp:ListItem>2017</asp:ListItem>
<asp:ListItem>2016</asp:ListItem>
<asp:ListItem>2015</asp:ListItem>
<asp:ListItem>2014</asp:ListItem>
</asp:DropDownList>
Month
<asp:DropDownList ID="month" runat="server" style="font-weight: 700; font-size: medium;" AutoPostBack="True">
<asp:ListItem>January</asp:ListItem>
<asp:ListItem>February</asp:ListItem>
<asp:ListItem>March</asp:ListItem>
<asp:ListItem>April</asp:ListItem>
<asp:ListItem>May</asp:ListItem>
<asp:ListItem>June</asp:ListItem>
<asp:ListItem>July</asp:ListItem>
<asp:ListItem>August</asp:ListItem>
<asp:ListItem>Spetember</asp:ListItem>
<asp:ListItem>October</asp:ListItem>
<asp:ListItem>November</asp:ListItem>
<asp:ListItem>December</asp:ListItem>
</asp:DropDownList>
<br />
<br />
<hr style="height: 0px;margin-top:10px; width: 1130px" />
<br />
<asp:DataList ID="DataList1" runat="server" FooterStyle-Height="20px" Height="375px" RepeatColumns="5" RepeatLayout= "Table" Width="975px" CellPadding="0" CellSpacing="0" AllowPaging="True">
<FooterStyle Height="20px" />
<ItemTemplate>
<table class="table" style="border-right-style:solid; border-width:2px;border-color:#18416A; margin-right:10px ">
<tr>
<th colspan="2"> <!--<span style="margin-right:30px"><%# Eval("imageid")%></span></th> -->
</span>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td>
<!-- <img class="myImg" src ='<%#Eval("attach")%>' width="300" onclick="oo" height="250" style="margin-right:20px" alt="Name: <%# Eval("Imagename")%> </br> Year: <%# Eval("Year")%> </br> Year: <%# Eval("month")%>" /> -->
<img id="imgLoader" class="imgg" onclick = "LoadDiv(this.src, this)" src = '<%# Eval("attach")%>' width ="200" height = "150" alt="Mohammed alsofi" style ="cursor:pointer; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius:8px; margin-right:10px " />
</td>
</tr>
<tr>
<td colspan="2"><span style="font-size:12px">Name:</span> <span style="font-size:12px"><%# Eval("imagename")%></span></td>
</tr>
<tr>
<td colspan="2"><span style="font-size:12px">Date:</span> <span style="font-size:12px"><%# Eval("uploaddate", "{0:dd/MM/yyyy}")%></span></td>
<tr> <td colspan="2"> <span style="font-size:12px; margin-bottom:30px ">
<asp:LinkButton ID="LinkButton1" runat="server">Dawnload</asp:LinkButton></tr>
</span></td>
</tr>
</table>
</ItemTemplate>
<SelectedItemStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
</asp:DataList>
</ContentTemplate>
</asp:UpdatePanel>
<br />
<div>
</div>
</td>
</tr>
<tr>
<td align="center" class="auto-style2" style="background-position: 100%; background-color:#00346B; "; valign="top " >
</td>
</tr>
</table></div> </center>
<div>
<br />
</div>
<center>
<div id="divImage" >
<table style="height: 100%; width: 100%" >
<tr>
<td valign="middle" align="center" colspan = "3" style ="height:500px;" >
<img id="imgLoader" />
<div id="caption"> </div>
</div>
<img id="imgFull" alt="" src=""
style="display: none;
height: 600px;width: 950px" />
</td>
</tr>
<tr>
<td align = "left" style="padding:10px;width:200px">
<a id = "Previous" href = "javascript:" onclick = "doPaging(this)" style ="display:none"><img src="image/prev.png" /></a>
<span id = "lblPrevious"></span>
</td>
<td align="center" valign="middle" style ="width:200px">
<!-- <input id="btnClose" type="button" value="close"onclick="HideDiv()"/> -->
<asp:ImageButton ID="btnClose" runat="server" Width="50" Height="50" ImageUrl="image/close.png"></asp:ImageButton>
<img class="modal-content" id="img01">
</td>
<td align = "right" style ="padding:10px;width:200px">
<a id = "Next" href = "javascript:" onclick = "doPaging(this)" ><img src="image/next.png" /></a>
<span id = "lblNext" style ="display:none"> </span>
</td>
</tr>
</table>
</center>
</div><div id="divBackground" class="modal" >
</div>
please help me I did everything but my caption couldn't read from datalist column
|
|
|
|
|
I'm trying to pass a Javascript variable to an HTML String variable which passes it to an ActionLink. The script is getting it's value from an "input box".
@{
<!--Script outputs input value-->
<script type="text/javascript"src="http://code.jquery.com/jquery-1.6.1.min.js" >
var sData;
var sDate = function myFunction() {
var sData = document.getElementById("myText").value;
document.getElementsById("demo").innerHTML = sData;
}
</script>
string sData ="I would like to pass the value here";
<!--Demo that script works-->
<p id="demo"></p>
<p id="myData" onclick="myFunction()">
@Html.ActionLink("Click Me", "DownloadFile", new { sData }, null)
</p>
<label>Monthly Report</label>
<input type="text" id="myText" value="" name="myText" size="10" maxlength="6" pattern="[0-9]" placeholder="yyyymm" style="text-align:center" />
}
|
|
|
|
|
You don't.
The ActionLink method runs on the server, and generates HTML which is returned to the client, long before any of your Javascript runs, and long before the user has the chance to type anything into the input.
You're going to need to generate the link's href on the client.
Alternatively, wrap the elements in a <form>, change the input name to match the parameter name on your action, and replace the link with a submit button.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
1) What I'm trying to do: Uploading a file with aws s3 and then taking the filename and filetype and placing it at the end of the url to save it in sql so that every time the person logs in, it will pull the picture up by user image url
2) Problem: Not uploading and not recognizing file in filename or filetype. Coming up with undefined for filetype and filename in URL and signedURL
3) fileUploadService.js USED IN NODEJS (below)
Can anyone let me know what I'm doing wrong or anything missing?
const aws = require('aws-sdk');
aws.config.region = 'us-west-2';
aws.config.update({ accessKeyId: '', secretAccessKey: '' });
const PROFILE_S3_LINK = "https://sabio-training.s3.amazonaws.com/";
module.exports = {
getUrl: getUrl
}
function getUrl(req, res) {
const s3 = new aws.S3();
const fileName = 'C56/'+"filename"+'/' ;
const fileType = "filetype";
const s3Params = { getSignedURL looks like this : https:
Bucket: 'sabio-training', Expires=1536877443&Signature=WxSvLSzfyZKDRN9LawVOwj1ayVY%3D&x-amz-acl=public-read
Key: fileName, URL looks like this : https:
Expires: 3000,
ContentType: fileType,
ACL: 'public-read'
};
s3.getSignedUrl('putObject', s3Params, (err, data) => {
if (err) {
console.log(err);
return res.end();
}
const returnData = {
signedRequest: data,
url: `${PROFILE_S3_LINK}${fileName}${fileType}`
};
res.write(JSON.stringify(returnData));
res.end();
});
}
=========================================================================
fileUploadRoute.js
const router = require("express").Router();
const fileUploadController = require("../controllers/fileUploadController")
router.put("/", fileUploadController.getUrl);
module.exports = router;
==========================================================================
fileUploadController.js
const fileUploadService = require('../services/fileUploadService')
const responses = require("../models/responses");
module.exports = {
getUrl: getUrl
}
function getUrl(req, res) {
fileUploadService.getUrl(req, res)
.then(response => {
res.send(response)
})
.catch(error => {
res.send(error)
})
}
===========================================================================
index.js in node portion
const router = require("express").Router();
const pogsRoutes = require("./pogs.routes");
const userFromJWT = require("../filters/jwt.user");
const validateUser = require("../filters/validate.user");
const testRoutes = require("./test.routes");
const profileRoute = require("../profile/profileRoute");
const fileUploadRoute = require("../fileUpload/fileUploadRoute")
module.exports = router;
router.use("/api/pogs", pogsRoutes);
router.use("/api/upload", fileUploadRoute)
router.use("/api/profilePage", profileRoute)
router.use(userFromJWT);
router.use(validateUser);
router.use("/api/test", testRoutes);
============================================================================
USED IN REACT
Axios pulled from profile page
handleClickUpload = evt => {
evt.preventDefault()
console.log("RESULT : ", this.state);
axios.put(`${NODE_API_URL}/api/upload`, {
})
.then(response =>{
console.log(
response,"URL SIGNED REQUEST : ",response.data.signedRequest, " URL : ",response.data.url
)
})
.catch(error => {
console.log(error);
})
}
Upload button and file upload portion inside profile page
<div method="post" encType="multipart/form-data" action="/">
<input type="file" name="fileName" className="btn" />
<input type="submit" value="Upload" className="btn" onClick={this.handleClickUpload}/>
|
|
|
|
|
I think your problem starts here at the very beginning on the file upload process.
What this line does:
it allows you to attach to the selected file to upload. You can get the file name, file data, file type here.
depending on the select method, you want to get your files by using
Drag and drop
event.target.items || event.dataTransfer.items
Select
event.target.files
So with a select button, your code would be similar to this:
onSelect(event: any) {
const files = event.target.files,
file = files[0],
fileType = file.type,
fileName = file.Name,
reader = new FileReader;
}
You have the option to grab the image data as well using the FileReader
If you want to read the file data, you add an event listener and use the FileReader.
This will get the image as a base64 string, that you can update the image preview without modification, straignt to the "src".
You can read up on reader.readAsDataUrl and see that there are more options.
let b64Image = '';
this.imageType = file.type;
reader.addEventListener('load', function () {
b64Image = reader.result.toString();
dI.setAttribute('src', b64Image);
b64.setAttribute('value', b64Image);
}, false);
reader.readAsDataURL(file);
After this you on your own. I would just create a model for the record that includes the image, and use http post to contact your NodeJS code to accept the model and write it. I havn't written anything in React yet but this is TypeScript, which is similar to JavaScript and React.
My opinion, your AWS code seems really complicated and over kill for just passing image data
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
if (this.settings.mode === 'edit') {
var $this = this;
period.draggable = true;
period.draggable({
grid: [0, this.periodPosition],
containment: 'parent',
drag: function (event, ui) {
$('.jqs-period-time', ui.helper).text($this.periodDrag(ui));
$this.closeOptions();
},
stop: function (event, ui) {
if (!$this.isValid($(ui.helper))) {
console.error('Invalid position');
$(ui.helper).css('top', Math.round(ui.originalPosition.top));
}
}
}).resizable({
grid: [0, this.periodPosition],
containment: 'parent',
handles: 'n, s',
resize: function (event, ui) {
$('.jqs-period-time', ui.helper).text($this.periodResize(ui));
$this.periodText(period);
$this.closeOptions();
},
stop: function (event, ui) {
if (!$this.isValid($(ui.helper))) {
console.error('Invalid position');
$(ui.helper).css({
'height': Math.round(ui.originalSize.height),
'top': Math.round(ui.originalPosition.top)
});
}
}
});
|
|
|
|
|
You're setting period.draggable to true, then on the next line you're trying to call it as a function. If it was a function before you set it to true, it isn't one afterwards.
|
|
|
|
|
I am using datalist to get images from database and working good
what I want is modal popup with next and previous to show my image which appears in page
I try some code popup worked fine but next previous not working
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.9);
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
<a href="https://www.codeproject.com/Members/media">@media</a> only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
.nvgt{
position:absolute;
top: 120px;
height: 50px;
width: 30px;
opacity: 0.6;
}
.nvgt:hover{
opacity: 0.9;
}
#prev{
background: #000 url('./image/prev.png') no-repeat center;
left: 0px;
}
ul {
list-style-type: none;
}
ul li {
display: inline-block;
background:white;
margin-bottom:10px;
}
.change_btn {
text-align:center;
font-size:30px;
float:left;
}
<pre>
Blog
thepast
.
ASP.NET
Home
Get Started
Learn
Hosting
Downloads
Community
Forums
Help
.
Home/ASP.NET Forums/General ASP.NET/jQuery for the ASP.NET Developer/modal popup window with datalist
modal popup window with datalistRSS
4 replies Subscribe via Email
Last post 1 hour, 15 minutes ago by thepast
.
‹ Previous Thread|Next Thread ›
Print
Share
Shortcuts
Active Threads
Unanswered Threads
Unresolved Threads
My Threads
Forum Subscriptions
Support Options
Advanced Search
Reply|
Edit|
Favorites|
Alert Moderators
.
thepastthepast
None
0 Points
8 Posts
modal popup window with datalist
10 hours, 6 minutes ago|LINK|85.194.71.226
I am using datalist to retrieve images from database and everything is working perfectly
I want when I click on image modal popup show image with next and previous buttons show next images which in page if in page 5 images show 5 if in page 20 images popup show 20
please help me I am stuck in that.
my data list is
<asp:datalist id="DataList1" runat="server" footerstyle-height="20px" height="375px" repeatcolumns="5" repeatlayout="Table" width="975px" cellpadding="0" cellspacing="0">
<itemtemplate>
<table class="table" style="margin-right: 10px"><tbody><tr> <th colspan="2">
</th></tr> <tr> <td colspan="2"></td> </tr> <tr> <td></td> <td> <br> Year: <%# Eval("Year")%> <br> Year: <%# Eval("month")%>" />
</td> </tr> <tr> <td colspan="2"><span style="font-size: 12px">Name:</span> <span style="font-size: 12px"><%# Eval("imagename")%></span></td> </tr> <tr> <td colspan="2"><span style="font-size: 12px">Date:</span> <span style="font-size: 12px"><%# Eval("uploaddate", "{0:dd/MM/yyyy}")%></span></td> </tr><tr> <td colspan="2"> <span style="font-size: 12px; margin-bottom: 30px">
<asp:linkbutton id="LinkButton1" runat="server">Dawnload</span></td></tr> </tbody></table>
<selecteditemstyle backcolor="#E2DED6" font-bold="True" forecolor="#333333">
.
Reply|
Mark As Answer|
Edit|
Favorites|
Alert Moderators
.
thepastthepast
None
0 Points
8 Posts
Re: modal popup window with datalist
9 hours, 52 minutes ago|LINK|85.194.71.226
Please Help I am waiting for this issue
Thanks in advance
.
Reply|
Mark As Answer|
Edit|
Favorites|
Alert Moderators
.
thepastthepast
None
0 Points
8 Posts
Re: modal popup window with datalist
8 hours, 10 minutes ago|LINK|85.194.71.226
I found some code work with popup modal but moving between images not working ( next and precious) not working
can any one modify it please
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.9);
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
<a href="https:
.modal-content {
width: 100%;
}
}
.nvgt{
position:absolute;
top: 120px;
height: 50px;
width: 30px;
opacity: 0.6;
}
.nvgt:hover{
opacity: 0.9;
}
#prev{
background: #000 url('./image/prev.png') no-repeat center;
left: 0px;
}
ul {
list-style-type: none;
}
ul li {
display: inline-block;
background:white;
margin-bottom:10px;
}
.change_btn {
text-align:center;
font-size:30px;
float:left;
}
<asp:datalist id="DataList1" runat="server" footerstyle-height="20px" height="375px" repeatcolumns="5" repeatlayout="Table" width="975px" cellpadding="0" cellspacing="0">
<itemtemplate>
<table class="table" style="margin-right: 10px"><tbody><tr> <th colspan="2">
</th></tr> <tr> <td colspan="2"></td> </tr> <tr> <td></td> <td> <br> Year: <%# Eval("Year")%> <br> Year: <%# Eval("month")%>" />
</td> </tr> <tr> <td colspan="2"><span style="font-size: 12px">Name:</span> <span style="font-size: 12px"><%# Eval("imagename")%></span></td> </tr> <tr> <td colspan="2"><span style="font-size: 12px">Date:</span> <span style="font-size: 12px"><%# Eval("uploaddate", "{0:dd/MM/yyyy}")%></span></td> </tr><tr> <td colspan="2"> <span style="font-size: 12px; margin-bottom: 30px">
<asp:linkbutton id="LinkButton1" runat="server">Dawnload</span></td></tr> </tbody></table>
<selecteditemstyle backcolor="#E2DED6" font-bold="True" forecolor="#333333">
<div id="myModal" class="modal">
×
<a href="#">prev</a>
<div style="width: 70%; float: left">
</div>
<a href="#">Next</a>
<div id="caption"></div>
</div>
var modal = document.getElementById('myModal');
var img = $('#myImg');
var modalImg = $("#img01");
var captionText = document.getElementById("caption");
$('.myImg').click(function () {
modal.style.display = "block";
var newSrc = this.src;
modalImg.attr('src', newSrc);
//captionText.innerHTML = this.alt;
});
$('.change_btn').click(function () {
var btn_click = $(this).find('a').html();
var current_src = $('#img01').attr('src');
$('.myImg').each(function () {
if ($(this).attr('src') == current_src) {
current_index = $(this).parent().index();
if (btn_click == 'prev') {
var new_index = current_index - 1;
$('#img01').attr('src', $('attach:eq(' + new_index + ')').find('img').attr('src'));
}
else if (btn_click == 'Next') {
var new_index = current_index + 1;
$('#img01').attr('src', $('datalist1:eq(' + new_index + ')').find('img').attr('src'));
}
}
});
});
var span = document.getElementsByClassName("close")[0];
span.onclick = function () {
modal.style.display = "none";
}
please any one can modify it I am stuck about 4 days couldn't solve it
please
|
|
|
|
|
<pre>I have developed an extension for automation. The data available on my web page, i use it to populate the check boxes and radio buttons. There are tabs and i use the data on one tab to auto populate the form elements on another tab.My problem is the tab from which i take the data, does not load all the data at once and when i go to the other tab it fills the data with whatever has been loaded. So if it has 500 records, at times it just loads 75-80 and based on those 75-80 records my automation is working.I want all data to be loaded on my page load for automation to work properly.FYI I can't access the server data so I Manipulate the text/information available on the webpage.Is it possible to do it with extension. I am not much well versed with javascript and working on the extensions on the first time
Rupa
|
|
|
|
|
Hey everyone, today I was making a javascript space invaders game and stumbled upon a problem. When pressing on the right and left keys the ship does not move. I hope somebody can help and thank you in advance 
Below is my code
function startGame(){
gamearea.start();
}
function movePlayer(event){
if(!player.moving){
moveInterval = setInterval(function(){player.move(event);}, 50);
player.moving = true;
}
}
function stopPlayer(event){
clearInterval(moveInterval);
player.moving = false;
}
var gamearea = {
canvas: document.createElement("canvas"),
start: function(){
this.canvas.width = 1100;
this.canvas.height = 600;
this.canvas.style.border = "3px solid gray";
this.canvas.style.display = "block";
this.canvas.style.margin = "auto";
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.context=this.canvas.getContext("2d");
player.draw();
window.addEventListener("keydown", movePlayer, event);
window.addEventListener("keydown", stopPlayer, event);
}
}
var player={
x:40, y:580, moving:false,
draw:function(){
gamearea.context.fillStyle="ivory";
gamearea.context.fillRect(this.x+60, this.y, 80, 20);
gamearea.context.fillRect(this.x+95, this.y-20, 10, 20);
},
update: function(d){
this.x+=d;
},
move: function(ev){
gamearea.context.clearRect(this.x, this.y, 80, 20);
gamearea.context.clearRect(this.x+35, this.y-20, 10, 20);
if(ev.keycode== 37 && this.x>0) this.update(-15);
else if(ev.keycode == 39 && this+80<1100) this.update(15);
this.draw();
}
}
|
|
|
|
|
I don't get it. You would think that if someone deeplinks to localhost:5000/reviews that the page would display, and not have to use routerLink to get to the page. It works with routerLink, but I can't refresh the page, or hand type the url.
My home works localhost:5000/home and I can type every url route to access the page.
I read the previous post Angular sucks, OK it kind of does. Bu tI'm pretty close to completing my learning project.
Here's my app.module, and below review module. Maybe I missed something here.
Tomorrow I'll recreate this using straight ng and see what happens.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { CoreModule } from '../core/core.module';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { AppComponent } from './app.component';
import { AdminSharedModule } from '../admin/shared/adminShared.module';
import { HomeSharedModule } from '../home/shared/homeShared.module';
import { PortfoliosSharedModule } from '../portfolios/shared/portfoliosShared.module';
export const AppRoutes: Routes = [
{ path: '', pathMatch: 'full', redirectTo: 'home' },
{ path: 'home', loadChildren: '../home/home.module#HomeModule' },
{ path: 'reviews', loadChildren: '../reviews/reviews.module#ReviewsModule' },
{ path: 'portfolios', loadChildren: '../portfolios/portfolios.module#PortfoliosModule' },
{ path: 'admin', loadChildren: '../admin/admin.module#AdminModule' }
];
@NgModule({
declarations: [
AppComponent
],
imports: [
CoreModule.forRoot(),
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
HttpModule,
HttpClientModule,
ReactiveFormsModule,
MDBBootstrapModule.forRoot(),
AdminSharedModule,
HomeSharedModule,
PortfoliosSharedModule,
RouterModule.forRoot(AppRoutes)
],
exports: [
RouterModule
],
schemas: [
NO_ERRORS_SCHEMA
],
bootstrap: [AppComponent]
})
export class AppModule { }
And my review module
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { RouterModule, Routes } from '@angular/router';
import { ReviewsComponent } from './components/reviews.component';
const reviewsRoutes: Routes = [
{ path: '', component: ReviewsComponent }
];
@NgModule({<br />
exports: [
RouterModule
],
imports: [
CommonModule,
FormsModule,
HttpClientModule,
MDBBootstrapModule.forRoot(),
RouterModule.forChild(reviewsRoutes)<br />
],<br />
declarations: [
ReviewsComponent
]
})
export class ReviewsModule { }
If it ain't broke don't fix it
Discover my world at jkirkerx.com
modified 18-Aug-18 14:06pm.
|
|
|
|
|
Well it works in Angular 6 using ng to create, build and serve the app.
I've determined that it has something to do with .Net Core 2.1 and the webpack, needing a angular router loader.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
It was an error in my startup.cs in Configuration. I didn't have the all the routes loaded in the array below.
So it was .net core that was rejecting direct url typing or deep linking.
Maybe I should remove this. But I learned alot of routing and navigation in Angular and will experiment with removing it.
var angularRoutes = new[] {
"/admin",
"/error",
"/home",
"/reviews",
"/portfolios",
"/setup"
};
app.Use(async (context, next) =>
{
context.Response.Headers.Add("X-Frame-Options", "DENY");
if (context.Request.Path.HasValue && null != angularRoutes.FirstOrDefault(
(ar) => context.Request.Path.Value.StartsWith(ar, StringComparison.OrdinalIgnoreCase)))
{
context.Request.Path = new PathString("/");
}
<pre>
await next();
});
<div class="signature">If it ain't broke don't fix it
Discover my world at <a href="https://jkirkerx.com" target="_blank">jkirkerx.com</a></div>
|
|
|
|
|
So, I'm 16 years old and decided I wanted to learn to code yesterday. The only place where I knew I could, was Codecademy. In school I didn't have any coding experience, so I'm a bit stumped as to what I should be learning. I began with JavaScript and already understand the basics of flow, conditions, functions etc. but nothing nearly enough to actually try to undertake a project myself.
So my questions are: Am I right in choosing JavaScript as my first language (bearing in mind i'm not sure why I want to code, it just seems really fun solving the puzzles, but I would love to, in the future, make something)? And what were your experiences in first learning to code? Was it frustrating, how long did it take you to be confident enough to try to code your first project, which language did you choose, and if you had the chance, would you change your first language?
|
|
|
|
|
Javascript is probably a good starting point in learning the general structure of program flow. But as to the future, it largely depends what sort of applications you want to create.
For desktop/Windows I would suggest C#, and there is an excellent free book at .NET Book Zero by Charles Petzold[^].
For web applications C# and Javascript together, plus HTML and CSS. There are some good web tutorials at ASP.NET | The ASP.NET Site[^].
For something quick and easy you could try Python, see The Python Tutorial — Python 3.4.9 documentation[^].
No doubt other members will have further suggestions.
|
|
|
|
|
Learning to code is very little about which language you choose and very much about learning to decompose problems.
That said, where you go when you're first starting has everything to do with what sort of learner you are. If you need a structured approach to learning you may find JS is the wrong choice and I would recommend something along the lines of Java or C#. You'll find that JS is exceptionally forgiving, and it will happily push through code that is malformed or just plain wrong and attempt to resolve it into a coherent response. This is not the way to learn to code.
If you really want to dig in, the C/C++ family is where I started, and understanding how those work did wonders for me in terms of learning other languages down the line, but it is absolutely unforgiving.
"Never attribute to malice that which can be explained by stupidity."
- Hanlon's Razor
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
