We Keep Coding

How to assign a file input to another file input?

Strange question, I know. The main issue here is I am using a cool tool called cropit. In this, we upload one image, get a preview, and the process it however we want.
HTML:
<div align="center" id="image-cropper1">
<!-- This is where user selects new image -->
<label class="btn btn-success btn-file">Upload Photo<input type="file" class="cropit-image-input"/></label><br><br>
<!-- This is where the preview image is displayed -->
<label><div class="cropit-preview"><img class="prepic" src="preloadimage.jpg"></label>
<!-- Here I process the image -->
<button type="button" id="image1pick" class="btn btn-primary" data-dismiss="modal" disabled>OK</button></div>
JQuery:
$('#image-cropper1').cropit();
$('#image-cropper1').change(function() {
$('#image1pick').prop('disabled', false);
});
$('#image1pick').click(function() {
imageData1 = $('#image-cropper1').cropit('export', {originalSize: true});
$.post('somephp.php', { imageData1: imageData1 }, function() { $('#image1pick').data('clicked', true) })
});
Now, what I want to achieve is to add another <input type="file"/> button that uploads 6 images at once and get them on 6 different ".cropit-preview" divs. It's essential, since the user can zoom and rotate the image in the preview. Is there a way to get multiple files and add them in every preview div in this given tool structure?
EDIT:
Please look at the doc: http://scottcheng.github.io/cropit/
The problem is the structure. Let's say I have three different croppers. The structure would look like this:
JQuery:
$('#image-cropper1').cropit();
$('#image-cropper2').cropit();
$('#image-cropper3').cropit();
HTML:
<!-- Cropper No 1 -->
<div id="image-cropper1">
<input type="file" class="cropit-image-input" />
<div class="cropit-preview"></div>
</div>
<!-- Cropper No 2 -->
<div id="image-cropper2">
<input type="file" class="cropit-image-input" />
<div class="cropit-preview"></div>
</div>
<!-- Cropper No 3 -->
<div id="image-cropper3">
<input type="file" class="cropit-image-input" />
<div class="cropit-preview"></div>
</div>
As you see here each file input and preview div is inside the numbered div and i coupled. But now I want to have an input, which upload three images at the same time and fits to every image-preview in every numbered div. How can I achieve this?

To copy the file selection from one input to another, you can do something like:
var file1 = document.querySelector('#image-cropper1>input[type=file]');
var file2 = document.querySelector('#image-cropper2>input[type=file]');
file2.files = file1.files;
For <input type="file"> elements, the files attribute points to a FileList object, described here.

Try this:
$("#destinationFileInput").prop("files",$("#sourceFileInput").prop("files"));

