In this blog post we will learn how to develop a custom file downloader app using javascript
About Any File Downloading App From URL in JavaScript (Videos, Images)
In this blog post we will learn how to develop a custom file downloader app using JavaScript. We will explain everything in an easy to understand manner and provide a detailed overview of the logic used. So let's get started now!
URL Validation In JavaScript Using Regex
Regular expressions commonly known as Regex are a way to match characters or search for a specific character or string using mathematical representation. In JavaScript we can use the test function to validate any pattern. For instance we can search for a pattern in the URL using a regular expression like this: /.(jpe?g|png|mp4)/. This pattern is used to match strings that end with jpeg jpg png or mp4.
Test Function in JavaScript
JavaScript test functions are used to validate URLs. In our case we need to ensure that the user inputs a correct URL containing a valid image or video file.
We can check a URL's validity by testing if it contains a file with the extensions .jpg .jpeg .png or .mp4. If the URL passes this test then we can proceed otherwise we should display an error message prompting the user to enter a valid URL. Note that the letter 'e' in 'jpeg' is optional since different image formats use different extensions like .jpg .jpeg and .png.
This is the complete logic behind URL validation. Let's move on to the next block where we discuss some functions we used to handle error and success messages with BTN disabling or enabling at the time of processing.
Default Functions to handle Alert messages and button behavior
So after clearing the upper block we discuss how can we handle alert messages and BTN handling using functions we will create an error function success function Button disabled function and reset function.
When we get any error we will use the error function to print an error message in red color and the success function when everything is ok if everything is ok we will use the resetUI function that enables the button and in the case of processing we disable the button. These are the functions we use to handle our next logic.
Now let's move on to the final block where we discuss a request that we make to get the content of the file from the URL. For this last implementation we call the last function downloadFile().
This function will use fetch req to get content from the URL and to handle the request properly we will use the try & catch statement in javascript to properly handle if the program fails and returns an error. Let's move on to the last block of this post.
Try and Catch Statement with Fetch API Request
To handle the last condition we use try and catch statements with fetch API requests. In the try block we initiate a fetch request. If the program returns successfully we use a statement to return the blob followed by another statement to return the content or data.
To download a file we can use the function URL.createObjectURL(). This function creates a blob URL that enables us to download the file easily. First we create a tag element then we assign the Blob URL to its href attribute. This is done using the syntax: a.href = (blob URL). We also need to specify the download attribute which is set to (Output.[type]). Once we have implemented this logic the file will be downloaded.
Steps to Follow
1. To start building a web page write the HTML code.
2. Use CSS to create an appealing design for the page.
3. Integrate JavaScript into the code.
4. Begin by creating all default functions.
5. Obtain all selectors required for the task.
6. Create error and success messages to display to the user.
7. Use the onkeyup() event listener in JavaScript to retrieve the value from the input[type="URL"] field.
8. Use Regex to validate valid extensions from URLs such as [jpg jpeg png mp4]. You can add more extensions if needed.
9. The pattern used for validation is [ /.(jpe?g mp4 png)/ ].
10. Add a click button event listener to the download button.
11. Use the Try and Catch condition to handle the fetch API request.
12. That's all!
Final Conclusion
With a complete understanding of the logic we can create a custom JavaScript app that downloads any file from a URL. You can find additional projects on my website and download the full source code.
