|
Hi,
I have a big problem with JS.
I would like to add to my dropzona component a list of files on the server.
I have this code:
<pre lang="Javascript"><div class="row">
<div class="col-12">
<form class="dropzone" id="dpz-multiple-files" action="http://localhost/dropZoneUpload.php"
method="post" enctype="multipart/form-data" style="border:1px solid #000;">
</form>
<br>
<center>
<button id="submit-all" style="height: 40px;"> Upload All the files</button>
</center>
</div>
</div>
function getValueFromJson() {
let res = $.ajax({
url: 'http://localhost/dropZoneUpload.php?parm=1',
type: 'get',
dataType: 'json',
success: function (response) {
return response;
}
})
return res;
}
The php file returns the result:
[{"name":"index.html","size" ,"path":"..\/assets\/uploads\/index.html"},{"name":".DS_Store","size":8196,"path":"..\/assets\/uploads\/.DS_Store"},{"name":"q1.jpg","size":433382,"path":"..\/assets\/uploads\/q1.jpg"},{"name":"bla.jpg","size":193540,"path":"..\/assets\/uploads\/bla.jpg"},{"name":".htaccess","size":106,"path":"..\/assets\/uploads\/.htaccess"}]
In this way I define the truncated JS:
Dropzone.options.dpzMultipleFiles = {
uploadMultiple: true,
paramName: "file",
maxFilesize: 100,
maxFiles: 2,
createImageThumbnails: true,
acceptedFiles: ".png,.jpg,.jpeg",
clickable: true,
thumbnailWidth: 150,
thumbnailHeight: 150,
autoProcessQueue: false,
init: function () {
var submitButton = document.querySelector("#submit-all")
dpzMultipleFiles = this;
submitButton.addEventListener("click", function () {
dpzMultipleFiles.processQueue();
});
this.on('completemultiple', function (file, json) {
$('.sortable').sortable('enable');
});
this.on('success', function (file, json) {
let val = file.accepted;
if (file.accepted == true) {
console.log(json);
$('.main_form').append("<input type='text' name='imgFiles[]' value='" + file.name + "'/>");
}
let val1 = file.name;
});
this.on("addedfile", function (file) {
var removeButton = Dropzone.createElement("<button> Remove file </button>");
var _this = this;
removeButton.addEventListener("click", function (e) {
e.preventDefault();
e.stopPropagation();
_this.removeFile(file);
console.log("kasuje" + file.name);
console.log(file);
});
file.previewElement.appendChild(removeButton);
});
this.on('drop', function (file) {
console.log('File', file);
alert('bb');
});
this.on("maxfilesexceeded", function (file) {
this.removeFile(file);
});
}
};
$(function () {
$(".dropzone").sortable({
items: '.dz-preview',
cursor: 'move',
opacity: 0.5,
containment: '.dropzone',
distance: 20,
tolerance: 'pointer'
});
});
How can I display a list of my files in DropZoneJS (downloaded from PHP)?
I found an example on the Internet:
$(".dropzone").dropzone({
init: function() {
myDropzone = this;
$.ajax({
url: 'upload.php',
type: 'post',
data: {request: 2},
dataType: 'json',
success: function(response){
$.each(response, function(key,value) {
var mockFile = { name: value.name, size: value.size };
myDropzone.emit("addedfile", mockFile);
myDropzone.emit("thumbnail", mockFile, value.path);
myDropzone.emit("complete", mockFile);
});
}
});
}
});
But I do not know how to adapt it in my code. 
Can I ask for help?
Does anyone know how to do it?
|
|
|
|
|
i have content page of master page i placed date picker for text when i run visual studio style worked but when i run from IIS style not working
how to slove that
|
|
|
|
|
thepast wrote: how to slove that
No idea. I can't see anything you've done. However, it sounds like you did not deploy all of the files. But it could be your code too.
Everyone is born right handed. Only the strongest overcome it.
Fight for left-handed rights and hand equality.
|
|
|
|
|
Sure. One time I did it. You can put in home mode and deploy.
|
|
|
|
|
Hi,
I am trying out a few things in JS today and I noticed something strange happening.
console.log(null >= 0); results in true 
but both
console.log(null > 0)
and
console.log(null == 0) result in false.
How is this possible?
Thanks for explaining.
|
|
|
|
|
The reason is that an equality check == and comparisons > < >= <= work differently. Comparisons convert null to a number, hence treat it as 0. That’s why null >= 0 is true and null > 0 is false.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
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();
}
}
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
