How can I add value to filefield to an image on the screen?

Question

I know this question is asked before but my case is different. I don't want to browse the client's computer, I want to add the "post it" button to the image he was drawing. it's a drawing web app. I don't think this needs any code from me. Thanks a lot. EDIT: Rails html

<%= form_for @post, html: { multipart: true } do |f| %>
<br>
 <%= f.label :image %>
 <%= f.file_field :image, id: "pictureInput", class: "pictureInput" %> <<---
 <%= f.text_area :title %>
 <%= f.label :title %>
 <br>
 <%= f.submit %>
<% end %> 
<div id="post-image-preview">
</div>

The js is drawing on a canvas.

Are you trying to upload image drawn by user? – guest271314 Jul 16 '16 at 23:30 — guest271314, Jul 16 '16 at 23:30
yeah, to add it to make file field form – Malek Zalfana Jul 16 '16 at 23:38 — Malek Zalfana, Jul 16 '16 at 23:38
Alright, I will. Yes, it is on a canvas. – Malek Zalfana Jul 16 '16 at 23:42 — Malek Zalfana, Jul 16 '16 at 23:42

score 0 · Answer 1 · answered Jul 16 '16 at 23:54

It is not possible to set the FileList property of an <input type="file"> element, as FileList is read-only. You can use FormData(), canvas.toBlob(), XMLHttpRequest() to POST FormData() object containing File object to server

// if (!HTMLCanvasElement.prototype.toBlob) {
Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
  value: function(callback, type, quality) {

    var binStr = atob(this.toDataURL(type, quality).split(',')[1]),
      len = binStr.length,
      arr = new Uint8Array(len);

    for (var i = 0; i < len; i++) {
      arr[i] = binStr.charCodeAt(i);
    }

    callback(new Blob([arr], {
      type: type || 'image/png'
    }));
  }
});

canvas.toBlob(function(blob) {
  var data = new FormData();
  data.append("file", blob, "imageName")
  var request = new XMLHttpRequest();
  request.open("POST", "/path/to/server/");
  request.onerror = function(e) {
    console.log(e)
  }
  request.upload.onprogress = function(e) {
    if (e.lengthComputable) {
      console.log(e.loaded, e.total);
    }
  }
  request.send(data);
});

How can I add value to filefield to an image on the screen?

1 Answers1