Category: javascript

I just made a table to display customers emails and added functions to remove or add new emails.
but for add function, I saved new email into state(users). but it’s not showing in email table list. remove function is working great! could you help me to fix this issue?
Just attached my code

import React, {useState} from 'react';

const Admin: NextPage = () => {

  const [users, setUsers] = useState([
    { email: "[email protected]" },
    { email: "[email protected]"},
  ]);

  const [email, setEmail] = useState('');

  const removeUser = rowEmail => {
    const updatedArray = users.filter((row) => row.email !== rowEmail);
    setUsers(updatedArray);
  }

  const addUser = () => {
    console.log(email);
    const lists = users;
    lists.push({'email' : email});
    setUsers(lists);
  }
  
  return (
    <>
    <div className="user-user">
      <input type="email" onChange={event => setEmail(event.target.value)} />
      <span onClick={() => addUser()}>Add User</span>
    </div>
    <div className="user-list">
      <table>
        <thead>
          <tr>
            <th>Users</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          {users.map((val, key) => {
            return (
              <tr key={key}>
                <td>{val.email}</td>
                <td><span onClick={() => removeUser(val.email)}>Remove</span></td>
              </tr>
            )
          })}
        </tbody>
      </table>
    </div>
    </>
  );
}
  
export default Admin;

I am trying to make a js program that can interact with an external database (hosted online) and 1) add new fields or 2) add to the number in an existing field.
I wants to make the database with 2 columns (lets say ‘name’ and ‘quantity’), and I want the js program be able to either add a new item to the database and set the quantity for that new item to 1, or increase the quantity of an item already in the database by 1. How can I do that on the side of the js program, and how do I do that on the side of the database? I have a basic knowledge of js from web development, but I’ve only worked with Django (the python web framework) so I don’t know how to do anything with databases. Thanks!

I want to make a table for user email lists. but when I create new email(click add user btn), users state doesn’t update. could you help me to fix this issue? thank you

import React, {useState} from 'react';

const Admin: NextPage = () => {

  const [users, setUsers] = useState([
    { email: "[email protected]" },
    { email: "[email protected]"},
  ]);

  const [email, setEmail] = useState('');

  const removeUser = rowEmail => {
    const updatedArray = users.filter((row) => row.email !== rowEmail);
    setUsers(updatedArray);
  }

  const addUser = () => {
    console.log(email);
    const lists = users;
    lists.push({'email' : email});
    setUsers(lists);
  }
  
  return (
    <>
    <div className="user-user">
      <input type="email" onChange={event => setEmail(event.target.value)} />
      <span onClick={() => addUser()}>Add User</span>
    </div>
    <div className="user-list">
      <table>
        <thead>
          <tr>
            <th>Users</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          {users.map((val, key) => {
            return (
              <tr key={key}>
                <td>{val.email}</td>
                <td><span onClick={() => removeUser(val.email)}>Remove</span></td>
              </tr>
            )
          })}
        </tbody>
      </table>
    </div>
    </>
  );
}
  
export default Admin;

In my post processor I have the following code:

if (i as Integer < protocolsArray.length){


          
protocolsArray[i as Integer] = "${requestProtocolId}" ;

}

and it worked, I put the “requestProtocolId” that I got via JsonExtractor in the position of “i”, position of i == 0

but the number of virtual users defined in this http request is greater than one.

so it sends the request again and saves the new “requestProtocolId” again in position zero, overwriting the other protocol,I understand that with the new request it starts all over again, taking the initial values ​​assigned to the variables again, but I’ve already tried incrementing the i (i ++) and returning the new array with the zero position filled in:

vars.putObject("protocolsArray", protocolsArray);

but it always returns the value set before the htpp request, is there a way to change that?

If I changed and put an iteration controller and it was a group of users but in iteration controller “5”, it would be like the same user would send it five times, right?

I wanted to simulate different users, but always keep the “requestProtocolId” value saved in the array positions because I’m going to use it in another request.

