Bootstrap3 file input - javascript

I am using the following bootstrap 3 html
<form action="#" role="form">
<div class="form-group">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 200px; height: 60px;">
<img id="logothumb" src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" alt="" /> </div>
<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 60px;"> </div>
<div>
<span class="btn default btn-file">
<span class="fileinput-new"> Select image </span>
<span class="fileinput-exists"> Change </span>
<input type="file" name="..." id="logo"
> </span>
Remove
</div>
</div>
</div>
<div class="margin-top-10">
Upload
Cancel
</div>
</form>
I have some javascript code to upload the file and also show an existing file from database when the code is first loaded.
var fileUploadControl = $("#logo")[0];
if (fileUploadControl.files.length > 0) {
var file = fileUploadControl.files[0];
The problem is, the file upload control shows 'Select Image' even when there is
a file present i.e. shown from database in the img src. It should show the 'Change' - 'Remove' options. How do i get it to do that. It does this when a file is selected for the very first time however.
Thanks

If I understand you correctly, you will have an image present when your page is loaded. However, you only want "Change" and "Remove" visible, with "Select Image" hidden. To do this, you can simply hide your span containing "Select Image" when the page loads.
$('span.fileinput-new').hide();
Now you have your active page. If the default image is removed, I assume you want to then hide "Change" and "Remove" and then display "Select Image" again. In this case, you can set an event on your file input and toggle these based on if a file is currently uploaded or not.
$('#logo').on('change', function() {
// If a file is uploaded - hide "Select Image" and show "Change - Remove"
if($(this).val().length) {
$('span.fileinput-new').hide();
$('span.fileinput-exists, a.fileinput-exists').show();
// If a file is not uploaded - show "Select Image" and hide "Change - Remove"
} else {
$('span.fileinput-new').show();
$('span.fileinput-exists, a.fileinput-exists').hide();
}
});
EDIT - I played with this a while and have put together a JSFiddle that I think will help you out.
Check it out here

Related

pouplate another page using javascript

i have a home page whereby i have an image serving a profile picture and in my view for a shop i want to be able to click the unlock button and the image should replace the current image with the new one using javascript,here is what i have done so far;
home view
<div class="row">
<div class="col-md-6 mb-5 "style="border:4px solid black; padding-right: 100px;">
<img class ="img-fluid" src="<?php echo base_url().'assets/images/'.$img; ?>" width="250" height="auto">
shop view
<form id="1">
</div>
<div>
<div class="col-4 col-sm-6 wow fadeInUp" data-wow-delay="0.4s">
<div class="service-thumb bg-grey">
<i class="fa fa-camera"></i>
<figure> <img class ="img-circle" src="<?=base_url();?>/assets/images/hero1.png" width="250" height="150"><figcaption><h4><font color="black">This fearless warrior relies on his bulging muscles to wreck havoc on yor enemies, can be unlocked by achieving 5000 points</font></h4></figcaption></figure><input class="btn btn-success" type="submit" onclick="signupimg('hero1p.png');" id="btn1" value="unlock">
</div>
</div><br><p>
</form>
<script type="text/javascript">
function signupimg(y){
document.getElementById("signupimage").value = y;
document.getElementById("signupimage2").value = y;
}
</script>
controller
public function shop()
{
$this->load->library('session');
$user_id = $this->session->userdata('user_id');
$this->load->view('shop');
}
To change the profile image, you need to add functionality to click event on the other image, then you'd want to check if the user has accumulated 5000 points or not(either through session or DB), if yes then change the src of the profile pic.
I've created a working snippet, comments are mentioned wherever deemed necessary. See if it helps you.
document.querySelector('#unlock_pic').addEventListener('click', (event) => { // add click event to other pic
// console.log(event.target.src)
// before changing the image, check the condition, if the user has 5000 points, if yes, save it in database, then do this ↓↓
document.querySelector('#profile_pic').src = event.target.src; // change the profile pic src
});
img {
height: 150px;
width: 150px;
}
<img src="https://www.mightyplace.com/Images/Common/profile.jpg" id="profile_pic"/><!-- Your profile pic -->
<img src="https://pbs.twimg.com/profile_images/770394499/female_400x400.png" id="unlock_pic"/><!-- Your other pic-->

ngf-pattern always failing validation

I'm using ngFileUpload to upload images to a server upon form submit.
I can upload an image and it appears on the screen without a problem. However, as soon as I hit submit, I get a pattern error. When I subsequently remove the image from the input, I can submit the form, and the image actually gets submitted, since it hasn't been deleted in the controller.
Here is my HTML:
<div class="col-xs-12 col-sm-4 img-responsive">
<h4>Product Featured Image:</h4>
<div ngf-drop ngf-select ng-model="vm.product.featured_image" class="drop-box"
name="featured_image" ngf-drag-over-class="'dragover'"
accept="image/*" ngf-pattern="'image/*'" ngf-max-size="2MB"
ngf-change="vm.upload($files, $invalidFiles)">
<span>Drop</span>
<div class="col-xs-12" ng-show="vm.product.featured_image">
<img ngf-src="vm.product.featured_image" class="img-responsive">
</div>
</div>
<div class="text-center text-red" ng-show="editForm.featured_image.$error.maxSize">
Max file size is 2MB. File size: {{errorFile.size / 1000000|number:1}}MB
</div>
And my controller method:
upload($files, $invalidFiles) {
if ($files.length > 0) {
let fileR = new FileReader();
fileR.onloadend = ((e) => {
this.product.featured_image = e.target.result;
});
fileR.readAsDataURL($files[0]);
}
}

In Javascript, how do I trigger a local file load via an html element?

I have an app where I can load a local file via clicking on a label:
<div class="igv-drag-drop-surface">
<div class="igv-drag-drop-file-icon-container" style="">
<i id="igv-drag-drop-file-icon" class="fa fa-file fa-5x" aria-hidden="true"></i>
<i id="igv-drag-drop-index-file-icon" class="fa fa-file-o fa-5x" aria-hidden="true"></i>
</div>
<div class="igv-track-file-input-container-css">
<input id="igv-track-index-file-input" class="igv-track-file-input-css" type="file" name="files[]" data-multiple-caption="{count} files selected" multiple="" style="">
<label for="igv-track-index-file-input" id="load-local-file-blurb" style="">
<strong>Choose index file</strong>
<span class="igv-drag-drop-surface-blurb"> or drop it here</span>
</label>
</div>
</div>
So, clicking on the label with id with load-local-file-blurb will present the file chooser. That works fine.
I want in addition to be able to click on the icon with id igv-drag-drop-index-file-icon to present the file chooser as well.
Here is a visual aid to what the widget looks like:
How do I do this?
Just trigger a click on the label.
For example:
var icon = '#igv-drag-drop-index-file-icon';
var label = '#load-local-file-blurb';
document.querySelector(icon).addEventListener('click', function() {
document.querySelector(label).click()
});
But the better approach is to perform click onto file input field.

permanently enable a button and change its image src with jQuery and LocalStorage

I have a disabled button that I want to enable by clicking another button and keep it permanently enabled. That button has an image and at the same time as the button gets enabled the image src should change. This is my code:
<!--This is the button that enables the img_tema2 button-->
<a id="a_tema1" href="principal.html" class="btn btn-success">Enviar</a>
<!--This is the img_tema2 button-->
<div class="col-lg-4">
<button class="tsbutton" onclick="window.location='tema_2.html';" id="img_tema2">
Tema 2
<img id="gif_tema2" class="img-circle2" src="../assets/img/segundo_tema_gris.gif" alt="Generic placeholder image" width="140" height="140">
</button>
</div>
$("#img_tema2").prop("disabled", true);
$(function () {
var showLittleHeader = localStorage.getItem('#img_tema2');
if (showLittleHeader) {
$("#img_tema2").prop("disabled", false);
}
$('#a_tema1').on('click', function () {
localStorage.setItem('#img_tema2', 1);
$("#img_tema2").prop("disabled", false);
});
});
Sorry, I totally forgot to explain a lot of things.
The a_tema1 its on a different HTML.
When I open my html the button img_tema2 is not disabled, and as I said up, I need it to be first disabled and when I click the a_tema1, it gets enabled.
Adding the line $("#img_tema2 img").attr("src", ''); that was recommended, it doesn´t do anything neither.
What could I be doing wrong?
Sorry for my bad english an thanks for all the help you can give me
Not sure exactly what you are trying to do, but this is my interpretation:
https://jsfiddle.net/tzf8c50k/
HTML:
<!--This is the button that enables the img_tema2 button-->
<div id="a_tema1" class="btn btn-success">Enviar</div>
<br/><br/>
<!--This is the img_tema2 button-->
<div class="col-lg-4">
<button class="btn" onclick="window.location='tema_2.html';" id="img_tema2">
Tema 2
<img id="gif_tema2" class="img-circle2" src="https://i.imgur.com/fBE8b1k.png" alt="Generic placeholder image" width="140" height="140">
</button>
</div>
<br/><br/><br/><br/>
<p>Icons made by Freepik from www.flaticon.com is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0"
target="_blank">CC 3.0 BY</a></p>
JS:
$("#img_tema2").attr("disabled", "disabled");
$(function() {
var showLittleHeader = localStorage.getItem('#img_tema2');
if (showLittleHeader) {
$("#img_tema2").removeAttr("disabled");
$("#gif_tema2").attr("src", "http://i.imgur.com/fNerL36.png");
}
$('#a_tema1').on('click', function() {
localStorage.setItem("#img_tema2", 1);
$("#gif_tema2").attr("src", "http://i.imgur.com/fNerL36.png");
$("#img_tema2").removeAttr("disabled");
});
});

replace image src using ajax and jquery

In my app, i have a web page with lots of images whose source url is generated dynamically by making get request to the rails server, initially a default image is assigned to the source. After loading the page i make request to the server that return a json with new image URl, and then need to update the src of that image. Following is the code i am using in html.erb
<div class="inner">
<div class="span9 blog-head alert alert-info"><h3><%=#feeds.title%></h3></div>
<%#feeds.entries.each do|feed|%>
<div class="thumbnail feeds span6">
<div class="row title lead">
<span class="span6"><%=link_to feed.title,feed.url,target: "_blank"%></span>
</div>
<div class="row content">
<input type="hidden" class="image-feed-url" value="<%=feed.entry_id%>">
<!-- need to update src of following img tag -->
<img class="span2 desc-img thumbnail" src="/assets/default.jpg" alt="RSS">
<span class="span3"><%=feed.summary%></span>
</div>
<div class="row footer">
<%if feed.published%>
<span class="span3">Published on: <small><%=feed.published.to_date.strftime("%b, %-d, %Y")%></span></small>
<%end%>
<span class="span2 source">Source: <small><%=link_to 'Click here',#feeds.url, target: "_blank"%></span></small>
</div>
</div>
<%end%>
</div>
Need to update src in "img" tag having class "desc-img". In my JS file
$(document).ready(function(){
all_feeds = $('.inner .feeds')
for(i=0;i<all_feeds.length;i++)
{
element = all_feeds[i]
feed_url = $(element).find('.image-feed-url').val()
$.getJSON("/get_image_url?feed_url="+feed_url,function(data){
// data['link] is the actual image link returned by server
$(element).find('.desc-img').attr('src',data['link']);
});
}
});
I had also tried using div with background image instead of img tag and updating background image of div in JS but nothing works. I am new to Jquery and Ajax, any help will be appreciated.
try this :
$.getJSON("/get_image_url?feed_url="+feed_url,function(data){
$(element).find('.desc-img').removeAttr('src');
$(element).find('.desc-img').attr('src', '../' + data['link'] + '?' + Math.random());
});
Hope this helps.

Categories