DEV Community: Christopher Howard

// WPimagines, A Free AI image generator(yup, another one)

Christopher Howard — Wed, 06 Sep 2023 19:11:14 +0000

I just launched my ai image generator last week. It is a text to image generator that can view & download images. I'm currently working on a paid version that will let you edit downloaded images, gives you tutorials on prompting & let's you export images to various sizes.

You can check it out here.

How to use res.download() to download images

Christopher Howard — Wed, 02 Aug 2023 18:55:28 +0000

What does res.download() do?

An express.js method that downloads the file at the path specified as an attachment. It takes these arguments.

Path — string, the path to the file you want to download.

Filename — string, the file name you want to call the file, if absent will use the filename in the path.

Options — object, an object used to specify options.

Callback — function, a function to do when it completes successfully or throws an error.

Using res.download() normally

Here I'm going to make a html document with 2 buttons in it.

When I click the first button I'll reroute the browser with window.location.href to the "/download" route on the express server.

On the server, I'll make a get request to the "/download" route. In the response, I'll use the res.download() method with the path, filename & callback functions specified. When it comes back successful, I'll console.log() a message. The file will be downloaded when I hit this route. Also, the browser will remain on the same view or page even since res.end() was called instead of res.render() or res.redirect.

Res.download() automatically calls res.end()

When res.download() completes successfully it automatically calls res.end() after the callback function. That means you don't need to call res.end(), res.json() or any other method that ends the response. Doing so will throw an error.

Res.download() errors

When calling a method that ends res.download(), you will receive a headers already sent error. This means that res.end() was called twice. To check for this, you could see if res.headersSent property is true. This property checks to see if a response was already sent.

The other error that will be thrown is if the path to file is wrong or the file being downloaded does not exist. If this happens you'll want to send a response status saying the file is not found.

Using res.download() with fetch request

If you need to use fetch to send some form info or do something else, you will have to make a middleman route an order to use res.download(). Res.download() will fire, but it will not download the file. I made a call to "/downloadImage" route, then returned a message. When the fetch request completes, I then reroute the browser to the "/download" route to get the file.

Extras

The express docs for res.download() says that browsers will prompt the user for download. I have not run into this myself. Here is code putting res.download() into action.
To find more articles from me visit webplayground.

How a Content Editable Element Works

Christopher Howard — Thu, 06 Jul 2023 15:36:02 +0000

Focus on Content Editable Element

You can use a ce(content editable) element as a text editor or a content management system. These articles are going to be using a ce as a text editor. Ce elements can be focused on like a input or text area element. Once you focus on a ce, you can start typing.

The Elements Within a Ce Text Editor

When you make a ce text editor, you want to start with an element such as a paragraph or a div with some text content in it. You can press the enter key & the text editor will start a new line with a new element in it. If you press enter while there is text after the cursor, you will move the text after the cursor to the new element. The element you start the te with will be created every time you press enter.

The ` ` tag

The   tag inside the text editor is important. When you focus in on the te, the cursor needs an element or a text node to start at. So, when I press enter it creates a new <div> with a   tag inside of it. The   tag is what the cursor is selecting so I can type in it. Once I start typing the   tag disappears because it’s just a line break, there is no elements or content inside of it. If I delete all the text the   will reappear, if I hit delete again the element will be deleted.

My name is Chris. You can find more articles about html/css & javascript on the webplayground.