We have a multiple page form like below , each page on the form is associated with different model classes. I am trying use the value the users selected in Page 1 and based upon that value selected in Pg1 I need to show/hide the field in Page2. Below is what I am trying

<div id="Page_1" style="display: none;">
    <div class="form-group required">
        <label for="Solution" class="control-label">Solution</label>
        <select id="Solution" name="Solution" class="form-control" data-bind="options: solutions, value: solution, optionsCaption: 'Select'"></select>
    </div>
    ...................
    <button type="submit" id="NtPg" class="SubmitButton" data-bind="click: next">Next</button>         
 </div>
 <div id="Page_2" style="display: none;">
    <button type="submit" id="AddCourseInfo" class="SubmitButton" data-bind="click: addCourse">Add Course Info</button>
   <div data-bind="foreach:CourseDetails" >
     <div class="form-group required" data-bind="visible: solution() == 'Other'">
       <label for="OtherSolution" class="control-label">Explain Other Solution : </label>
       <input type="text" maxlength="1000" id="OtherSolution" name="OtherSolution" class="form-control" data-bind="value : otherSolution" required/>
     </div> 
   </div>
   ...........................

Page2 has a button which allows the users add courses, when they click on the button few fields shows up in the page in foreach loop and one of the field should show/hide based on the selection made on the previous page. But the above logic throws error like Uncaught ReferenceError: Unable to process binding "visible:" below is the viewmodel

self.Solution= ko.observable().extend({ required: { params: true, message: "Required" } });

self.CourseDetails= ko.observableArray();

self.addCourse= function () {
    self.CourseDetails.push(new coursesList());
}

function coursesList() {
var self = this;
 self.otherSolution= ko.observable().extend({ required: { params: true, message: "Required" } });
 ........
}

How can I have the binding work properly here and get rid of the error

I’m creating a stacked area chart using d3.js. Right now im not able to figure out on mousemove how to focus separate tooltip on the respective chart curve.
I’m trying to achieve this but for stacked area chart

I have created a sandbox of my progress here: https://codesandbox.io/s/recursing-carlos-3t0lg

Relevant code:

    function mouseMove() {
      d3.event.preventDefault();
      const mouse = d3.mouse(d3.event.target);
      const [xCoord, yCoord] = mouse;
      const mouseDate = x.invert(xCoord);
      const mouseDateSnap = d3.timeDay.floor(mouseDate);
      const bisectDate = d3.bisector((d) => d.date).left;
      const xIndex = bisectDate(data, mouseDateSnap, 0);
      const mouseHours = data[xIndex].hours;
      let demandHours =
        data[xIndex].resourceType === "DMND" ? data[xIndex].hours : "";
      let supplyHours =
        data[xIndex].resourceType === "SPLY" ? data[xIndex].hours : "";

      if (x(mouseDateSnap) <= 0) return;

      svg
        .selectAll(".hoverLine")
        .attr("x1", x(mouseDateSnap))
        .attr("y1", margin.top)
        .attr("x2", x(mouseDateSnap))
        .attr("y2", height - margin.bottom)
        .attr("stroke", "#69b3a2")
        .attr("fill", "#cce5df");

      svg
        .select(".hoverPoint1")
        .attr("cx", x(mouseDateSnap))
        .attr("cy", y(supplyHours))
        .attr("r", "7")
        .attr("fill", "green");
      svg
        .select(".hoverPoint2")
        .attr("cx", x(mouseDateSnap))
        .attr("cy", y(demandHours))
        .attr("r", "7")
        .attr("fill", "yellow");

      const isLessThanHalf = xIndex > data.length / 2;
      const hoverTextX = isLessThanHalf ? "-0.75em" : "0.75em";
      const hoverTextAnchor = isLessThanHalf ? "end" : "start";

      svg
        .selectAll(".hoverText")
        .attr("x", x(mouseDateSnap))
        .attr("y", y(mouseHours))
        .attr("dx", hoverTextX)
        .attr("dy", "-1.25em")
        .style("text-anchor", hoverTextAnchor)
        .text(
          data[xIndex].resourceType === "DMND"
            ? demandHours + "sec"
            : supplyHours + "sec"
        );
    }

    svg.append("line").classed("hoverLine", true);
    svg.append("circle").classed("hoverPoint1", true);
    svg.append("circle").classed("hoverPoint2", true);
    svg.append("text").classed("hoverText", true);
    svg
      .append("rect")
      .attr("fill", "transparent")
      .attr("x", 0)
      .attr("y", 0)
      .attr("width", width)
      .attr("height", height);
    svg.on("mousemove", mouseMove);

