I have a duplicate list of posts on the same page. Hence, some posts appear on the same page more than once.
The like system updates through javascript the like count of a post in a span, with id "like-{{ $item->id }}", it is identified with the post id.
<span id="like-{{ $item->id }}">
#json($item->likers()->count())
</span>
When a post is liked, only one post card is updated, the others are not, despite having the same id.
How can I solve this annoyance?
function likePost(a) {
$.ajaxSetup({
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
}
});
$(this);
$.ajax({
url: APP_URL + "/save_like",
type: "POST",
dataType: "json",
data: {
item: a,
_token: $('meta[name="csrf-token"]').attr("content")
},
success: function(e) {
var t;
1 == e.bool ? ($("#like-icon-" + a).removeClass("text-muted").addClass("icon-filled text-danger"), t = $("#like-" + a).text(), $("#like-" + a).text(++t)) : 0 == e.bool && ($("#like-icon-" + a).removeClass("icon-filled text-danger").addClass("text-muted"), t = $("#like-" + a).text(), $("#like-" + a).text(--t))
},
error: function(e) {
location.replace(APP_URL + "/login")
}
})
};
<svg xmlns="http://www.w3.org/2000/svg" id="like-icon-{{ $item->id }}" class="icon #if(Auth::check()) #if(Auth::user()->hasLiked($item)) icon-filled text-danger #else text-muted #endif #else text-muted #endif" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg> <span id="like-{{ $item->id }}">#json($item->likers()->count())</span>
Changes applied:
<a href="#" class="btn btn-light border-0">
<svg xmlns="http://www.w3.org/2000/svg" id="like-icon-{{ $item->id }}" class="icon icon-filled text-danger" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
<span id="like-{{ $item->id }}">
#json($item->likers()->count())
</span>
</a>
And the java code you provided.
It shows no errors, but it doesn't work.
In order not to be fully explained in my intent, I leave some pictures on my problem.
I have a tab that fetches all the categories and posts within them, consequently some posts are duplicated, but by clicking like the first of the posts is updated (the like count) while in the other cards it is not.
Try this
change <span id="like-{{ $item->id }}"> to
<span class="likes" data-id="{{ $item->id }}">
Change the link code to this - Add the ID to the link and not to the SVG or span
<a href="#" id="like-{{ $item->id }}" class="like-link btn btn-light border-0">
<svg ... /></svg> <span>1 like</span>
</a>
$.ajaxSetup({
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
}
});
$("a[id^=like]").on("click", function() {
const $link = $(this);
const a = $link.attr("id").split("-")[1]; // make id="like-1234" into 1234
console.log(a)
/* Commented to test this snippet. uncomment in working code
$.ajax({
url: APP_URL + "/save_like",
type: "POST",
dataType: "json",
data: {
item: a,
_token: $('meta[name="csrf-token"]').attr("content")
},
success: function(e) {
const liked = e.bool == 1;
*/
const liked = 1; // test, remove when using ajax
$(".likes[data-id="+a+"]").each(function() {
$(this)
.toggleClass("text-muted", !liked)
.toggleClass("icon-filled text-danger", liked)
let t = +$(this).text();
t += liked ? 1 : -1
if (t<0) t=0; // remove if you support negative likes
$link.find("span").text(t);
$(this).html($link.html());
})
/* },
error: function(e) {
location.replace(APP_URL + "/login")
}
}) */
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="likes" data-id="1234">
1
</span><br/>
<span class="likes" data-id="1234">
1
</span>
<hr>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled text-danger" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg> <span>1</span>
Need more info.
How are you updating through JavaScript?
If you're using getElementById or so, the problem here is it only returns the first element that satisfies the query not all the elements with the same id on the page. Use a class, that way you can use querySelectorAll and loop through it and do the necessary updates.
HTML:
<span id="like-{{ $item->id }}" class="post-{{ $item->id }}">
#json($item->likers()->count())
</span>
JS:
const setLikes = postID => {
const postElems = document.querySelectorAll(`.post-${postID}`);
// loop through all the posts
for(let i = 0; i < postElems.length; i++){
// use the logic here to update the like counts as you want
}
}
Related
I have been trying to create a like button with calling an ajax function in Django, But somehow whenever i click on the like button it redirect me to different page with a json object that return {liked : true }. why am getting this issue! it's been a challenge for me to figure it out and does it having any thing to do with my javascripts or with my function in views.py how better can i do this to stop the effect! and make the page not to reload when users like! Here's my like function!
def like(request, pk, c_slug=None):
user = request.user
if request.POST.get("operation") == "like_submit" and is_ajax(request=request):
liked=get_object_or_404(Like,pk=pk)
product = Product.objects.get(pk=pk, slug=c_slug)
liked= False
like = Like.objects.filter(user_like=user, product=product)
if like:
like.delete()
else:
liked = True
Like.objects.create(user_like=user, product=product)
resp = {
'liked':liked,
}
response = json.dumps(resp)
return HttpResponse(response,content_type = "application/json")
model.py
class Like(models.Model):
user_like = models.ForeignKey(settings.AUTH_USER_MODEL, related_name='user_likes', on_delete=models.CASCADE)
product = models.ForeignKey(Product, related_name='user_likes', on_delete=models.CASCADE)
like_date = models.DateTimeField(auto_now=True)
This is my scriepts for ajax call
<script>
$(".like").click(function (e) {
var id = this.id;
var href = $('.like').find('a').attr('href');
e.preventDefault();
$.ajax({
url: href,
data:
{'liked': $(this).attr('name'),
'operation':'like_submit',
'csrfmiddlewaretoken': '{{ csrf_token }}'},
success: function(response){
if(response.liked){
$('#likebtn' + id).html("Unlike");
$('#likebtn' + id).css("color", "gray")
}
else{
$('#likebtn' + id).html("Like");
$('#likebtn' + id).css("color", "blue")
}
}
})
});
</script>
my HTML
{% if product in liked %}
<a href='{% url "shop:like" product.id product.slug %}' id="likebtn{{ product.id }}" class="flexitems-center space-x-2">
<div class="p-2 rounded-full text-black lg:bg-gray-10">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="blue" width="22"height="22" class="dark:text-gray-100">
<path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z" />
</svg>
</div>
<div >Unlike</div></a>
{% else %}
<a href='{% url "shop:like" product.id product.slug %}' id="likebtn{{ product.id }}" class="flex items-center space-x-2">
<div class="p-2 rounded-full text-black lg:bg-gray-10">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="22" height="22" class="dark:text-gray-100">
<path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z" />
</svg>
</div>
<div >Like</div>
</a>
{% endif %}
It doesn't look like you actually have a like button, instead you have links to your like url - so obviously clicking those links is going to take you to those urls. It also doesn't look like any of your elements have the like class, so your JQuery AJAX code doesn't get triggered by anything.
I would suggest using an actual <button> HTML element - if you attached a like class to it then it should work as intended.
There is a dropdown menu like this.
function changeRange(range) {
var options = {
data.......
};
var options1 = {
data.......
};
var options2 = {
data.......
};
if (range === 'last30') {
var chart = new ApexCharts(
document.querySelector("#revenue"),
options
);
} else if (range === 'month') {
var chart = new ApexCharts(
document.querySelector("#revenue"),
options1
);
} else if (range === 'partner30') {
var chart = new ApexCharts(
document.querySelector("#revenue"),
options2
);
} else if (range === 'partnermonth') {
var chart = new ApexCharts(
document.querySelector("#revenue"),
options3
);
}
chart.render();
}
<div class="widget widget-chart-one">
<div class="widget-heading">
<h5 class="">Total Coins</h5>
<div class="task-action">
<div class="dropdown">
<a class="dropdown-toggle" href="#" role="button" id="pendingTask" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal">
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="pendingTask" style="will-change: transform;">
<button class="dropdown-item" onclick="changeRange('last30')" value="last30">Mobile 30 Day</button>
<button class="dropdown-item" onclick="changeRange('month')" value="month">Mobile Monthly</button>
<button class="dropdown-item" onclick="changeRange('partner30')" value="partner30">Partner 30 Day</button>
<button class="dropdown-item" onclick="changeRange('partnermonth')" value="partnermonth">Partner Monthly</button>
</div>
</div>
</div>
</div>
<div class="widget-content">
<div id="revenue"></div>
</div>
</div>
My question is: When I choose an option from the Dropdown menu, it does not load on the first click. For example, I have the "Mobile 30 days" graphic on my page, and I want to switch to the "Mobile Monthly" option. When I click on the "Mobile Monthly" option, the page refreshes, but the graphic does not change. When I click the same again, the graphic I want opens this time. I even explain the photo I put below. It tries and fails to open a chart below the previous chart on the first click, updates the chart on the second click. I think conditional statements cause the problem. What do you think?
At the first click, it tries to open the graphic I want here. Then, for 1 or 2 seconds, it comes and goes. On the second click, it now replaces the top graphic with what I want.
Also, I get the following error: Cannot read properties of undefined (reading 'filter')
You creatin new chart every time function executes, instead try updating it. You can do it without referencing the instance of the chart with exec. https://apexcharts.com/docs/methods/#exec
ApexCharts.exec('mychart', 'updateOptions', options);
But first you need to add id to your options
chart:{
id: 'mychart',
...
}
I have a website that works with the Bootstrap 5 theme and I want to show a Bootstrap Toasts message when the visitor is offline.
Currently the #BTNofflineToast button triggers #offlineToast
I want to remove the button and trigger the display of Toasts #offlineToast automatically when the visitor is offline.
How to do the JS code ?
(function() {
window.addEventListener('offline', () => {
// show toast
});
window.addEventListener('online', () => {
// hide toast
});
});
index.html
<!doctype html>
<html lang="fr" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/bootstrap.min.css" rel="stylesheet">
</head>
<body class="d-flex flex-column bg-dark text-white text-center">
<button type="button" class="btn btn-primary m-4" id="BTNupdateToast">Show update toast</button>
<button type="button" class="btn btn-primary m-4" id="BTNofflineToast">Show offline toast</button>
<div class="toast-container position-fixed bottom-0 start-50 translate-middle-x mb-3">
<div id="updateToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-arrow-repeat text-success" viewBox="0 0 16 16">
<path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>
<path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>
</svg>
<strong class="me-auto">Mise à jour disponible</strong>
</div>
<div class="toast-body text-start text-dark">
Cliquez ICI pour mettre à jour.
</div>
</div>
<div id="offlineToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-wifi-off text-danger" viewBox="0 0 16 16">
<path d="M10.706 3.294A12.545 12.545 0 0 0 8 3C5.259 3 2.723 3.882.663 5.379a.485.485 0 0 0-.048.736.518.518 0 0 0 .668.05A11.448 11.448 0 0 1 8 4c.63 0 1.249.05 1.852.148l.854-.854zM8 6c-1.905 0-3.68.56-5.166 1.526a.48.48 0 0 0-.063.745.525.525 0 0 0 .652.065 8.448 8.448 0 0 1 3.51-1.27L8 6zm2.596 1.404.785-.785c.63.24 1.227.545 1.785.907a.482.482 0 0 1 .063.745.525.525 0 0 1-.652.065 8.462 8.462 0 0 0-1.98-.932zM8 10l.933-.933a6.455 6.455 0 0 1 2.013.637c.285.145.326.524.1.75l-.015.015a.532.532 0 0 1-.611.09A5.478 5.478 0 0 0 8 10zm4.905-4.905.747-.747c.59.3 1.153.645 1.685 1.03a.485.485 0 0 1 .047.737.518.518 0 0 1-.668.05 11.493 11.493 0 0 0-1.811-1.07zM9.02 11.78c.238.14.236.464.04.66l-.707.706a.5.5 0 0 1-.707 0l-.707-.707c-.195-.195-.197-.518.04-.66A1.99 1.99 0 0 1 8 11.5c.374 0 .723.102 1.021.28zm4.355-9.905a.53.53 0 0 1 .75.75l-10.75 10.75a.53.53 0 0 1-.75-.75l10.75-10.75z"/>
</svg>
<strong class="me-auto">Vous êtes hors-ligne</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body text-start text-dark">
Les informations de cette page peuvent être obsolètes.
</div>
</div>
</div>
<script src="/bootstrap.bundle.min.js"></script>
<script>
document.getElementById("BTNupdateToast").onclick = function() {
var toastElList = [].slice.call(document.querySelectorAll('#updateToast'))
var toastList = toastElList.map(function(toastEl) {
return new bootstrap.Toast(toastEl)
});
toastList.forEach(toast => toast.show());
};
document.getElementById("BTNofflineToast").onclick = function() {
var toastElList = [].slice.call(document.querySelectorAll('#offlineToast'))
var toastList = toastElList.map(function(toastEl) {
return new bootstrap.Toast(toastEl)
});
toastList.forEach(toast => toast.show());
};
</script>
</body>
</html>
To test properly, run the code snippet first, then disconnect your internet connection and review the snippet.
The message disappears automatically when reconnected.
var connectionLostToast = new bootstrap.Toast(document.querySelector('#connectionLost'), {
autohide: false
});
window.addEventListener('offline', function() {
connectionLostToast.show();
});
window.addEventListener('online', function() {
connectionLostToast.hide();
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
<div class="toasts">
<div id="connectionLost" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Connection Lost</strong>
<small>Now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Your internet connection lost!
</div>
</div>
</div>
i wanted to select a particular option while construction of dropdown.
Question: i want to select grapes while construction of dropdown. not after construction.
Note: i want to construct it at once(while appending). don't want to select after construction.
$(function(){
var listOptions = ['apple','banana','grapes']
var optionsStr = '';
for(var i = 0; i < listOptions.length; i++){
var selectedClass = '',ariaValue = '', value = '';
value = listOptions[i];
if(value == 'grapes') selectedClass = 'mdc-list-item--selected',ariaValue = 'aria-selected="true"';
optionsStr += `<li class="mdc-list-item ${selectedClass}" ${ariaValue} data-value="" role="option">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">
${listOptions[i]}
</span>
</li>`
}
$('#foods_items').html(optionsStr);
mdc.select.MDCSelect.attachTo(document.querySelector('.mdc-select'));
});
<head>
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mdc-select mdc-select--filled demo-width-class">
<div class="mdc-select__anchor"
role="button"
aria-haspopup="listbox"
aria-expanded="false"
aria-labelledby="demo-label demo-selected-text">
<span class="mdc-select__ripple"></span>
<span id="demo-label" class="mdc-floating-label">Pick a Food Group</span>
<span class="mdc-select__selected-text-container">
<span id="demo-selected-text" class="mdc-select__selected-text">sss</span>
</span>
<span class="mdc-select__dropdown-icon">
<svg
class="mdc-select__dropdown-icon-graphic"
viewBox="7 10 10 5" focusable="false">
<polygon
class="mdc-select__dropdown-icon-inactive"
stroke="none"
fill-rule="evenodd"
points="7 10 12 15 17 10">
</polygon>
<polygon
class="mdc-select__dropdown-icon-active"
stroke="none"
fill-rule="evenodd"
points="7 15 12 10 17 15">
</polygon>
</svg>
</span>
<span class="mdc-line-ripple"></span>
</div>
<div class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth">
<ul class="mdc-list" role="listbox" aria-label="Food picker listbox" id="foods_items">
</ul>
</div>
</div>
Please help me thanks in advance!!
I'm using datatable button and I need a way to upload a file using those buttons
This Javascript
buttons: [
{
text: '<label for="fileUpload" class="btn btn-secondary-outline"><span class="fa fa-upload"></span> Import</label><input type="file" name="fileUpload" id="fileUpload" class="hide"/>',
className: 'import-btn',
action: function () {
}
}
]
$('.import-btn').removeClass();
Generates
.hide {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<button class="" tabindex="0" aria-controls="dataTable"><span><label for="fileUpload" class="btn btn-secondary-outline"><svg class="svg-inline--fa fa-upload fa-w-16" aria-hidden="true" data-prefix="fa" data-icon="upload" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"></path></svg><!-- <span class="fa fa-upload"></span> --> Import</label><input type="file" name="fileUpload" id="fileUpload" class="hide"></span></button>
I can upload but If I generate the code with the lines above nothing opens...
Also is there a way to change <button class="" tabindex="0" aria-controls="dataTable"> to <span class="" tabindex="0" aria-controls="dataTable">
Spans are inline elements, and they're hard to click. If you add
display: inline-block
(or even block), you should be fine. Here's a working snippet.
.hide {
display: none;
}
.spanButton {display: inline-block;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<span class="spanButton" tabindex="0" aria-controls="dataTable"><span><label for="fileUpload" class="btn btn-secondary-outline"><svg class="svg-inline--fa fa-upload fa-w-16" aria-hidden="true" data-prefix="fa" data-icon="upload" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"></path></svg><!-- <span class="fa fa-upload"></span> --> Import</label><input type="file" name="fileUpload" id="fileUpload" class="hide"></span></span>