Instruct the user to input a file name before initiating the download of a text file using Angular

Does anyone have experience with downloading content in a txt file? Here is the code snippet I'm working with:

download() {
let content = "Sample text";
saveAs(new Blob([content], { type: 'text/plain'}), 'sample.txt');

I am using the file-saver library for this task. Everything is functioning properly, but I would like to implement a browser popup that allows the user to input their desired file name, choose the download directory, and potentially override existing files before initiating the download.

If anyone can provide assistance or guidance on how to achieve this functionality, it would be greatly appreciated. Thank you!

javascriptangulartypescript

Answer №1

Instead of immediately triggering the saveAs() function when the button is clicked to download the content, you could consider first prompting the user for a file name before proceeding with the download.

download() {
    let filename = window.prompt('Please enter a name for your file', 'sample');
    let content = "Sample text";
    saveAs(new Blob([content], { type: 'text/plain'}), `${filename}.txt`);
}

If you want a more visually appealing approach, you can use Bootstrap's modals, or create your own stylish modal.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to align the Bootstrap 4 button toolbar horizontally in an Angular project

I'm struggling to center the button toolbar horizontally on my webpage. This is what I have so far: <div class="row"> <div class="col-sm-6 mx-auto"> <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"& ...

htmlcssangularbootstrap-4centering

Ensuring a DIV remains fixed in place for a specific number of scrolls

I'm looking to create a 'Page section' that remains in place while scrolling for a specific distance and then smoothly transitions to the next section. I've attempted to implement this within the child theme without success... Any sugge ...

javascriptjqueryhtmlcsswordpress

Employing innerHTML in conjunction with Greasemonkey

In the process of creating a userscript (specifically for greasemonkey/firefox) that will be utilized on a webpage, I have encountered a challenge. This script includes a set of area tags with an onmouseover attribute that triggers a function: <area ...

javascriptjquerygreasemonkeyinnerhtmluserscripts

Is it possible to verify type property names using a union type?

Given type UnionType = 'prop1' | 'prop2' | 'prop3'; type DerivedType = { prop1: string; prop2: number; prop3: boolean; }; Is there a method to define DerivedType in such a way that if I introduce a new member to UnionT ...

typescriptunion-types

Associating fixed UI element interactions with Backbone's View component

I'm looking to add a click event to a button without relying on using a template. Creating the HTML <div id="transfer"> <input type="text" placeholder="From Address" id="fromAddress" /> <input type="text" pla ...

javascriptbackbone.js

Ways to trigger a JavaScript notification

I consider myself experienced in scripting, but I can't seem to figure this out. I'm trying to trigger a function on a button click event, so I decided to start by testing the buttonclick event with a basic window.alert. I wrote the following htm ...

javascriptjqueryhtmlalert

What is the best way to add Vue dependency using CDN?

For my project which is built using Kendo, Vue, .Net, Angular and jQuery, I need to incorporate https://www.npmjs.com/package/vue2-daterange-picker. <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-c ...

javascriptjqueryvue.jskendo-asp.net-mvcscriptbundle

Tips for displaying a message in the model body when a bootstrap model does not have any data in jQuery

Having trouble displaying a text message in the Bootstrap modal body when there is no data available in the model. I have multiple cards in the model, and if I click on the skip or done buttons, each card will close. However, if there is only one card in t ...

javascripthtmljquerycssbootstrap-4

Could someone shed some light on why hjk fails to print whenever I click?

Why is the code not printing 'hgk' every time I click? The debounce function should run and print 'hgk' each time the button is clicked. Can someone please explain why this is not happening? const debounce=(fn,delay)=>{ ...

javascripthtmlreactjsdomdom-events

The Angular router is throwing a "TS2339: Property 'navigate' does not exist on type 'Route'." error message

I'm really struggling with this issue. Why is the 'navigate' property not available to use? When attempting to use it, I receive the error message "TS2339: Property 'navigate' does not exist on type 'Route'." For more in ...

angularangular-router

Looking for a way to make this HTML tab appear using ng-show and an external variable in AngularJS - seeking guidance as a beginner!

Here is the HTML code snippet controlling the tab presentation: <li class="presentation" ng-show="currentUserAuthority == LIBRARIAN" > However, there seems to be an issue with the variable "currentUserAuthority" not updating until after the web pag ...

javascripthtmlangularjs

The time zones between Node 8 and Node 11 are not the same

Executing a basic new Date().toString() command produces different results on Node 11 compared to Node 8. In Node 11, the output includes the full timezone abbreviation like this: 'Fri May 10 2019 10:44:44 GMT-0700 (Pacific Daylight Time)' On t ...

javascriptnode.js

The JSON GET method displays HTML content when accessed through code or console, but presents a JSON object when accessed through a web address

I am currently trying to execute the following code: $(document).ready(function () { $.ajax({ url: 'http://foodfetch.us/OrderApi/locations', type: 'GET', success: function(data){ alert(data); ...

javascriptjqueryjsonajax

Determining the active status of a class using oTree and JavaScript

Upon running the following code: <div id="1-round" class="btn-group btn-group-toggle btn-lg" data-toggle="buttons" > {% for checkbox in form.players_choice %} <label class="btn btn-primary rounded mr-3 active btn-lg 1-round" style="ma ...

javascriptbootstrap-4otree

Slider buttons are not appearing in Time Picker

I recently added a Time Picker to my project, but I'm experiencing an issue where the slider buttons for selecting time are not showing up. Could you please refer to this image: Checking the console, there don't seem to be any errors present. ...

javascriptjquerycssjquery-uidatetimepicker

JavaScript Elegance: Error Encountered - Unable to Locate Property 'index of' of an Undefined Value

As I delve into learning JavaScript through Eloquent Javascript, I encountered an error in one of the chapters that has me stumped. The error message "Cannot read property 'indexOf' of undefined" is appearing with this line of code: re ...

javascript

Expand or collapse in a sequential manner

Is there a way to ensure that only one table row expands at a time, causing the others to collapse? Any suggestions on achieving this? Here's the HTML code snippet: <table class="table"> <tbody> <tr class="parent" id="2479"> ...

javascriptjqueryhtmlcss

Search input in real-time

I am in the process of implementing a live search input feature in Ionic 3 within a form group. Within my TypeScript file, I have the following code: getSubElements(selectedValue) { if(selectedValue){ this.VisitesProvider.getEcolesLi ...

ajaxangularionic-frameworkionic3livesearch

Iterate through JSON objects

Having an issue with looping through JSON using jQuery AJAX. Despite receiving the JSON data from PHP and converting it to a string, I'm unable to loop through it properly in JavaScript. In my for loop, I need to access $htmlvalue[i] to parse the data ...

javascriptphpjqueryajaxjson

Why is my Angular proxy failing to rewrite the path when making an HTTP GET request?

I am facing an issue with my proxy configuration where it is not redirecting as expected based on the rewrite configuration. You can find my proxy.config.json below: { "/sap": { "target" : "http://server.domain.com:8002", "secure" : fa ...

angularproxycross-browserodata