What is the process for assigning one file input to another file input?

Question

What is the process for assigning one file input to another file input?

Quite an unusual question, I admit. The crux of the matter is my utilization of a fantastic tool known as cropit. With this tool, we have the ability to upload an image, preview it, and then manipulate it according to our preferences.

HTML:

<div align="center" id="image-cropper1">

    <!-- This is where users can select a 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 will be displayed -->
  <label><div class="cropit-preview"><img class="prepic" src="preloadimage.jpg"></label>

<!-- Here is how you can 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) })
    });

My goal now is to integrate another <input type="file"/> button that enables the uploading of 6 images simultaneously and displays them in 6 separate ".cropit-preview" divs. This is crucial because users can zoom in and rotate the images within the previews. Is there a way to achieve this with multiple files while still adhering to the structure of this tool?

EDIT:

Please refer to the documentation: The issue lies in the structure. Let's say I need three different croppers. The layout would appear as follows:

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 shown above, each file input and preview div are contained within their respective numbered divs. However, I now aim to introduce one input option that can upload three images at once and correspondingly fit into every image-preview displayed within each numbered div. How can this objective be accomplished?

javascript jquery html css crop

Answer 1

Answer №1

If you want to transfer the file selection from one input field to another, you can achieve it with this code snippet:

const sourceInput = document.querySelector('#source-input>input[type=file]');
const targetInput = document.querySelector('#target-input>input[type=file]');
targetInput.files = sourceInput.files;

When dealing with <input type="file"> elements, the files attribute refers to a FileList object, which is explained in more detail here.

Answer 2

If you want to transfer the file selection from one input field to another, you can achieve it with this code snippet:

const sourceInput = document.querySelector('#source-input>input[type=file]');
const targetInput = document.querySelector('#target-input>input[type=file]');
targetInput.files = sourceInput.files;

When dealing with <input type="file"> elements, the files attribute refers to a FileList object, which is explained in more detail here.

Answer 3

Answer №2

Give this a shot:

$("#targetFileInput").prop("files",$("#originalFileInput").prop("files"));

Answer 4

Give this a shot:

$("#targetFileInput").prop("files",$("#originalFileInput").prop("files"));

Answer 5

Answer №3

I came up with a solution that looks like this:

//custom.js
var doc, C;
$(function(){
  doc = document;
  C = function(tag){
    return doc.createElement(tag);
  }
  $('#upload').change(function(ev){
    var output = $('#output'), files = this.files, fileLength = files.length;
    if(fileLength > 6){
      console.log('Too many files');
    }
    else{
      var container = C('div');
      $.each(files, function(index, value){
        var reader = new FileReader, img = C('img'), canvas = C('canvas'), ctx = canvas.getContext('2d');
        reader.onload = function(event){
          img.onload = function(){
            canvas.width = this.width; canvas.height = this.height; ctx = canvas.getContext('2d'); ctx.drawImage(this, 0, 0); container.append(canvas);
          }
          img.src = event.target.result;
        }
        reader.readAsDataURL(value);
      });
      output.append(container);
    }
  });
  $('#send').click(function(){
    var formData = new FormData;
    $('canvas').each(function(i, element){
      e.toBlob(function(blob){
        var fileReader = new FileReader;
        fileReader.onloadend = function(){
          formData.append('image_'+i, fileReader.result); 
          formData.append('count', i+1);
        }
        fileReader.readAsArrayBuffer(blob);
      });
    });

    
  });


});

/* custom.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='custom.css' />
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
    <script type='text/javascript' src='custom.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>

Answer 6

I came up with a solution that looks like this:

//custom.js
var doc, C;
$(function(){
  doc = document;
  C = function(tag){
    return doc.createElement(tag);
  }
  $('#upload').change(function(ev){
    var output = $('#output'), files = this.files, fileLength = files.length;
    if(fileLength > 6){
      console.log('Too many files');
    }
    else{
      var container = C('div');
      $.each(files, function(index, value){
        var reader = new FileReader, img = C('img'), canvas = C('canvas'), ctx = canvas.getContext('2d');
        reader.onload = function(event){
          img.onload = function(){
            canvas.width = this.width; canvas.height = this.height; ctx = canvas.getContext('2d'); ctx.drawImage(this, 0, 0); container.append(canvas);
          }
          img.src = event.target.result;
        }
        reader.readAsDataURL(value);
      });
      output.append(container);
    }
  });
  $('#send').click(function(){
    var formData = new FormData;
    $('canvas').each(function(i, element){
      e.toBlob(function(blob){
        var fileReader = new FileReader;
        fileReader.onloadend = function(){
          formData.append('image_'+i, fileReader.result); 
          formData.append('count', i+1);
        }
        fileReader.readAsArrayBuffer(blob);
      });
    });

    
  });


});

/* custom.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='custom.css' />
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
    <script type='text/javascript' src='custom.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>

Answer 7

Answer №4

To link the source input tag file to another one, you can simply follow these steps:

Suppose we have a pair of input tags named 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;

Credit goes to Ourobonus for the helpful tip.

If your goal is to display only the image thumbnails, you may find useful information at

https://developer.mozilla.org/en-US/docs/web/api/file_api/using_files_from_web_applications

.

Answer 8

To link the source input tag file to another one, you can simply follow these steps:

Suppose we have a pair of input tags named 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;

Credit goes to Ourobonus for the helpful tip.

If your goal is to display only the image thumbnails, you may find useful information at

https://developer.mozilla.org/en-US/docs/web/api/file_api/using_files_from_web_applications

.

What is the process for assigning one file input to another file input?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

AngularJS Accordion Component: A Handy Tool for Organ

Issue with converting form data to JSON format

Having trouble with the performance of a kendo UI treeview connected to a JSON

Elevate your website with Bootstrap 4's compact floating icon menu

Some components react to history.push() with react-router-dom while others simply don't seem to respond

Tips for organizing your JSON Structure within ReactJs

What is the best way to increment the value of an input by any number using JavaScript and HTML?

Differences in behavior across operating systems when pasting content copied from Excel into Next.js

Tips for transferring a function from a Node.js server to a client

Avoiding the insertion of duplicates in Angular 2 with Observables

What are the best practices for creating a contemporary website that functions effectively on IE7?

Creating a navigation bar in React using react-scroll

Python web scraping: Extracting data from HTML tag names

Server side Meteor with reactive coffee on client

A guide to JavaScript: Fetching and Parsing JSON Data from an API

Display alert only when focus is lost (on blur) and a dropdown selection was not made

Is there a way to properly center this text vertically within the row?

Is it possible for a div nested within another div to still occupy space on the page despite being set

Creating Multiple Choice Forms in React: A Guide to Implementing Conversational Form

Bookmarklet in JavaScript that automatically extracts and displays Meta keywords in a new tab within the browser