Requesting help to link JS functions to input buttons

Community Help
1

Dear Observable Community,

This is a somewhat involved help request (for me at least; it’s likely trivial for most users of this platform :pensive:):

I continue to struggle when porting HTML examples into Observable. Inspired by Jeremy Ashkenas’ answer to my question on HTML inputs, I returned to a notebook that I started a while ago to try to connect a JS file operation to a couple of input buttons. Here’s where I’m at:

I would really appreciate if someone reading this could show me how to get this example working. I hope that, once I better understand how to link JS operations to input buttons, that I will be in a better position to build little tools for performing client-side file manipulations. In this particular context, I am hoping to adapt the example into something that will display EXIF metadata for a variety of file types and give people an easy way to change or delete information. In my line of work, it is especially important to be able to remove or obscure GIS information from photos in order to protect privacy and confidentiality.

Thanks in advance for your time and consideration of my appeal for help!

Sincerely,

Aaron

2

While dropping code into Observable and trying to “make it work” may seem tempting, in my experience it’s usually easier to port the functionality:

  1. Identify what a snippet or portion of the code does.
  2. Identify its consumed and exposed API. This step is particularly critical, as it will allow you to figure out dependencies and shared objects or elements.
  3. Wrap APIs in a manner that allows you to control and override them.

In your example, you e.g. accidentally(?) iterate over saveButton instead of files. In another cell, the code that throws the “saveJpeg” seems to have originally shared its scope with code that now lives in a different cell.
While the DOM and and global scope are shared, each cell is evaluated as a function and thus has its own scope.

1 Like
3

Thank you, Mootari. I am slowly working through this. I am very much a beginner and am struggling with many core concepts. I’ll continue to work through what different pieces of code do and will try to re-write them so that they work in Observable. I’d be happy for your continued tips, demos, and tutorials on how to evaluate and port examples to Observable – and especially grateful for guidance on how to get piexif working so that one can easily add and remove read/write commands.

Thanks again!

4

I got piexif to work here

(lots of conversions between buffers, base64 etc.)

1 Like
5

Awesome @Fil! Thanks for all the heavy lifting!

… One of the things that differentiates piexifjs from other JavaScript Exif meta-data tools is its capacity for writing Exif metadata to a file object. When I get a chance, I’ll take a crack at extending your example to include some sort of write function (for my intended use purpose, this would be to overwrite GIS data to obscure the location where a photo was taken).

I can’t express enough how much I appreciate your help and guidance! Thank you!