Category: javascript

My _app.tsx files what to be something on these lines

interface CmsAppProps extends AppProps {
  pageData: boolean
}

const CmsApp: NextPage<CmsAppProps> = ({ Component, pageProps, pageData }) => {
  // ...some component details
}

CmsApp.getInitialProps = async (context: NextPageContext) => {
   // some data process here
   return {
     pageData: true
   }
}

Problem here is, typescript is throwing error as: Type '(_ctx: NextPageContext) => Promise<{ pageData: true; }>' is not assignable to type '(context: NextPageContext) => AmcAppProps | Promise<AmcAppProps>'

Looks like it expense me to return data same as what is argument of component props. I cannot return Component and pageProps from getInitialProps.

If I replace type NextPage with React.FC then it obviously doesn’t contain getInitialProps props. Plus doesn’t has relation like what is being sent from getInitialProps also will be passed on to the component.

Is there a correct way to put everything right in typescript?

I have Django app which I test on my local PC and then when I add something new, I upload changes to my company virtual server. I have a problem with links to files. Below is the code for links to attached files (both my local and server have the same code):

<p class="article-content mt-2 mb-1"><strong>Attachment: </strong><a href="{{post.file_close.url}}">{{post.file_close.name}}</a></p>

If I upload file cars.png everything works fine in both versions. This works no matter the extension, pdf, excel, image, etc.
Problem is, if I upload file carsčč.png it fails only on server side, on my PC it works great.
I get the following error on my Django/debugg:

Page not found (404)
“C:inetpubfilesPyWebmediaPN_files202236cars” does not exist

Like the link is not complete, it stopped as soon as it runs into a special character.
But, shown link still containes all the letters, it’s PN_files/2022/03/06/carsčč.png
Tried:
I looked at regional settings, it’s the same on both PCs. Is there something else I could check or change? Maybe include something in the link?
Also, when I manually search for the file, the name is not currupted, it’s saved localy as carsčč.png. So I guess it’s only the link, tring to get the file.
I figured out it’s because of diacritic letters. On my ‘base.html’ I have meta charset="utf-8". Django setting LANGUAGE_CODE = 'hr-BA'.

I use Bootstrap 4.0 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

Instead of the traditional way of users uploading all of their media such as photos & videos to my servers, how can I code the HTML or HTML & JavaScript to allow users to enter the source link from their own server / cloud storage?

when i use document .write function and i want to when this event happen some css is working on but i can not add css while using classlist

 varlogin=document.getElementById("login");
var sign=document.getElementById("sign")


 
login.addEventListener("click",function(){
    var name1=(document.getElementsByClassName("name")[0].value);
    var pass=document.getElementsByClassName("name")[1].value;
   
 var chan= document.writeln(name1);
  chan.classList.add("change");
   
    var chan2=document.write(pass );
    
    
});

I am working on a motion event activity.When user touch screen logcat shows some messages.And how can ı create a file and save this messages to the file?Can anybody fix my code .(android studio)

enter image description here

I can use the File API to read the whole file with reader.readAsArrayBuffer(file);

const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);

