feat: fetch file from url + more #115
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Added core functionality for "fetch from URL" method of file upload, for all three tools, using custom "useFileFetcher" hook, which uses "useActionState" behind the scenes. Refactored and generalized existing "useFileUploader" hook along with the new "useFileFetcher" hook to both use a common "useProcessFile" hook. A "FetchFromUrlForm" component was also created to sit alongside the existing "UploadBox" component to accommodate user interaction in the UI for both methods of retrieving files for all three tools, the container holding these two components was widened a touch to accommodate the new FetchFromUrlForm, and some styles were updated to standardize styling between the two methods.
Errors are now handled in a standardized, universal way for all three tools. A shared ErrorMessage component displays the error, and each tool manages a single piece of error state at its top level, to make it easy to manage errors when users trigger multiple errors, even between different methods of file retrieval (e.g. as opposed to managing error state as a FIFO or list data structure). The error state and set method are simply passed as arguments to the useFileFetcher and useFileUploader hooks where they are used at the top level of each tool, and then all of the various issues that can trigger errors germane to each tool can easily set custom error messages. If a setError/onError method is not passed to the hooks, they will default to the original (somewhat crude, tbh) method of displaying errors via alert().
Oops—forgot to add @Keyframes for the Spinner subcomponent of FetchFromUrlForm, which displays inside the submit button when useFileFetcher's useActionState sets form state as "pending".
Removed 3 unnecessary uses of useCallback. (useCallback only provides a benefit when 1. dependencies are specified in the dependency array, and/or 2. the function wrapped in useCallback is being passed as a prop to another component, in order to provide either referential equality across renders, or to memoize expensive calculations—none of which is the case for these three simple handlers that belong solely to this component, require no dependencies, and do not perform expensive calculations. The fourth usage of useCallback, however, makes sense. Unnecessary usage of useCallback adds unnecessary overhead and overcomplicates code. Also slightly improved the styling of FileDropzone—added an "upload" icon as in the regular/non-dnd UploadBox component for consistency, and standardized text colors.
Switched ugly "upload" icon in UploadBox component out for much more balanced, tighter "upload" icon from lucide icons, which I had previously also added to the FileDropzone component, so this also makes the two components consistent.
The same strategy of handling errors in the file upload box/form, drag and drop component, and fetch file from url form has been extended to the paste file from clipboard functionality, for all 3 tools.
Consolidated many inconsistencies among text styles, unified button styles, standardized capitalization of text in various places.
The structure, styles, and size of all preview images for each of the three tools has been standardized. More importantly, whereas previously images larger than the maximum container width would be scaled to fit, but the user had no idea what that scale was (and border radius in the corner rounder tool was not actually being scaled in the preview according to the real dimensions of the image), now, if an uploaded (or fetched) image is larger than the maximum container dimensions, a preview scale will appear above the preview image showing the user exactly at what scale they are currently viewing the preview image. This preview is dynamic and connected to a ResizeObserver, so as the user changes their window size (and this is particularly important for mobile users and users with smaller window sizes, where nearly all uploaded images must be scaled), the preview scale will change dynamically as well.
Enter/escape key functionality on initial tool screen and previews, implemented with a powerful, custom "useKeydown" hook with typesafety, modifiers, excluded modifiers, conditionals, targeting, capture phase, preventDefault and stopPropagation. A DOM utility function has been added to detect focused interactive elements in order to be able to conditionally target keydown events with the hook and work around the native behavior of certain keys without overriding them and losing their functionality.
A number of improvements were made on the various option selector components (generic option selector, svg scale selector, and border radius selector). - Designed and implemented standardized focus states (esp. for keyboard interaction) - Implemented custom increment/decrement buttons on custom number inputs - Made custom number inputs with new increment/decrement buttons fully accessible + keyboard navigable - Generalized handler function for custom number inputs so that it can be used both for input keydown events as well as increment/decrement button click events, just by passing a typed context property along with its event object - Significantly improved the range of numbers a user can type into the custom number inputs, and implemented foolproof validation. Users can now remove all characters from the custom number inputs in order to begin typing something like "0.25", alt/option and shift click key commands still work for small/large increments/decrements, and user-entered values such as 63.9999 and 24.179 will be rounded to a maximum of 2 decimal places, as values like 64 and 24.18, respectively. - Handle null/empty string values better - Improved hover styles on options
At smaller screen sizes, the regular option selector (plus svg scale selector and border radius selector) component can be too wide to fit on the screen and cannot resize or wrap to fit. This commit implements a custom select component that is swapped for the linear scale selector below the "xs" breakpoint (25rem, the width of the upload box + fetch from url form, plus 2rem inline padding on either side = 29rem). The custom select element is fully accessible and keyboard navigable and implements its keyboard functionality with the custom useKeydown hook. Conditional rendering across the "xs" breakpoint is handled with a custom useMediaQuery hook powered by React's new useSyncExternalStore, which is meant to interact with browser APIs like this. When the Select component is rendered instead of the regular option selector components and the "custom" value is selected the custom value input is rendered in a row beside the custom Select component, instead of in a column layout as with the regular option selector. For the SVG scale selector, a new value of 0.5 or 1/2 scale was added as the smallest scale, since it is an extremely common use case for users to halve the size of an image.
All app icons have been consolidated into a single shared component file with multiple exported icon components, each sharing common default props, and exposing a handful of props like strokeWidth and className. In refactoring icons across the app in this manner, I have also added icons to a few important places. A download icon has been added to the main "save" buttons in each of the three tools, which really helps to communicate the fact that those buttons are primary CTAs and highlights their action in an immediate, visual way, and a GitHub logo icon has been added to the footer link to the app's repo on GitHub. This helps balance and standardize the GitHub link in the footer with the "Back" link in the header. with its icon.
Footer content within a <footer> element has been consolidated into a shared <Footer> component.
The blocks under the preview image on each tool which display information such as "original (size)" and "actual (size)", "scaled (size)", etc have had white-space: nowrap applied to them to ensure that at smaller screen sizes the layout does not become messy.
A page title, fed by the title property in the page metadata has been added to each tool page, rendered in a shared <PageTitle> component, which fits nicely in line with the "Back" button on each tool page. This page title makes it a lot more obvious for users which tool they are using, since otherwise they can look very similar, and balances the header more visually.
Previously, if users uploaded a transparent SVG with dark (esp. black) artwork, the image would be completely unreadable on the site's dark/black background. This commit adds an option selector to the svg-to-png tool that allows users to toggle between dark and light preview backgrounds (i.e. not included in PNG export) so that they can actually see the SVGs they upload in such cases.
An option to make an image square, with the extra background transparent has been added to the square-tool, and both square-tool and rounded-tool now render their "transparent" options with a classic "checkerboard" style pattern, because otherwise it is impossible to tell where transparency is if the image has a black background or black artwork, given the black background of the site.
User input that is >= 1000 should be clamped to an even 999, while still allowing users to manually input values arbitrarily close to 1000 such as 999.9999999999, or use the increment button with the alt/option key to enter 999.9.
Because the footer link pushes the main content/container up by 60px, the main content isn't vertically centered. The "back" button and the PageTitle component that was implemented to emulate its design are not part of the static flow of the page, so they do not push the content down equally. Therefore we have to add a top margin equal to the height of the footer in order to keep the content centered both on the main page.tsx and the tool page layout.tsx.
At some point I was sure that the native Space and Enter for activating the native file input was working, but this usage of the useKeyDown() hook ensures it works and is fully keyboard navigable.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
If a user uploaded an SVG image with no explicit width and height attribute defined, this would cause the exported image to be malformed. This was fixed by reverting to using viewBox attribute dimensions if those explicit dimensions are missing. SVGs missing both width/height and viewBox throw errors at upload/fetch time, so SVGs are guaranteed to have valid dimensions in either explicit width/height attributes or in a viewBox attribute.
The square image tool so far has only ever taken a source image and "contained" it within a square representing the largest dimension of the source image. However, there is another way to square an image, and that is to take the smallest dimension of the source image as the square size, and then "cover" this square with the source image. The "object-fit" property in CSS is very similar. I implemented this with an instance of the OptionSelector component that toggles between the two modes, with "contain", the status quo, as the default value. Now, users can toggle between these two methods of "squaring" an image at will. I also fixed issues that were related to differences in how the HTML canvas "drawImage" method handles SVG vs. raster data. This was causing some SVG images to be incorrectly positioned in "cover" mode.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Hi Theo, long time sub/viewer, but first time contributor to one of your projects.
I love this simple little app, but time and again I found myself repeatedly running into a limitation in the original featureset. A very common use case for me is to need to edit images using the tool that exist online, or that I find online via a web search. As it stands, this requires me to download a file every time and then re-upload it in order to use the tool.
This PR and feature branch, provides this missing functionality, in the form of an alternative way of inputting images in each of the three tools—fetch file from URL. Basically, when using any of the tools, a user can either click upload/drag and drop/paste a file to upload, or—with these changes—they can copy and paste any URL that resolves to an image and the app will fetch that file, process it, and use that image instead.
TL;DR, Major Changes
BTW, I'm currently looking for work. I'm what is more and more being called a "Design Engineer"—I have 15+ years experience both as a senior/lead product designer and as a developer (full stack, but most of my work tends to be more front-end-y). React+TypeScript is my center of gravity and has been since 2018. See: www.avanavana.com
Videos
🎥 Demoing fetch file from URL and SVG scale factor improvements
https://github.com/user-attachments/assets/e49b3890-6f14-4ed5-97aa-3f835197b7d0
🎥 Demoing some of the new features, dynamic preview scale, keyboard navigation, etc
https://github.com/user-attachments/assets/deb28194-ca78-41c3-8576-468a4a66e12b
🎥 Demoing corner rounder proportional border radius improvement
https://github.com/user-attachments/assets/7115ffec-a247-403c-9a81-397b0f770dd2
🎥 Demoing behavior of "too-wide" and "too-tall" images with screen-size change
https://github.com/user-attachments/assets/3b1fec9b-8f6e-47ed-90e2-cea994246b62
Summary
In implementing the fetch file from URL feature, I aimed for maximum parity and mutual intelligibility between the existing
useFileUploader()hook by implementing it with a new custom hook,useFileFetcher(), which uses React's new-ishuseActionState()hook on the back-end, as well as by abstracting/generalizing the file processing logic that was previously located entirely withinuseFileUploader()as its ownuseProcessFile()hook, which now serves both hooks/methods of retrieving files.Along with implementing this feature I also implemented better error handling, especially from the point of view of users. Instead of console errors and
alert(), there are now real error messages whose state lives at the top level of each tool and whose set method is passed into theuseFileUploader(),useClipboardPaste(), and newuseFileFetcher()hooks, allowing each method of file retrieval to produce and render its own distinct errors in a simple, centralized way.I also implemented accessible keyboard navigation for all interactive elements, using a powerful new, custom
useKeydown()hook so the entire app can be controlled by means of keyboard control, and I implemented WAI-ARIA best practices.For the option selector components like
OptionSelector,SvgScaleSelector, andBorderRadiusSelector, at small screen sizes, those with many options (especiallySvgScaleSelector) were overflowing in the x-direction. I implemented a simpleuseMediaQuery()hook to conditionally render these option selector components with a new customSelectcomponent at small screen sizes. Initially I tried implementing it with a native<select>element, but the conditional mounting led to a problem where, due to browser restrictions, the newly-mounted native element was unable to be operated with a single click/touch event—the first click/touch event would focus the element but the browser would then prevent its options from being shown—until after a second click/touch event. This was unacceptable from a UX perspective, so I decided to implement it as a customSelectcomponent. This component is fully accessible and keyboard-navigable, using all the same events as the native element.Beyond this, I did some work standardizing and improving styling across the app, while keeping it true to the original look and feel, and I consolidated and standardized various pieces of UI shared across the three tools.
A full list of the updates is provided below, along with the testing I performed.
Additions & Updates (Full List)
Home
All Tools
page.tsxfileFileDropzonetextFileDropZonecomponentFileDropzoneandUploadBoxuseProcessFile()custom hook, which performs standardized file processing logic behind the scenes and allows for standard implementations of multiple methods of file inputErrorMessagecomponentviewBoxattribute, instead of arbitrary 300x150 size, which caused issues with centering user-provided content in the square image toolSelectcomponent, since browser restrictions prevent the use of native<select>(when the native select mounts after screen resize, the browser prevents initial click events, requiring users to click twice with the menu flashing open and closed very quickly and awkwardly—unacceptable)OptionSelector/SvgScaleSelector/BorderRadiusSelectorstate<select>element with new customSelectcomponent, conditionally rendering it inOptionSelector/SvgScaleSelector/BorderRadiusSelectorwhen the screen is below the "xs" breakpoint, and in a 50/50 flex-row arrangement with the "custom" input field when it is present<select>version of scale selectorSVG to PNG tool
*.svgfiles from paste from clipboardSquare image tool
OptionSelectorcomponent to allow users to toggle between "contain" (existing behavior) and "cover" image-fit/object-fit modes/methods of "squaring" a source image.Rounded corner tool
General/components
UploadBoxFileDropzoneUploadBoxuseCallback()throughout app to avoid premature or negligible optimization, i.e. unnecessary usage of useCallback that may add unnecessary overhead (useCallback()only makes sense in cases where 1. heavy computation is necessary, 2. referential equality is necessary, and 3. in general, where it actually improves performance in a way that can be measured (i.e. measure performance before & after before employing it).useCallback()is generally unnecessary when it is used with both no dependencies and the function it wraps is not being passed to any props in child components. In other words, if it is used to wrap handlers in a function that are not passed down and only used in that component, with no dependencies, and no heavy computation, it is unnecessary and just adding to overhead.Testing
main screen
all tools
svg-to-png-tool
Selectcomponent below "xs" (29rem—i.e. 25rem + 2rem inline padding) breakpoinirgvt gfvvSelectwith native keyboard controls (spacebar + down arrow to open, arrow keys to change selected option, option/alt or cmd + arrow keys to jump to top/bottom of options, enter or spacebar to confirm selection)Selectdisplay modes across the 30rem breakpointsquare-tool
rounded-tool
Selectcomponent below "xs" (29rem—i.e. 25rem + 2rem inline padding)Selectwith native keyboard controls (spacebar + down arrow to open, arrow keys to change selected option, option/alt or cmd + arrow keys to jump to top/bottom of options, enter or spacebar to confirm selection)Selectdisplay modes across the 30rem breakpoint