Gist 7571798

100%

✓ Published0🌍 Public

Last edited Dec 4, 2012

Created on Nov 20, 2013

This example shows a file-reading utility that loads either image or text files into the browser using the HTML5 File API. It creates a FileReader instance and wraps its asynchronous operations in a jQuery Deferred object, returning a promise that resolves with the file’s content. For images, the reader uses `readAsDataURL` to produce a base64-encoded data URL; for all other file types, it uses `readAsText` to retrieve the raw string. The code handles load and error events, rejecting the promise on failure.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 5c673a7db6d8612eda9dee50ff2e4b80

This example demonstrates asynchronous file reading and HTTP request handling in Node.js. It shows how to extract the first line from a local file and retrieve the HTTP status code from a remote URL using two separate promise-based functions. The code uses Bluebird’s `Promise` constructor, Node’s `fs.readFile` API, and the `request` library for network requests. Each function returns a promise that resolves with the extracted data or rejects on error, illustrating a modular approach to handling I/O operations with promise chaining.

MMailnickko

66% match

Loading thumbnail…

Read File or HTTP

This example demonstrates a small utility for reading text content from either a local file or a remote HTTP URL, abstracting the source so callers can use a single `get` function. The code shows a Node.js script that checks the URL protocol: if it starts with `http:`, it uses the `http.get` method to stream the response, collecting data chunks and joining them as a UTF-8 string; otherwise, it falls back to `fs.readFile` with a `"utf8"` encoding. Both paths invoke a callback with either an error or the resulting body, making the helper suitable for loading data files or web resources in server-side visualizations.

Mmbostock

66% match

Loading thumbnail…

Gist 474c05b31ba635a5938112a1efb5e7ef

This example demonstrates reading a file from disk using Node.js’s synchronous file system APIs, specifically `fs.openSync`, `fs.readSync`, and `fs.closeSync`. It reads the first 4 KB chunk of `public/index.html` into a `Buffer`, converts that slice to a UTF-8 string, and prints it to the console. The code also includes a commented-out asynchronous equivalent using `fs.open`, `fs.read`, and `fs.close`, showing both approaches side by side.

Aalessioalex

63% match

Loading thumbnail…

d3.queue image loader

This example demonstrates how to load multiple asynchronous resources before rendering content to a canvas, using `d3.queue` to coordinate a text file and an image. The code defines a custom `d3.imageload` function that wraps the HTML `Image` object, then defers both it and `d3.text` for `hola.txt` and `thumbnail.png`. After both complete, it displays a status message and draws the loaded image onto the canvas using the Canvas API’s `drawImage` method. The page’s body is fixed to fill the viewport, and rendering targets a `canvas` element.

PPhilippe Rivière

61% match

Loading thumbnail…

Gist 6442223

This example demonstrates a file upload interface with a progress bar, built using jQuery and the html5_upload plugin. The page allows multiple file selection, prompts for a server URL for each file, and displays upload progress with a blue progress bar. The CSS gives the page a cohesive blue gradient design with responsive layout adjustments for different screen sizes, including a playful rotation effect on images when clicked. The visualization highlights the interaction between custom JavaScript upload logic and dynamic CSS styling.

AAntonio24

61% match

Loading thumbnail…

ba 401 Data loading Data

This example demonstrates a minimal data-loading workflow using the browser’s native Fetch API to retrieve a remote dataset from a GitHub Gist. The page consists of a single HTML file with inline JavaScript that calls `fetch(url)` and logs the resulting Promise to the console. No rendering, styling, or data processing occurs; the example solely illustrates the first step of asynchronously fetching external resources in a plain HTML/JavaScript context, without any additional libraries or frameworks.

Ddeven1998

61% match

Loading thumbnail…

Gist 1a03bf15beee9f72953b414669e44576

This example demonstrates a Node.js utility that asynchronously fetches the HTTP status code for a given URL. It first reads a text file using the `fs.readFile` method to extract a domain or URL from its first line, then passes that address to the `request` library’s `getStatusCodeAsync` function, which returns the server’s response code. The visualization shows how file I/O and network requests are chained through callbacks, highlighting the flow of data from local storage to remote servers without any graphical rendering.

MMailnickko

60% match

Loading thumbnail…

Gist 30cbfbfa6a3cb42eef6beba8d35b62a1

This example demonstrates a browser-based utility for saving JSON data as a downloadable file. It shows how to serialize a JavaScript object into a formatted JSON string, wrap it in a Blob, and trigger a client-side download. The code uses the Blob constructor with the `application/json` MIME type, feature-detects the HTML5 `download` attribute, and creates a temporary anchor element with `URL.createObjectURL` to initiate the download. It also includes a fallback for Internet Explorer 10+ using `navigator.msSaveBlob`. The filename is fixed as `directory.json`, and the data structure comes from the `finalData` parameter passed to the `downloadFile` function.

Aalexfinnarn

60% match