Image Host: Integrating Base64 Conversion into Upload Page

Requirements

In the previous step we implemented the core functionality of the image hosting service, saving and retrieving data.

But to convert images to Base64 data, you have to open another page, that's too...

So we "borrow" this page into our own image hosting operation page.

Approach

Create a card (a class in Bootstrap).

"Borrow" the functionality from the left-side page.

Then create a "Next" button, used to sync the data in the new card to the original elements.

Practice

I won't go into the code details. They're all trivial bits and pieces.

The only thing worth mentioning is that the borrowed page uses the Bulma CSS framework. After some thought, I decided to keep using Bootstrap in my project.

For a better input file component, I switched to Bootstrap V5 (previously was using v4). Then the modal showing operation results had some issues.

I consulted GPT, and combined with Bootstrap's official documentation, I found that some attribute names had changed.

Created a new "theme", theme/imghost

========

End

Github: https://github.com/crazypeace/url-Shorten-Worker/

Demo site: https://imghost.crazypeace.workers.dev/imghostimghost