What I want achieve
All I would like to achieve is that implement a file download functionality such as image files, text files etc... using javascript or Jquery.
estimated procedure is like..
① select a file
② click download icon
③ start download file ← here is my problem.
below codes are that I tried.
<a target="_blank" href="{{ f.file }}" download="{{ f.title }}" download><i class="fa fa-download text-secondary border p-2" aria-hidden="true"></i></a>
estimated browser
crome, firefox.
Any of ideas would be great.
※ so far, below code works fine except for image files.
<a href="<your_file_url>" title="{{ f.title }}" download></a>
Thanks.
Try:
<a href="<your_file_url>" title="{{ f.title }}" download></a>
Just be sure you give your file URL in href. You are using ‘"{{f.file}}"’. First check if {{f.file}} redirects to the right file URL.
Related
I need to create an url on icon to download some files. In my controller I do this
$scope.download=download;
function download(id){
console.log("Parameters "+id);
return "......"+id;
}
In my html I do this:
<a title="download" ng-href="{{ download(file.id) }}" target="_blank" ><i
alt="download" class="fa fa-download fa-2x"></i></a>
The problem is the icon doesn't have the url (because is empty) an in my console I don't read "Parameters "+id, It seems that download method is not called. Anyone can help me?
This question already has answers here:
Detect when user accepts to download a file
(7 answers)
Closed 3 years ago.
I'm trying to build a download progress bar ( I download the canvas content as png image [converted from base64] ) and I have a little problem : Is there a way to track the download of a :
<a href="/images/myw3schoolsimage.jpg" download> ?
The available events for <a> , from : https://www.w3schools.com/tags/tag_a.asp
doesn't seem to help me.
I've tried to put the <a> tag inside a <div> tag and use the div's events like :
<div load="alert('test1');" progress="alert('test2');" >
<a href="/images/myw3schoolsimage.jpg" download>
<img src="/images/myw3schoolsimage.jpg" alt="W3Schools" width="104" height="142">
</a>
</div>
( https://en.wikipedia.org/wiki/DOM_events )
But didn't work.
So, to sum it up, what I'm trying to achieve by this is tracking the download after a click on a <a href="/images/myw3schoolsimage.jpg" download> so I can build a progress bar for the download
Any ideas?
Those attributes you have on your div element aren't doing anything; if you look at the wiki page again, you'll notice that each of those events has (none) listed under the Attribute column. The solution isn't as easy as you might have in mind. It's possible this explanation could help accomplish what you're looking for though: ajax file download : progress event, for download
I am trying to download the pdf using "download" attribute in an <a> tag:
<a className="sl_link" href={'./myfiles/abc.pdf'} target="_blank" download/>
But it is only opening in the next tab not downloading.
For reactjs, download att need value:
<a href={fileUrl} download={originalName}>your link</a>
fileUrl must be the same origin with the page
Download File
What I did on my react app using typescript is as shown below
<a href={require('url path')} download={'File name'} > Download </a>
Example
<a href={require('../assets/doc/resume.pdf')} download={'Resume_Pdf'} > Download </a>
import the file like normal in React
import myResume from "../../assets/myResume.pdf";
(you choose your own path this is just an example)
after that you just have to add the reference to you href="" and thats all.
<a href={myResume} download>
I have a button that I am trying to redirect to a different link on mobile than on desktop using angular. Right now the link looks like this:
<a ng-href="{{ scheduler_link }}">
Search area
</a>
I'm not sure how to use media queries to change the value of scheduler_link on a smaller screen. How can I do this?
As Far as I know you can't use media queries to change the actual value tied to that href. But what you could do is have two links and have one link visible at each media query.
<a class="linkOne" ng-href="{{ scheduler_link1 }}">
Search area
</a>
<a class="linkTwo" ng-href="{{ scheduler_link2 }}">
Search area
</a>
#media customMedia{
.linkOne{
visible: none; <---------cross-reference on me on this, my css is weak
}
.linkTwo{
visible: yes;
}
}
I am now trying to use javascripts in my project. I searched all this morning on the Internet, and found nothing really clear about Laravel and Javascript.
Can somebody please explain how exactly (or link me from a known real example), can we make javascripts working on a Laravel project ? Thanks
Here's what i tried :
template_mynet.blade.php
...
{{ HTML::script('assets/js/jquery-2.1.1.js') }}
{{ HTML::script('assets/js/bootstrap.min.js') }}
{{ HTML::script('assets/js/bootstrap.js') }}
{{ HTML::script('assets/js/accueil_hover.js') }}
...
accueil.blade.php
#extends('template_mynet')
#section('content')
<div class="container">
<a id="popoverData" class="btn" href="#" data-content="Popover with data-trigger" rel="popover" data-placement="bottom" data-original-title="Title" data-trigger="hover">Popover with data-trigger</a>
<a id="popoverOption" class="btn" href="#" data-content="Popup with option trigger" rel="popover" data-placement="bottom" data-original-title="Title">Popup with option trigger</a>
</div>
#stop
accueil_hover.js
$('#popoverData').popover();
$('#popoverOption').popover({ trigger: "hover" })
Where are my js files ?
/public/assets/js
What are my files ?
accueil_hover.js
bootstrap.js
bootstrap.min.js
jquery-2-1-1.js
npm.js
Links are here, but the hovering is not working !
This code is from the example linked here :
http://jsfiddle.net/9P64a/
You should put your javascript in a document ready function. You javascript code won't work because the document isn't fully loaded yet.
change the javascript code to the following:
$(document).ready(function(){
$('#popoverData').popover();
$('#popoverOption').popover({ trigger: "hover" });
});
If this is still not working, please provide the full html output of your site and any console errors.
I had a weird problem though. The title of the question is the exact same thing but I had document ready function. The culprit was something else and it fixed by commenting out
app.js
asset.