How to assign a file input to another file input?

Question

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?

Sulemasulf

Use jQuery to add the inputs. What is the Question? – Legitimacy

Your question is not clear. Do you simply need an input element that allows multiple uploads? – Clichy

You will have to attach Events after the Elements exist, if that's what you are wondering. – Legitimacy

I'll edit the problem more specifi, one sec – Sulemasulf

@PHPglue maybe you are right with the attach Events. Can you show how it's done? – Sulemasulf

Answer 1

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.

Malone

This code is not working in mozilla browser. Please see #46440930 – Cloison

Answer 2

Try this:

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

Thiamine

awesome, thanks! This is exactly what I was looking for.. – Hallsy

Answer 3

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>

Legitimacy

But what if you have several #output divs and each of them is inside it's own div #number1, #number2, #number3 etc? – Sulemasulf

Answer 4

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.

Dupery