Send $_FILE data to form input

Question

I have an event listener set up in jQuery $('#file').on("change", function() {});.

This detects when image has been appended.

Image source is: data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQ... the plugin does this.

I just want to send that created image to file upload input in my html form. How can I do this?

I don't know what to do lol, I want to send this appendet image to my form input. My jquerry isn't that good — LazyPeon, Oct 03 '14 at 13:00
I understand it you have the image as base64 string. Send it as regural input field in POST request. File fields are to read files from users filesystem. — Marek, Oct 03 '14 at 13:03
"Send it as regural input field in POST request." I don't understand this completely... can you clarify? — LazyPeon, Oct 03 '14 at 13:14
See if this helps: http://stackoverflow.com/a/26056642/1208233 — Yang, Oct 03 '14 at 13:31

score 1 · Answer 1 · answered Oct 03 '14 at 13:34

1

Try something like this then:

<script type="text/javascript">
$(function(){
   $("plugin").change(function(e){
      $("input#image").val(img);
   });
})
</script>
<form>
  <input type="hidden" name="image" id="image" />
  <input type="submit" />
</form>
<?php
if(getenv("REQUEST_METHOD") === "POST"){
   $image = $_POST["image"];
   // do what you want
}
?>

The more information you give, the better we can help you. Also, it's worth trying things yourself as you will learn from mistakes you make.

answered Oct 03 '14 at 13:34

`SecurityError: The operation is insecure.` reads my consoel log – LazyPeon Oct 03 '14 at 13:36
1

You've got 3 options: 1. make a jsfiddle with your code. 2. try to debug it yourself. 3. provide more information about your code and goal – Oct 03 '14 at 13:38
We were on the right track here but it seems that the newly created base64 string cant be just inserted into form field, I get a security warning. I am using Codeigniter though, maybe this is the problem – LazyPeon Oct 03 '14 at 13:40

score 0 · Answer 2 · answered Oct 03 '14 at 13:15

0

Why don't you send it as an hidden input field? After you post the form, you can do whatever you like with it using php. Something like this:

<script type="text/javascript">
$(function(){
   $("plugin").change(function(e){
      $("input#image").val(e.image);
   });
})
</script>
<form>
  <input type="hidden" name="image" id="image" />
  <input type="submit" />
</form>
<?php
if(getenv("REQUEST_METHOD") === "POST"){
   $image = $_POST["image"];
   // do what you want
}
?>

Haven't tested this, but it should be enough to help you get going. If you want to display the image, just do something like this:

<img class="thumbnail" src="data:image/gif;base64,R0lGODlh9AEZAdUyAK6VZqBmUNjRrNSon+7">

answered Oct 03 '14 at 13:15

`$("input#image").val(e.image);` will get my appended image data and send it to hidden field? – LazyPeon Oct 03 '14 at 13:19
It's worth noting that a hidden input field is inherently not secure, and if you are going to use this to get a file to upload, malicious users may be able to splice their own file into header information and force an upload to your server. – Mark Oct 03 '14 at 13:19
@LazyPeon As you can read in jquery documentation: http://api.jquery.com/val/ it will indeed change the value of your input field. – Oct 03 '14 at 13:22
but how can I get my appendet image which source looks like: `data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQ...` – LazyPeon Oct 03 '14 at 13:25
What do you mean? `data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQ...` will go to the input field as it's value. – Oct 03 '14 at 13:27
I get my img like so: `var img = cropper.getAvatar()` which looks like `img = data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQ...` how can I get this data to my form field? – LazyPeon Oct 03 '14 at 13:32

Send $_FILE data to form input

2 Answers2