In above code I’m creating 2 separate tooltips using selections hoverPoint1 (to show hours SPLY hours) and hoverPoint2 (to show DMND hours)

Expected:
on mousemove, the green circle should move along the curve of blue plotted area AND at same time yellow circle should move along curve of gray plotted area. (please see this as example which shows single area tooltip https://observablehq.com/@elishaterada/simple-area-chart-with-tooltip)

thanks!

I’m using bootstrap-slider 10.6.2.
My step is 5000 and I can’t reach the max value because the max value isn’t multiples of 5000.
There is any way to reach the max value when the step isn’t multiples of 5000?

I am using dropzone in vue js and would like to pass the index with the file to add the file to the corresponding array.

    <div v-for="(lang, key) in $v.model.langs.$each.$iter" :key="key">
          <Dropzone id="bar" ref="bar"  @vdropzone-complete="vfileAdded" :options="options" :destroyDropzone="true" :useCustomSlot="true">
      </Dropzone>
    </div>

here is my method

     vfileAdded(file) {
        console.log(file)
     },

In this case I get file to my method but if I using @vdropzone-complete="vfileAdded(file,key)"
and method

      vfileAdded(file, key) {
        console.log(file)
      },

this I receives key parameter but file is undefined.

How can I pass file with key to my method vfileAdded

I am building a website for a crypto coin meme, the problem is that my navbar doesn’t overlap some of the links and cards I created that have ‘opacity’ argument in CSS. I want to make my navbar overlap everything when I scroll down.

Example photo https://imgur.com/a/Ipd1lOT

HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200&family=Roboto&family=Roboto+Slab&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="CSS/navbar.css">
    <link rel="stylesheet" href="CSS/buttons.css">
    <link rel="stylesheet" href="CSS/details.css">
    <link rel="stylesheet" href="CSS/container.css">
    <link rel="stylesheet" href="CSS/container2.css">
    <link rel="stylesheet" href="CSS/container3.css">
    <link rel="stylesheet" href="CSS/footer.css">

    <link rel="icon" type="image/gif/png" href="assets/shitcoin_logo.png">
    
    <title>Shitcoin - Worst crypto currency</title>
</head>
<body>
<header>
    <div class="Nav-Container">

        <a href=""><img class="logo" src="assets/shitcoin_logo.png" alt=""></a>

      <nav class="navbar">
        <ul>
            <li class="navbar-links"><a href="">Home</a></li>
            <li class="navbar-links"><a href="">About us</a></li>
            <li class="navbar-links"><a href="">Stake</a></li>
            <li class="coinprice"><img src="assets/shitcoin_logo.png" alt=""><p>:&nbsp;&nbsp;$0.00213</p></li>
            <li><a href="#" class="walltet">Connect Wallet</a></li>
        </ul> 
      </nav>
    </div>
</header>
     <div class="container1"> 
        <div class="aboutcointext"> 
            <h1>Welcome to the <span>THUNDER</span> project homepage</h1>
            <h2>Worst cypto coin available on the market!</h2>
            <a href="" class="buycoin">Buy Thunder (THD)</a>
        </div>
        <div class="aboutcoinlinks">
            <a href="" class="fb">Facebook</a>
            <a href="" class="insta">Instagram</a>
            <a href="" class="twitter">Twitter</a>
        </div>
    </div>
    <div class="details">Why you should <span>NOT</span> invest in us?</div>
    <div class="container2">
        <div class="reason1">
            <img src="assets/man_on_toilet.png" alt="">
            <h3>Reason 1:</h3>
            <p>We have very little to no experience in the crypto world</p>
        </div>
        <div class="reason2">
            <img src="assets/just_toilet.png" alt="">
            <h3>Reason 2:</h3>
            <p>This coin is made as a joke and should not be taken seriously</p>
        </div>
        <div class="reason3">
            <img src="assets/money-pngrepo-com.png" alt="">
            <h3>Reason 3:</h3>
            <p>Your capital is at risk and we are not responsible for your money</p>
        </div>
    </div>
    <div class="mining_details">You can mine <span>Shitcoin</span> but we don't guarantee you'll make money</div>
    <div class="container3">
        <div class="">
            <p>Compact tool made by us to help you mine easier:</p>
            <a href="" class="minerbutton">Download THD miner</a>
        </div>
    </div>

<footer>
    <div class="footer-container">
        <h2>Contact Us</h2>
        <ul>
            <li><a href="">Support</a></li>
            <li><a href="">Email</a></li>
            <li><a href="">About Us</a></li>
        </ul>
    </div>
    <div class="footer-container">
        <h2>FAQ</h2>
        <ul>
            <li><a href="">How to buy?</a></li>
            <li><a href="">How to sell?</a></li>
            <li><a href="">How to mine THD?</a></li>
            <li><a href="">More...</a></li>
            
        </ul>
    </div>
</footer>    

</body>
</html>

CSS code for navbar:

body{
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    background: linear-gradient(0deg, rgba(47,48,48,1) 0%, rgba(73,80,87,1) 100%);
    /* background-color: #495057; */
    color: white;
}
header{
    position: sticky;
    top: 0;
    background-color: #ADB5BD;
}
header::after{
    content: '';
    display: table;
    clear:both;
}
.Nav-Container{
    width: 80%;
    margin: 0 auto;
}
.logo{
    width: 5rem;
    float: left;
}
.navbar{
    float: right; 
    /* text-align: center; */
}
.navbar ul{
    list-style: none;
    margin:0;
    padding:0;
}
.navbar li{
    display: inline-block;
    margin-left: 70px;
    padding-top: 31px;

    position: relative;
}
.navbar a{
    color: #495057;
    text-decoration: none;
    text-transform: uppercase;
}
.navbar a:hover{
   color: white;
}
.navbar-links::before{
    content:'';
    display: block;
    height: 5px;
    background-color: white;

    position: absolute;
    top: 0;
    width: 0%;

    transition: all ease 250ms;
}
.navbar-links:hover::before{
    width: 100%;
}
.navbar img{
    float:left;
    width: 2rem;
    position: relative;
    bottom: 7px;
}
.navbar p{
    display: inline;
}
.wallet{
    display: inline;
    padding: 5px 5px;
    border: 1px solid #495057;
    border-radius: 7px;
}

CSS code for social media links:

.aboutcoinlinks{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.aboutcoinlinks a{
    align-self: flex-start;
    margin-left:10px;
    padding: 20px 15px;
    text-decoration: none;
    color: white;
    text-align: center;
    background-color: black;
    opacity:70%;
    transition: all ease 250ms;
}
.aboutcoinlinks a:hover{
    opacity: 100%;
}

.aboutcoinlinks .fb{
    padding: 20px 15px;
    background-color: #4267B2;
    border: 1px solid #4267B2;
    border-radius: 10px;
}
.aboutcoinlinks .insta{
    padding: 20px 15px;
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
    border: 1px solid linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);;
    border-radius: 10px;
}
.aboutcoinlinks .twitter{
    padding: 20px 15px;
    background-color: #1DA1F2;
    border: 1px solid #1DA1F2;
    border-radius: 10px;
}

Using Jest testing in a React Native Expo project

I’m trying to mock some node modules in my project, but many of them have different import export methods.

1 Some are destructured:

import { myFunc } from 'my-module'

2 Some are default:

import myModule from 'my-module'

3 Some are the everything import:

import * as myModule from 'my-module'

4 In other cases, I need to mock a nested function like:

myModule.dosomething()

How do I mock each of these? I cannot for the life of me find a guide that explains it.

On my pages it repeats short content like image licenses, or other things. The convenience would also be to be able to edit them all at the same time by typing just one. I know it’s against SEO, but I don’t really care about search engine penalties.
I can’t get this javascript to work. And yet I think I wrote it right.

<script type='text/javascript'>
//<![CDATA[
  var x = document.getElementById("license").document.querySelectorAll("#license");
  var i;
  var text = "Hello world";
    for (i = 0; i < x.length; i++){
     x[i].innerHTML = text; 
  }
//]]> 
</script>

In my programming in Node.JS I made some code that worked, but I want to understand the concept of how it works.

In the code in question I use knex to retrieve information from a MySQL database. I import the knex module for that:

const config = {...}
const knex = require('knex')(config)

So far nothing new, only this time I needed to do a nested query and it was the first time. In this case, I consulted the sales data and then the sale items. I did it as follows:

const getSales = async () => {
    await knex("tbl_vendas")
        .select(knex.raw("tbl_vendas.id_vendas, tbl_vendedores.nome AS vendedor, " +
            "tbl_clientes.nome_razaosocial AS cliente, tbl_vendas.data, tbl_vendas.hora, " +
            "tbl_vendas.cupom, tbl_vendas.total"))
        .leftOuterJoin("tbl_vendedores", "tbl_vendedores.id_vendedores", "tbl_vendas.id_vendedores")
        .leftOuterJoin("tbl_clientes", "tbl_clientes.id_clientes", "tbl_vendas.id_clientes")
        .then(sales => {
            const rows = sales.map(sale => {
                return knex("tbl_vendas_itens")
                    .select("tbl_vendas_itens.id_vendas_itens AS id_item", "tbl_produtos.descricao",
                        "tbl_vendas_itens.qtde", "tbl_vendas_itens.vl_unitario", "tbl_vendas_itens.desconto",
                        "tbl_vendas_itens.vl_total")
                    .leftOuterJoin("tbl_produtos", "tbl_vendas_itens.id_produtos", "tbl_produtos.id_produtos")
                    .where("tbl_vendas_itens.id_vendas", "=", sale.id_vendas)
                    .then(sales_items => {
                        const newRow = { ...sale, itens: [...sales_items] }
                        return newRow
                    })
            })
            return Promise.all(rows)
        })
        .then(console.log);
}

Writing this code was pretty intuitive and it worked, but then I was amazed that I used the knex constant twice, one inside the other, and it didn’t hurt.

I ran a console.log(typeof(knex)) to find out what it was and it returned that it is a function.

Could someone explain the theory behind the use of knex inside the other and help me understand why it is okay to do this?

I’m trying to check message.content against a JSON and an API link that is fetched and stored to the const data for a automod bot.

The JSON and API link both contain arrays with 600+ items stored.

The idea is to check against a locally stored JSON, and then an API to prevent links being posted.

The code works fine for 90% of the time, but while testing and sending multiple links in a short space of time, i get this error:

TypeError: data.some is not a function

This is the code:

client.on('messageCreate', async (message) => {
     try {
          const guild = client.guilds.cache.get(message.guildId);
          const member = guild.members.cache.get(message.author.id);
          const modLogs = client.channels.cache.get(modLogsChannelID);
          const response = await fetch(
               definedAPI,
          );
          const data = await response.json();

          if (badLinksJSON.some(letter => message.content.includes(letter))) {
               console.log(`${member.user.tag} used a bad link and has been muted.`)
               member.roles.add(mutedRoleID).catch(err => console.error);
               message.channel.send(`${message.author.toString()} You have been muted for: **Bad Link Usage**`).catch(console.error).then(message.delete()).catch(err => console.error);

          } else if (data.some(word => message.content.includes(word))) {
               console.log(`${member.user.tag} used a bad link and has been muted.`)
               member.roles.add(mutedRoleID).catch(err => console.error);
               message.channel.send(`${message.author.toString()} You have been muted for: **Bad Link Usage**`).catch(console.error).then(message.delete()).catch(err => console.error);
          }  
     } catch (error) {
          message.channel.send('Oops, there was an error fetching the API');
          console.log(error);
     }
}

Note: > Multiple variables are defined in the code file above, I have not included them in the code snippet

The try and catch were added to prevent the bot from crashing if this error occured. I am aware it could be done other ways.

Any help is appreciated, TIA.

I am working on an accordion; however, I have two intertwined but different tasks to accomplish the first is how to get the “buttons” to automatically close when another element is opened. I’m not using an existing framework (i.e. bootstrap) as the environment I’m developing in can’t use external resources for displaying content. The other issue I’m trying to solve is how to add rows of information into accordioned spaces, I’m looking for a more effective method that using a table; however, if the table element seems to be the best method that would be acceptable. I have included the HTML, CSS and JavaScript I’ve been using to develop this element and would appreciate any assistance that could be provided.

document.querySelectorAll('.accordion__button').forEach(button => {
    button.addEventListener('click', () => {
      const accordionContent = button.nextElementSibling;

      button.classList.toggle('accordion__button--active');

      if (button.classList.contains('accordion__button--active')) {
        accordionContent.style.maxHeight = accordionContent.scrollHeight + '100%';
      } else {
        accordionContent.style.maxHeight = 0;
      }
    });
  });

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
.search-title {
  box-sizing: border-box !important;
  display: block !important;
  margin: 0 0 30px 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 2.6em !important;
  color: #18467F !important;
}

.subsection-title {
  box-sizing: border-box !important;
  display: block !important;
  margin: 0 0 5px 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 2.3em;
  font-weight: 600;
  color: #C6B66D !important;
}

.update-article {
  padding-left: 25px;
  padding-right: 25px;
}

.search-sub-title {
  box-sizing: border-box;
  display: block;
  margin: 0 0 15px 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 2em;
  color: #C6B66D;
}

.search-text {
  font-size: 1.35rem !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 300;
  line-height: 1.75 !important;
}

.search-heading {
  box-sizing: border-box;
  display: block;
  margin: 0 0 15px 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1.3em;
  color: #18467F;
}

.presidential-search-link a {
  color: #18467F;
  text-decoration-color: #C6B66D !important;
}

.accordion {
  border: none !important;
}

.accordion__button {
  box-sizing: border-box !important;
  display: block !important;
  width: 100%;
  padding: 25px;
  border: none;
  outline: none;
  cursor: pointer;
  background: #18467F;
  font-family: "Roboto Condensed", sans-serif !important;
  font-size: 20px !important;
  font-weight: 800;
  color: #FFF;
  text-align: left;
  transition: background 0.2s ease all;
}

.accordion__button::after {
  content: '25be';
  float: right;
  transform: sclae(1.5);
  color: #C6B66D;
}

.accordion__button--active {
  background: #2771CC;
}

.accordion__button--active::after {
  content: '25b4';
}

.accordion__content {
  box-sizing: border-box !important;
  overflow: hidden !important;
  max-height: 0;
  transition: max-height 0.2s ease all;
  padding: 0 15px;
  margin-bottom: 15px;
  font-family: sans-serif;
  font-size: 18px;
  line-height: 1.5;
  background: #D0D5D9;
}

.hc-collection-list {
  box-sizing: border-box !important;
  display: grid !important;
  grid-column-gap: 16px !important;
  grid-row-gap: 16px !important;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
}

.hc-day-events {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.hc-collection-item-1,
.hc-collection-item-2,
.hc-collection-item-3,
.hc-collection-item-4,
.hc-collection-item-5,
.hc-collection-item-6,
{
  box-sizing: border-box !important;
  display: flex !important;
  width: 100% !important;
  min-height: 350px !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  align-content: center !important;
}

.event-date {
  box-sizing: border-box !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  font-family: sans-serif !important;
  font-size: 52px !important;
  text-transform: uppercase !important;
  color: #888b8d !important;
  text-align: left !important;
}

.hc-event-details {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
  padding-bottom: 30px !important;
}

.hc-event-details-no-link {
  box-sizing: border-box !important;
  margin-top: -220px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
  padding-bottom: 30px !important;
}

.event-name {
  box-sizing: border-box !important;
  background: #18467F;
  padding: 10px 10px;
  line-height: 1 !important;
  margin-top: 20px !important;
  margin-bottom: 10px !important;
  color: #FFF !important;
  text-transform: uppercase !important;
  font-family: sans-serif !important;
  font-size: 24px !important;
  font-weight: 600;
  text-decoration: none !important;
}

.event-location {
  box-sizing: border-box !important;
  margin-top: 5px !important;
  margin-left: -15px;
  color: #18467F !important;
  font-family: sans-serif !important;
  font-size: 18px !important;
  text-transform: none !important;
}

.event-location.subset {
  box-sizing: border-box !important;
  margin-top: 5px !important;
  margin-left: -15px;
  color: #18467F !important;
  font-family: sans-serif !important;
  font-size: 18px !important;
  text-transform: none !important
}

.event-location li {
  box-sizing: border-box !important;
  margin-bottom: 20px !important;
  color: #18467F;
  font-family: sans-serif !important;
  line-height: 1.15 !important;
  font-weight: 600;
}

.event-location.subset li {
  box-sizing: border-box !important;
  margin-bottom: 20px !important;
  color: #18467F;
  font-family: sans-serif !important;
  line-height: 1.15 !important;
  font-weight: 100 !important;
  list-style: none;
}

span.item-details {
  box-sizing: border-box !important;
  margin-top: 15px;
  font-weight: 100 !important;
  text-decoration: underline;
  font-family: sans-serif !important;
  font-size: 18px !important;
  text-transform: none !important;
}

span.address {
  font-weight: 100 !important;
}

.event-location a {
  box-sizing: border-box !important;
  color: #18467F;
  text-decoration: none !important;
  line-height: 1.15 !important;
  transition: all 0.6s ease;
}

.event-location a:hover {
  color: #888B8D;
  text-decoration: underline !important;
}

.event-location.subset li::before {
  content: "";
  width: 8px;
  height: 8px;
  display: inline-block;
  float: left;
  transform: skew(-10deg);
  transform-origin: left bottom;
  background-color: #888B8D;
  margin: 5px 10px 0px -20px;
}

.hc-collection-item-1 {
  box-sizing: border-box !important;
  background-position: 50% 50% !important;
  background-size: cover !important;
}

.visit__campus__title {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 32px !important;
  letter-spacing: 0.01em !important;
  color: #18467F !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  margin-bottom: 30px !important;
}

.visit__campus__text {
  box-sizing: border-box !important;
  display: block !important;
  color: #262626 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.95 !important;
  margin-bottom: 15px !important;
}

.count__up {
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  margin: 30px auto 30px auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 60px 20px !important;
  background-image: url(https://bluetigerportal.lincolnu.edu/image/image_gallery?uuid=9d96d0d7-1d1b-4d7d-96da-37abb1485ebb&groupId=6616610&t=1599054711875) !important;
  background-position: 50% 50% !important;
  background-size: auto !important;
  overflow: auto !important;
}

.statistics__container {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
  grid-row-gap: 30px !important;
  grid-column-gap: 15px !important;
}

.statistics__details {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
}

.stat1,
.stat2,
.stat3 {
  box-sizing: border-box !important;
  display: flex !important;
  width: 100% !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  align-content: center !important;
}

.text__1 {
  box-sizing: border-box !important;
  position: relative !important;
  left: -15px !important;
}

.text__2 {
  box-sizing: border-box !important;
  position: relative !important;
  left: -38px !important;
}

.text__3 {
  box-sizing: border-box !important;
  position: relative !important;
  left: -65px !important;
}

.counter {
  box-sizing: border-box !important;
  display: block !important;
  float: left !important;
  width: auto !important;
  margin: 0 auto !important;
  color: #F5C431 !important;
  font-size: 4.5rem !important;
  font-family: 'Montserrat', sans-serif !important;
}

.info {
  box-sizing: border-box !important;
  display: block !important;
  width: auto !important;
  margin: auto 15px auto auto !important;
  color: #FFF !important;
  text-transform: uppercase !important;
  font-size: 1.5rem !important;
  font-family: 'Montserrat', sans-serif !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

.tour__information__wrapper {
  box-sizing: border-box !important;
  margin-bottom: 30px !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.information {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(50vh, 1fr)) !important;
  grid-row-gap: 15px !important;
  grid-column-gap: 15px !important;
}

.left-column .image {
  box-sizing: border-box !important;
  display: inline-block !important;
  width: 100% !important;
  min-width: 350px !important;
  height: auto !important;
  min-height: 350px !important;
}

.right-column .video {
  box-sizing: border-box !important;
  display: inline-block !important;
  width: 100% !important;
}

.video {
  width: 100% !important;
  height: 100% !important;
  min-height: 350px !important;
}

.tour__url {
  box-sizing: border-box !important;
  display: inline-block !important;
  width: 100% !important;
  padding-top: 15px !important;
  padding-left: 15px !important;
  padding-bottom: 15px !important;
  color: #18467F !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer !important;
  background: rgba(136, 139, 141, 0.6) !important;
}

<div class="accordion">
  <h3 class="search-title">Academic Calendar</h3>
  <button type="button" class="accordion__button">List</button>
  <div class="accordion__content">
    <div class="list__container">
      <div class="list__item">
        <div class="list__item__content">
          <section class="update-article">
            <div class="table_container">
              <div class="table_heading">
                <h2 class="admissions__steps">Columned List of Values</h2>
              </div>
              <div class="row">
                <div class="column left"></div>
                <div class="column right"></div>
              </div>
            </div>
          </section>
          <section class="update-article">
            <div class="table_container">
              <div class="table_heading">
                <h2 class="admissions__steps">Columned List of Values</h2>
              </div>
              <div class="row">
                <div class="column left"></div>
                <div class="column right"></div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
  </div>
  <button type="button" class="accordion__button">Spring</button>
  <div class="accordion__content">
    <div class="list__container">
      <div class="list__item">
        <div class="list__item__content">
          <p class="admissions__steps">Some Additional Information, same as above></p>

        </div>
      </div>
      <div class="list__item">
        <div class="list__item__content">
          <p class="admissions__steps">More of the same as above</p>
        </div>
      </div>

    </div>
  </div>
  <button type="button" class="accordion__button">Summer</button>
  <div class="accordion__content">
    <div class="list__container">
      <div class="list__item">
        <div class="list__item__content">
          <p class="admissions__steps">Different set of data but again same as above</p>

        </div>
      </div>
      <div class="list__item">
        <div class="list__item__content">
          <p class="admissions__steps">More of this type of information continued from above</p>
        </div>
      </div>

    </div>
  </div>
</div>

I’m wondering how to send Javascript File object to AWS Lambda. I have a File object which collected from <input type="file"> and formed as File() object. I’m sending the File() object through an HTTP request to AWS Lambda but ended up getting undefined on the Lambda function.

Front End(Javascript)

let uploadFile = new File(
   [file], 
   Date.now() + " - " + file.name, 
   {type: file.type}
)

const body = {
   payload: {
      file: uploadFile,
      comment: "Uploading File."
   }
}

fetch(url, {
   method: "POST",
   headers: {
      "Authorization": token,
      "Content-Type": "application/json"
   },
   body: body
}).catch((err) => {
   reject(err.json());
});
                        

Back End (AWS Lambda, Typescript)

const handler = async (event: APIGatewayProxyEventV2): Promise<any> => {
   console.log("Whole Event Body:", event.body);
   console.log("Event Body Payload:", event.body.payload);
   ...
}

I’m just getting undefined from the event. I wonder am I doing it correctly? Is it possible to pass the File() object to AWS Lambda?