What steps are involved in transferring a file using the Web Serial API?

I am completely new to this and just started exploring today. My setup includes a Chromebook running Chrome Version 96.0.4664.111 (Official Build) (64-bit) and a Raspberry Pi Pico with the Python bootloader loaded on it using drag & drop method. I am attempting to connect to the Pico serially from my browser in order to upload my source code since I cannot install Thawny on my Chromebook. After putting together a JavaScript function that utilizes the Web Serial API to establish a connection with the Pico, I encountered some challenges.

const filters = [
  { usbVendorId: 0x2E8A, usbProductId: 0x0003 },
  { usbVendorId: 0x2E8A, usbProductId: 0x0005 }
];

// Prompt user to choose an Arduino Uno device.
const port = await navigator.serial.requestPort({ filters });

const { usbProductId, usbVendorId } = port.getInfo();

// Wait for the serial port to open.
await port.open({ baudRate: 9600 });

const textDecoder = new TextDecoderStream();
const readableStreamClosed = port.readable.pipeTo(textDecoder.writable);
const reader = textDecoder.readable.getReader();

// Listen to data transmitted by the serial device.
while (true) {
  const { value, done } = await reader.read();
  if (done) {
    // Allow closing of the serial port later.
    reader.releaseLock();
    break;
  }
  // value is a Uint8Array.
  console.log(value);
}

// Listen to data transmitted by the serial device.
while (true) {
  const { value, done } = await reader.read();
  if (done) {
    // Allow closing of the serial port later.
    reader.releaseLock();
    break;
  }
  // value is a string.
  console.log(value);
}

const textEncoder = new TextEncoderStream();
const writableStreamClosed = textEncoder.readable.pipeTo(port.writable);

const writer = textEncoder.writable.getWriter();

await writer.write("hi");

// Allow closing of the serial port later.
writer.releaseLock();

I am struggling to figure out how to modify this program to enable file upload. Any help would be greatly appreciated as I am still learning and feeling exhausted from New Year's celebrations last night. Thank you!

Answer №1

After extensive research, I stumbled upon the perfect resolution for my query at tinkerdoodle.cc.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a feature in VS Code that can automatically update import paths for JavaScript and TypeScript files when they are renamed or

Are there any extensions available for vscode that can automatically update file paths? For example, if I have the following import statement: import './someDir/somelib' and I rename or move the file somelib, will it update the file path in all ...

Show information stored in Angularjs2 file (.ts) within an HTML document

Here is the code snippet from my .ts file: constructor( private config : ConfigService, private http: Http){ this.getWS('ngoName') .do((data) => { console.log(data); this.saveObj(data); }).to ...

Increasing the identifier of duplicated input fields using jQuery

There is a specific section in my form that consists of a select box and three checkboxes, which needs to be duplicated on request. While I have successfully cloned the div and incremented its specific div, I am facing challenges in incrementing the checkb ...

Passing the title of a page as data to a component in Next.js

I am currently working on setting a custom title for each page within my next.js project. Here is an example of a simple Layout: const MainLayout = props => { return ( <Layout style={{ minHeight: "100vh" }}> <Head> < ...

What is the best way to access a Node/Express API key from the .env file in front-end JavaScript code?

Currently, I am utilizing an OpenWeatherMap API key within my client-side JavaScript for a basic weather application built using Node and Express. However, I understand that this approach is not secure for production environments, so I have installed doten ...

How can you delete using JavaScript by pressing the "Delete" key?

Is it possible to programmatically trigger the deletion of text on an HTML web page using JavaScript or jQuery? I am looking for a way to replicate the functionality of clicking the "Delete" button without requiring users to physically click on it. Inste ...

Pass the specific index of an object located outside of a v-for loop in Vue 3

For educational purposes, I am working on building a basic shopping cart using Vue 3. So far, I have successfully set up the products object and implemented the addToCart() functionality. Everything is functioning smoothly within a v-for loop. However, t ...

Struggling to find the pathway to access a JavaScript file

I am a beginner in the world of web development and I am currently experimenting with node.js along with express. Here is the structure of my directory: First App ----node_modules ----public --------scripts ------------additems.js ----views - ...

How can I change a time duration (e.g. 3 hours 23 minutes) to a specific date and time in

Is there a way to transform a time string such as 2h 25m 15s or 2h 10m into a datetime, or simply convert it to minutes like 1h => 60, using NodeJS? ...

Toggle the visibility of a div and dynamically insert it after a specific div on the page

I have a div that is initially hidden with the style display set to none. Later, I change the display property to null and move it to appear after another div. However, the hidden content is now being displayed. Can anyone provide assistance with this issu ...

Angular-Google-Maps - display issues arise when adjusting map size on mobile devices

After implementing my map, I noticed that on mobile or resolutions lower than 768px, the map renders incorrectly. It seems like all the map tiles load in the top left corner and then render correctly. Even setting the resize event did not resolve this iss ...

Unveil the socket connection using web sockets

My current setup involves a server generating a socket on port 8181. I am interested in accessing this socket from a web page viewed in Google Chrome version 14. It seems that direct access may not be feasible, as Chrome only supports Web Sockets and not s ...

Exploring nested objects and arrays with Plunker - extracting their values

I have retrieved two arrays, each containing nested objects, from API endpoints. One array (preview) consists solely of numbers. For example: [{ obj1:[1, 2], obj2:[3, 4] }] To obtain strings associated with IDs, I made another call to a different en ...

I possess multiple checkboxes that appear as described below. I am looking to modify the nested value highlighted in the blue circle in the image

I need to make a change in this area of my state: view screenshot The specific portion highlighted in the circle is what I want to modify **Here is my checkbox input code:** {this.state.data.map((elm) => ( <div className={classes.rowContainer}&g ...

Store the JSON file for future reference to extract additional information from it at a later time

I am struggling to update my JSON file with new data and retrieve that updated data when needed. Currently, whenever I try to access any information from the JSON file, it shows the same data as the last time I saved it manually. I have made some changes ...

Navigating the complexities of managing group radio buttons in React JS within a functional component

I'm looking to implement a functionality where only one radio button can be selected at a time within a group. I've searched online for class component code, but I'm in need of a solution using React hooks. Can someone help me with an onChan ...

My page is experiencing delays due to setInterval

Currently, I am delving into the world of Chrome Extension development and am faced with a roadblock in replacing elements on a live chat page. While most of my tasks are running smoothly, the one thing causing issues is the setInterval option that trigger ...

Instructions on uploading a PDF file from a Wordpress page and ensuring the file is stored in the wp-content upload directory folder

What is the process for uploading a PDF file on a WordPress page? <form action="" method="POST"> <input type="file" name="file-upload" id="file-upload" /> <?php $attachment_id = media_handle_upload('file-upload', $post->I ...

Safari: The onbeforeunload event

Welcome! To experience the Leave | Stay confirmation box on your page, please make sure you are using Safari 10. I am currently facing an issue with getting the confirmation box to display properly across different browsers. To begin, please visit and l ...

Can you iterate through two arrays to find common values?

Upon examining my firebase database, I found the following structure: Users { askdfasdf: John: { Selection: [1,2,3] }, fasfadffe: Mark: { Selection: [1,2,4] } } Players { { name: &apos ...