I would do something like this:
//external.js
var doc, C;
$(function(){
doc = document;
C = function(tag){
return doc.createElement(tag);
}
$('#upload').change(function(ev){
var out = $('#output'), fs = this.files, fl = fs.length;
if(fl > 6){
console.log('Too many files');
}
else{
var dv = C('div');
$.each(fs, function(i, v){
var fr = new FileReader, ig = C('img'), cv = C('canvas'), z = cv.getContext('2d');
fr.onload = function(ev){
ig.onload = function(){
cv.width = this.width; cv.height = this.height; z = cv.getContext('2d'); z.drawImage(this, 0, 0); dv.append(cv);
}
ig.src = ev.target.result;
}
fr.readAsDataURL(v);
});
out.append(dv);
}
});
$('#send').click(function(){
var fd = new FormData;
$('canvas').each(function(i, e){
e.toBlob(function(b){
var bf = new FileReader;
bf.onloadend = function(){
fd.append('image_'+i, bf.result); fd.append('count', i+1);
}
bf.readAsArrayBuffer(b);
});
});
/*
$.post('yourPage.php', fd, function(response){
response comes back here
test on PHP on a separate PHP page yourPage.php
<?php
if(isset($_POST['image_0'], $_POST['count'])){
for($i=0,$c=$_POST['count']; $i<$c; $i++){
$ig = 'image_'.$i;
if(isset($_POST[$ig])){
file_put_contents("resricted/$ig.png", $_POST[$ig]);
}
}
}
?>
});
*/
});
});
/* external.css */
html,body{
margin:0; padding:0;
}
.main{
width:980px; margin:0 auto;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<link type='text/css' rel='stylesheet' href='external.css' />
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<script type='text/javascript' src='external.js'></script>
</head>
<body>
<div class='main'>
<form>
<input type='file' multiple='multiple' id='upload' />
<input type='button' id='send' value='Send to Server' />
</form>
<div id='output'></div>
</div>
</body>
</html>

Just assign source input tag file to the other one like below:
If I have two input tags: source and target.
<input id="source" type="file" name="file" accept=".jpg,.jpeg,.png" multiple="multiple" aspect="1" >
<input id="target" type="file" name="file" accept=".jpg,.jpeg,.png" multiple="multiple" aspect="1" >
let source = document.getElementById("source");
let target = document.getElementById("target");
source.files = target.files;
Thanks for Ourobonus's hint.
If you only want to show image's thunmbnail, you can reference
https://developer.mozilla.org/en-US/docs/web/api/file_api/using_files_from_web_applications.

how to set a textbox text dynamically in fabric js Itext

i create a canvas, i add a fabric Itext, i want to fill text of textbox in Itext.
my html code is...
<input type="text" id="title" placeholder="Your Title" /><br>
<canvas id="c"></canvas>
and javascript...
function Addtext() {
var text = new fabric.IText('Enter text here...', {fontSize:16,left:20,top:20,radius:10});
borderRadius = "25px";
canvas.add(text).setActiveObject(text);
text.hasRotatingPoint = true;
}
document.getElementById('title').addEventListener('keyup', function () {
var stringTitle = document.getElementById('title').value;
});
please help...thanks in advance.

Your question is very vague. this seems to be something close to what you are asking for. As you type in the textbox the iText updates. Although you can just click in to the iText on the canvas and type right in to so I'm not sure if you really need the html input at all.
window.canvas = new fabric.Canvas('c');
var textOptions = {
fontSize:16,
left:20,
top:20,
radius:10,
borderRadius: '25px',
hasRotatingPoint: true
};
var textObject = new fabric.IText('Enter text here...', textOptions);
canvas.add(textObject).setActiveObject(textObject);
canvas.renderAll()
document.getElementById('title').addEventListener('keyup', function () {
textObject.text = document.getElementById('title').value;
canvas.renderAll();
});
canvas { border: 1px solid; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js" ></script>
<input type="text" id="title" placeholder="Your Title" /><br>
<canvas id="c"></canvas>

Creating first jQuery slideshow plugin, converting from Javascript

I was asking about a jQuery plugin with image, title and description jQuery slide show. But can't find such. So tried to build a very small and easy [ugly] slide-show using only javascript. But there are some drawbacks, as in my script I have to hard code images, titles and descriptions. So I want to create a jQuery plugin from scratch which does only the same job as the script does, and also builds the slide-show on runtime. So this will also be a tutorial on creating a basic slide-show plug-in.
The code I used for the easy, ugly slide-show controller
<html>
<style type="text/css">
td {
border:1px solid #ccc;
width: 420px;
max-width:420px;
text-overflow:ellipsis;
}
span {
word-wrap: break-word;
width: 420px;
max-width:420px;
overflow-y:auto; overflow-x:hidden;
border:1px solid red;
}
</style>
<body>
<table>
<tr><td><img id="img" name="img" src="" title="Image" /></td> </tr>
<tr><td><span id="title">title</span></td></tr>
<tr><td><span id="desc">description</span></td></tr>
<tr><td><input type="button" value="<" onclick="back()" />
<input type="button" value=">" onclick="next()" />
<input type="text" id="idx" value="1" size="2" /> </td></tr>
</table></body>
<script>
var titles = ["zero", "one", "two", "three", "four"];
var descs = ["0 zer0", "1 one ", "2 two ", "3 three", "4 four"];
var img = document.getElementById('img');
var ttl = document.getElementById('title');
var dsc = document.getElementById('desc');
var idx = document.getElementById('idx');
var limit = titles.length-1;
function back()
{
if (parseInt(idx.value) > 1)
idx.value = parseInt(idx.value) - 1;
img.src = 'images/image' + idx.value + '.jpg';
ttl.innerHTML = titles[idx.value];
dsc.innerHTML = descs[idx.value];
}
function next()
{
if (parseInt(idx.value) < limit)
idx.value = parseInt(idx.value) + 1;
img.src = 'images/image' + idx.value + '.jpg';
ttl.innerHTML = titles[idx.value];
dsc.innerHTML = descs[idx.value];
}
</script>
</html>
I want it to be used as
<div id="main">
<img src="...." title="Title of image 1" data-desc="description of #1 image" />
<img src="...." title="Title of image 2" data-desc="description of #2 image" />
</div>

You can use nivo slider .
You just have to mention description of an image in alt attribute and title of an image in title attribute.
And just attach the plugin to your wrapper element:
$(window).load(function() {
$('#main').nivoSlider();
});
Edit1:
A simple way to create such plugin
jQuery.fn.imgSlider = function( options ) {
// default settings:
var defaults = {
textColor: "#000",
backgroundColor: "#fff",
fontSize: "16px",
getTextFromTitle: true,
getTextFromAlt: false,
animateOpacity: true,
animationDuration: 500,
clickImgToGoToNext: true,
clickImgToGoToLast: false,
nextButtonText: "next",
previousButtonText: "previous",
nextButtonTextColor: "red",
previousButtonTextColor: "red"
};
var settings = $.extend( {}, defaults, options );
return this.each(function() {
// Plugin code would go here...
});
};
call the plugin
$( "div" ). imgSlider();
Edit 2
I have created a jQuery Image Slider Plugin.
here is the example with annotated code.

image preview in fancybox and responsive filemanager not work (Empty string passed to getElementById().)

I work with responsivefilemanager and fancybox for upload and add images_url and image preview gallery.when i click image in filemanager fancybox close and add preview to image box(NO IMAGE) BUT in fancybox 2.1.5 when i click in image fancybox not closed and not show image preview. my code work with fancybox 1.3.4 but with last version 2.1.5 not worked.
JS:
$(document).ready(function() {
$(function() {
$('.thumbcheck').tooltip();
$('#btn-sub').click(function() {
$('#name').removeClass('has-error');
$('#err_name').hide();
name= $('#gallery_name').val();
if(name.length==0){
$('#name').addClass("has-error");
$('#err_name').show();
}
else
$("#form-gallery").submit();
});
$('#append').on('click', '.btn-remove', function() {
var parent = $(this).closest('.form-group');
var input = parent.find('.width100').next('input').val();
if($('input[name=cover]').val()==input ){
$('input[name=cover]').val('');
}
parent.remove();
});
$("#checkall").on('ifChecked', function(event) {
//Check all checkboxes
$("input[type='checkbox']", ".table-striped").iCheck("check");
$('#action-box').show();
});
$("#checkall").on('ifUnchecked', function(event) {
//Check all checkboxes
$("input[type='checkbox']", ".table-striped").iCheck("uncheck");
$('#action-box').hide();
});
$(".checkbox").on('ifChecked', function(event) {
$('#action-box').show();
});
$(".checkbox").on('ifUnchecked', function(event) {
var length = $(".table-striped input[type='checkbox']:checked").length;
if ($(".table-striped input[type='checkbox']:checked").length === 0) {
$('#action-box').hide();
$("#selectAll").iCheck("uncheck");
}
});
$('.img-thumb').next().change(function() {
$('.img-thumb').attr('src', $('.img-thumb').next().val())
});
$('#btnAdd').click(function() {
var form_group = $('#form-group').html();
var new_id = rand();
var baseurl = $('#baseurl').html();
$('#upload').clone().attr('id', new_id);
$('#upload-img').clone().attr('id', 'img-' + new_id);
$('.thumbcheck').clone().attr('data-id',new_id);
$('#append').append(form_group);
$('#upload').attr('id', new_id);
$('#upload-img').attr('id', 'img-' + new_id);
$('.thumbcheck').eq(-2).attr('data-id',new_id);
$('#' + new_id).next('a').next('a').attr('href', baseurl + new_id);
$('#' + new_id).next('a').next('a').fancybox({
'width': '75%',
'height': '90%',
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'iframe',
onClosed: function() {
var imgurl = $('#'+new_id).val();
var check = $('#append').find('.thumbcheck[data-id='+new_id+']').find('i');
console.log($('#append').find('.thumbcheck[data-id='+new_id+']'));
console.log(check);
console.log(check.attr('class'));
if(check.attr('class')=='fa icon-circle-blank'){
console.log('sd');
$('#thumb').val(imgurl);
}
if (imgurl.length > 0) {
$('#img-' + new_id).attr('src', ''+imgurl);
}
}
});
$('.thumbcheck').tooltip();
});
$(document).on('click','.thumbcheck',function(){
var value = $('#'+$(this).data('id')).val();
if($(this).find('i').attr('class')=='fa icon-circle'){
$(document).find('.thumbcheck i').attr('class','fa icon-circle');
$(this).find('i').attr('class','fa icon-circle-blank');
$('input[name=cover]').val(value);
}
else {
return false;
}
});
$('.boxGetFile').fancybox({
'width': '75%',
'height': '90%',
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'iframe',
onClosed: function(link, index) {
var id = $(link).data('id');
var imgurl = $('#'+id).val();
var check = $(document).find('.thumbcheck[data-id='+id+']').find('i');
if(check.attr('class')=='fa fa-circle'){
$('input[name=cover]').val(imgurl);
}
if (imgurl.length > 0) {
$('#img-' + id).attr('src', ''+imgurl);
}
}
});
});
function rand() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < 8; i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
});
HTML:
<div class="form-group">
<label class="col-sm-3 control-label"></label>
<div class="col-sm-9">
<a class='btn btn-primary btn-xs' id='btnAdd'>Add Image</a>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
</div>
</div>
</div>
</div>
</div>
<div id='baseurl' style="display:none">http://madenade.besaba.com/file/filemanager/dialog.php?type=2&field_id=<</div>
<div style="display: none;" id='form-group'>
<div class="form-group custom-cols">
<div class="col-sm-12 control-label">
<div class="col-sm-2">
<div class="input-append">
<div class='col-sm-10 no-pad'><img src="data:image/png;base64,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" id='upload-img' class="width100" />
<input name="image_url[]" id="upload" type="text" value="" style='display: none'>
<a class="width24 thumbcheck" data-toggle="tooltip" data-placement="bottom" title="Gallery Cover" data-id=""><i class="fa fa-circle-o"></i></a>
<a class="col-sm-8 no-pad boxGetFile"><h6>select image</h6></a>
</div>
</div>
</div>
<div class="col-sm-7 padding-left-8">
<input type="text" name='image_title[]' class="form-control" placeholder='Image title' />
<input type="text" name='image_alt[]' class="form-control" placeholder='Image alt' />
</div>
<div class="col-sm-1">
</div>
How do can i fix my problem ?
Worked Demo with fancybox 1.3.4 HERE
NOTWorked Demo with fancybox 2.1.5 HERE
NOTE: in demo please click in add image
In each click image I see this error in firebug console:

I think the elements provided in the question are not enough to provide an accurate answer but for the bounty I will guess ;)
After a quick look at the source code of your (none working) DEMO using fancybox v2.1.5, I found some issues you may need to fix in in order to have a working page :
1). You don't have a proper DOCTYPE (I meant, not DOCTYPE at all)
2). You have a stray </div> closing tag (line 179) just before the <div id="baseurl">
3). You have a stray <! opening (sort of) conditional comment (line 204)
4). Yo DON'T have a closing </html> tag
5). The base url issue:
You have this html line
<div id='baseurl' style="display:none">http://madenade.besaba.com/file/filemanager/dialog.php?type=2&field_id=<</div>
Notice at the end of the line &field_id=<</div> : the extra < I think is a typo, isn't it?.
Then you have this variable:
var baseurl = $('#baseurl').html();
... which actually returns :
http://madenade.besaba.com/file/filemanager/dialog.php?type=2&field_id=<
If you run that url directly in your browser (out of fancybox) it does return the same js error while selecting the image in fancybox. What I think is the escaped html entities are somehow messing with the functionality of responsive file manager.
For instance, if you open the url without escaping the html entities (in a new tab/window) like :
http://madenade.besaba.com/file/filemanager/dialog.php?type=2&field_id=s7cJMxQl
...(excluding the < typo), the only error is when triggering the $.fancybox.close() method, which it does make sense.
I would recommend you to do either :
var baseurl = $("#baseurl").text(); // don't escape html entities
or set the value in a data attribute for a cleaner code like
<div id="baseurl" data-base="http://madenade.besaba.com/file/filemanager/dialog.php?type=2&field_id=" style="display:none"></div>
... then the variable
var baseurl = $("#baseurl").data("base");

