Adding a media preview and gallery helper to blog poster

I've had gastro the last WEEK. While on holidays. So I needed a win. Decided to scratch an itch.

Problem

When I add images into my simple Post Uploader (that commits the markdown file to Bitbucket and triggers all the generator logic), I don't have any helpers for making my markdown gallery. I just have to run a preview function and the page submits and puts all the image names into a markdown gallery template. But I have to guess the files to write captions for them.

Solution

A quick addition of JavaScript on the client side and now it gives me a preview of each image and an input text field to write the caption on. It then gives me the markdown combining images to captions. Since it needs JavaScript to function, I've written it to create the elements when invoked rather than having empty elements that serve no function without JavaScript.

 1// Media preview
 2var mediaElement = document.querySelector("#media"),
 3    uprev =document.createElement('DIV') ,
 4    mprev =document.createElement('DIV') ;
 5uprev.setAttribute('id', 'upload-preview');
 6mprev.setAttribute('id','markdown-preview');
 7mediaElement.parentElement.appendChild(uprev)
 8mediaElement.parentElement.appendChild(mprev);
 9
10// This function is called when text changes in the inputs
11updateMediaMarkdown = function(e) {
12    e.preventDefault();
13    // This is the start of a gallery
14    mprev.innerText = `<section class="gallery-2020-4">` + "\n";
15    var now = new Date();
16    // For each `li` of the template outputs:
17    document.querySelectorAll('#upload-preview ul li').forEach((e) => {
18        var name = e.querySelector("img").getAttribute('data-name'),
19            thumb = name.replace(/(.jpg|.gif|.png|.webm|.jpeg)$/ig, "-thumb.jpg"), 
20            cap = e.querySelector("input").value;
21            // This is a template to add the date to the media file as well as the autothumbnail
22        mprev.innerText += `[![${cap}](/blog/media/${now.toISOString().substring(0,10).replaceAll('-','/')}/${thumb} "${cap}")](/blog/media/${now.toISOString().substring(0,10).replaceAll('-','/')}/${name})` + "\n";
23    });
24    mprev.innerText += `</section>`;
25    console.log("Yo");
26}
27
28// When we alter the media files upload whatsit..
29mediaElement.onchange = function(e) {
30    // Clear areas
31    document.querySelector("#upload-preview").innerHTML = "<ul></ul>";
32    document.querySelector("#markdown-preview").innerHTML = "";
33    // Process individual uploaded files
34    Array.from(mediaElement.files).forEach((file) => {
35        const fileReader = new FileReader();
36        const fileName = file.name;
37        // Once we've got the image content in the js...
38        fileReader.addEventListener("load", function() {
39            var img = document.createElement("IMG"),
40                caption = document.createElement("INPUT")
41                li = document.createElement("LI");
42           // Create a new LI with the image+input template
43            img.setAttribute("src", this.result);
44            img.setAttribute('style','max-width:300px;');
45            img.setAttribute('data-name', fileName);
46            caption.setAttribute('type','text');
47            caption.setAttribute('value','?');
48            // Here's where we attach the change-text function
49            caption.onchange = updateMediaMarkdown;
50            li.append(img);
51            li.append(caption);
52            document.querySelector("#upload-preview ul").append(li);
53        });
54        fileReader.readAsDataURL(file);
55    })
56}

X