function handleFiles() {
  const fileList = this.files;
  if (fileList.length != 1) return
  const file = fileList[0];

  const reader = new FileReader();
  reader.onload = function(e) {
    console.log("e.target.result", e.target.result);
    ...
  }
  reader.readAsArrayBuffer(file);

How do I perform a random read on a file in the browser? e.g. reader.readAsArrayBuffer(file, offset, length);

I only want to read a small part of a multi-GB file – reading it all to RAM is not an option. How can I do this?

I use chrome querySelectorAll，i want search text by keyword and click side button
see the picture,What should I do? thanks
enter image description here

I try to write some code， but it is no success

Array.from(document.querySelectorAll('connected-sites-list__content-row'))
.find(el => el.textContent === 'cowswap.exchange')
.find(el => el.textContent === '断开')
.click();

I’m using ace on my web and i use js code to find all textarea which use css ace_readonly_php and i found 2 textarea then i iterate and add it in ace but only works the first one the other one doesn’t work

My js code:

if ($('.ace_readonly_php').length) {
$(function() {
  var elel = document.getElementsByClassName('ace_readonly_php');
  console.log("Found "+elel.length+" Element");
  for(let i=0;i<elel.length;i++){
  var editor = ace.edit(elel[i]);
  editor.setTheme("ace/theme/monokai");
  editor.getSession().setMode("ace/mode/php");
  editor.setReadOnly(true);
}
});
}

here is my json:

[
    {
        "customer": "BigCo",
        "performances": [
            {
                "playID": "hamlet",
                "audience": 55
            },
            {
                "playID": "as-like",
                "audience": 35
            },
            {
                "playID": "othello",
                "audience": 40
            }
        ]
    }
]

here is my code(environment is node.js):

let readFile = require('fs').readFileSync

let invoices = JSON.parse(readFile('./invoices.json', 'utf8'))

console.log(invoices);

here is my result:

[
  { customer: 'BigCo', performances: [ [Object], [Object], [Object] ] }
]

I have read some questions related, and get some solutions like invoices = invoices[0] or JSON.parse(JSON.stringify()).
The thing I really hope to know is the reason.
Why do I get the result [ [Object], [Object], [Object] ] and Which part cause the problem?

Background

I have javascript libraries that I used with asp.net for recording audio in a browser, converting it to .mp3 format, and then uploading it. I’m moderately certain I’ll still be able to use those with JS Interop in Blazor.

My Question

What would be the best way to transfer a file from the client to the server? I’m considering:

• streaming the entire audio stream directly to the server with SignalR, perhaps after some kind of transfer speed test, then transcoding to .mp3 there.
• recording and transcoding in javascript, then using javascript FTP to upload (seems a little unsafe to me)
• recording and transcoding in javascript, then doing an HTTP file transfer through an API
• recording and transcoding in javascript, then transferring the compressed file object through a C# object of some kind
• just creating a Blazor app for Windows, using good ol’ mciSendString and using a C# FTP library for the upload to server
• something better?

Ideas / comments?

i have multiple pdf forms (40+) with alot of fields. I want to make sure the common fields in these forms have the same field names. This would greatly help me in storing and sorting the entries. Apart from that i want to make sure the formatting is consistent through all the forms. Is there a way i can extract this data from the pdf forms preferably to excel file, so that i can check / make corrections.
the properties i am looking for are

1.Field ID
2.Field Name
3.Field Type
4.Font
5.Font Size
6.Font Color
7.Alignment
8.Multiline
9.Date Format

These days, I studied about sync, async in Javascript.
And then now, I’m gonna make a crawling program using Puppeteer.

There are many example code in crawling as Puppeteer.
But, I have one question.
Why do they use a ‘async’ in basic example script?

Can’t I use ‘sync’ programming in crawling as Puppeteer?
Is there a issue that I don’t know?

It doesn’t seem useful if I don’t use multi-threads(multi crawling).

I want to know about that

So I am creating a line chart where I have displayed the x axis with time in ‘HH:mm’ format but in the tooltip I want to show the time in ‘HH:mm:ss’. If I am trying to customize my tooltip it takes every second as 0. Is there any way to customize the tooltip so that the seconds are visible properly?

x-axis: ["11:05", "11:06", "11:06", "11:07", "11:07", "11:08", "11:08", "11:09"]
If I convert it to seconds then the data will be ["11:05:30", "11:06:00", "11:06:30", "11:07:00", "11:07:30", "11:08:00", "11:08:30", "11:09:00"] but I need to display my x axis only in hours and minutes.

callback function: 
tooltips: {
                callbacks: {
                    title:  (tooltipItems, data) => {
                        let label = tooltipItems[0].label;
                        label = momentInstance(labelText, 'hh:mm:ss').format(MMM DD - hh:mm:ss A');
                        return label;
                    },
                }

It is displaying as "11:05:00", "11:06:00", "11:06:00", "11:07:00", "11:07:00", "11:08:00", "11:08:00", "11:09:00" for each data point. 

var get=document.getElementById("nameholder").value;
var submit=document.getElementById("submit");

submit.addEventListener("click",function(){
    console.log(get);
});

I have a Laravel project for API and a VueJS project for the front end. I need to upload large video files to the server. My first question is, what is the best way to upload large files to the server with minimum failure?

I have decided to upload the file in chunks and for this purpose, I have tried two different ways.

Using resumablejs:

this.r = new Resumable({
  target:process.env.API_URL+'upload',
  query:{upload_token:'my_token'},
  headers:{
    Authorization: 'Bearer '
  },
  maxChunkRetries: 1,
  simultaneousUploads: 1,
  testChunks: false,
});
// Resumable.js isn't supported, fall back on a different method
if(!this.r.support) return alert('Your browser doesn't support chunked uploads. Get a better browser.');
this.r.assignBrowse(this.$refs.videodropzone);
this.r.assignDrop(this.$refs.videodropzone);
// set up event listeners to feed into vues reactivity
this.r.on('fileAdded', (file, event) => {
  file.hasUploaded = false
  console.log('this.files', this.files)
  // keep a list of files with some extra data that we can use as props
  this.files.push({
    file,
    status: 'uploading',
    progress: 0
  })
  this.r.upload()
})
this.r.on('fileSuccess', (file, event) => {
  this.findFile(file).status = 'success'
})
this.r.on('fileError', (file, event) => {
  this.findFile(file).status = 'error'
})
this.r.on('fileRetry', (file, event) => {
  this.findFile(file).status = 'retrying'
})
this.r.on('fileProgress', (file) => {
  // console.log('fileProgress', progress)
  const localFile = this.findFile(file)
  // if we are doing multiple chunks we may get a lower progress number if one chunk response comes back early
  const progress = file.progress()
  if( progress > localFile.progress)
    localFile.progress = progress
})

Creating manual chunk:

upload() {
  const url = 'upload'
  this.$axios.post(url, this.formData).then(() => {
    this.chunks.shift()
  }).catch((error) => {
  })
},
createChunks() {
  let size = 1024 * 1000, chunks = Math.ceil(this.file.size / size)

  for (let i = 0; i < chunks; i++) {
    this.chunks.push(this.file.slice(
      i * size, Math.min(i * size + size, this.file.size), this.file.type
    ))
  }
}

Both codes give me the same output in the backend. The next part is to append the chunk files into one final file. For this, I have written the following code in Laravel-

public function upload(Request $request)
{
    $file = $request->file('file');
    Storage::disk('local')->append('output/' . $file->getClientOriginalName(), $file->get());
}

Now, here is my problem. I can upload large files using the code above. But the output is not right I think although the output and input file size is the same. The output video file is not playable. It plays first few seconds then it stops. I think only the first chunk is playable. I have tested with a 10MB video file.
Then I have tested with a 10MB pdf file, after uploading the pdf file, I can open the output file and the output is ok. But for the video file, I cannot play the whole video. What is the problem here?