how to open a image in lightbox?

I want to open a image in lightbox like in this address using JavaScript.
this code i am using in HTML it works fine. but i want to use this code in JavaScript function.
<div class="imageRow">
<div class="single">
<img alt="" src="url" />
</div>
</div>
How to write it in JavaScript.
for example this code open a image in new window.i want code like this to open a image in Lightbox2 using classes that are in upper HTML code.
<script type="text/javascript">
function onListPhotoClicked(event) {
var position = event.getPosition();
var photo=event.getPhoto();
if(photo){
MaximizeWindow(window.open('http://static.panoramio.com/photos/original/'+photo.getPhotoId()+'.jpg'));
}
}
function MaximizeWindow(hWnd){
hWnd.moveTo(0,0);
hWnd.resizeTo(screen.width, screen.height);
}
panoramio.events.listen(
attr_ex_photo_widget, panoramio.events.EventType.PHOTO_CLICKED,
function(e) { onListPhotoClicked(e); });
</script>
this code open a image in new tab.but i want that this code open image in lightbox2.
i am new in programming.please tell me in detail by writing code.
this is code of a panoramio.com widget.
<div>
<img border="0" height="0" src="http://3.bp.blogspot.com/-EHT3COGzPHY/UnTXKACCkMI/AAAAAAAAAuI/KXnLjT-6ovk/s1600/98289201.jpg" width="0" /></div>
<script src="http://www.panoramio.com/wapi/wapi.js?v=1" type="text/javascript"></script>
<style type="text/css">
#div_attr_ex .panoramio-wapi-images {
background-color: transparent;
}
</style>
<br />
<div id="div_attr_ex" style="float: center; margin: 5px 10px;">
<div id="photo_widget_id_a11">
</div>
<div id="photo_widget_id_b11">
</div>
<div id="photo_widget_id_c11">
</div>
</div>
<script type="text/javascript">
var sand = {'set': panoramio.PhotoSet.RECENT };
var sandRequest = new panoramio.PhotoRequest(sand);
var attr_ex_photo_options = {
'width': 600,
'height': 480,
'disableDefaultEvents': [panoramio.events.EventType.PHOTO_CLICKED],
'attributionStyle': panoramio.tos.Style.HIDDEN};
var attr_ex_photo_widget = new panoramio.PhotoWidget(
'photo_widget_id_a11', sandRequest, attr_ex_photo_options);
var attr_ex_list_options = {
'width': 600,
'height': 110,
'columns': 6,
'rows': 1,
'croppedPhotos': true,
'disableDefaultEvents': [panoramio.events.EventType.PHOTO_CLICKED],
'orientation': panoramio.PhotoListWidgetOptions.Orientation.HORIZONTAL,
'attributionStyle': panoramio.tos.Style.HIDDEN};
var attr_ex_list_widget = new panoramio.PhotoListWidget(
'photo_widget_id_b11', sandRequest, attr_ex_list_options);
var attr_ex_attr_options = {'width': 300};
var attr_ex_attr_widget = new panoramio.TermsOfServiceWidget(
'photo_widget_id_c11', attr_ex_attr_options);
function onListPhotoClicked2(event) {
var position = event.getPosition();
var photo=event.getPhoto();
document . apple . banana . value = position;
if(photo){
MaximizeWindow(window.open('http://static.panoramio.com/photos/large/'+photo.getPhotoId()+'.jpg'));
}
}
function MaximizeWindow(hWnd){
hWnd.moveTo(0,0);
hWnd.resizeTo(screen.width, screen.height);
}
panoramio.events.listen(
attr_ex_photo_widget, panoramio.events.EventType.PHOTO_CLICKED,
function(e) { onListPhotoClicked2(e); });
function onListPhotoClicked(event) {
var position2 = attr_ex_list_widget.getPosition();
attr_ex_list_widget.setPosition(position2+1);
var position = event.getPosition();
if (position !== null) attr_ex_photo_widget.setPosition(position);
document . apple . banana . value = position;
}
panoramio.events.listen(
attr_ex_list_widget, panoramio.events.EventType.PHOTO_CLICKED,
function(e) { onListPhotoClicked(e); });
attr_ex_photo_widget.enablePreviousArrow(true);
attr_ex_photo_widget.enableNextArrow(true);
attr_ex_photo_widget.setPosition(0);
attr_ex_list_widget.setPosition(0);
function increase()
{
var temp = parseInt (document . apple . banana . value);
if (isNaN (temp))
return;
if (temp>=0 )
{
attr_ex_photo_widget.setPosition(temp);
attr_ex_list_widget.setPosition(temp);
document . apple . banana . value = temp;
}
else
{
attr_ex_photo_widget.setPosition(0);
attr_ex_list_widget.setPosition(0);
document . apple . banana . value = 0;
}
}
function startDownload()
{
var photo3=attr_ex_photo_widget.getPhoto();
var url='http://static.panoramio.com/photos/original/'+photo3.getPhotoId()+'.jpg';
window.open(url);
}
</script>
<form name="apple">
<input max="10000" maxlength="4" min="0" name="banana" size="4" type="number" />
<input onclick="increase ();" type="button" value="View" /></form>
<button onclick="startDownload()">Download</button>