CODEWITHSUNDEEP
javascriptruby-on-railsformshtml5-canvascarrierwave
AaronG
AaronG

Reputation: 84

Append canvas image to form and upload using Carrierwave

I am trying to make an app where my users can draw pictures and then save them. And just like this person was doing I am trying to add a form using Carrierwave to upload.

This is the form that I am trying to upload to. I made the file field invisible to the user can only add images to the form that they draw.

<%= form_for(listing, html: { multipart: true } ) do |f| %>

<div class="invisible">
    <%= f.label :image %>
    <%= f.file_field :image, class: "form-control" %>
  </div>

<div class="form-group">
    <%= f.submit class: "btn btn-primary" %>
  </div>

<% end %>

I would like to use the following javascript function that I got from this website to convert the canvas image into a dataurl and then into a blob and then add the image to my form when the user clicks the submit button in my form.

function uploadimage() {
        var dataURL =  canvas.toDataURL('image/png');
           // Convert dataURL to Blob object
        function dataURLtoBlob(dataURL) {
          // Decode the dataURL    
          var binary = atob(dataURL.split(',')[1]);
          // Create 8-bit unsigned array
          var array = [];
          for(var i = 0; i < binary.length; i++) {
              array.push(binary.charCodeAt(i));
          }
          // Return our Blob object
          return new Blob([new Uint8Array(array)], {type: 'image/png'});
        }
          // Get our file
        var file= dataURLtoBlob(dataURL);
        // Create new form data
        var fd = new FormData();
        // Append our Canvas image file to the form data
        fd.append("image", image);
        // And send it
    }

Another question that I have is say for example I just wanted to convert the canvas image into a url and then upload it to carrierwave as a base64 image using the code from the first method of this site. Like this...

 function uploadimage() {
        var dataURL =  canvas.toDataURL('image/png');
         }

On Rails Carrierwave Base64 image upload a poster named mohamed-ibrahim said that you can use the carrierwave-base64 gem. Could somebody please show me how to use the carrierwave-base64 gem. I've already changed my mount_uploader to mount_base64_uploader but I am confused about what else he said to do.

Upvotes: 0

Views: 1383

Answers (1)

AaronG
AaronG

Reputation: 84

I was finally able to get this. I did it by going to Meagon Coyle's Map Sketch Github page and looking through her javascript (javascripts/scripts.js) code and finding this code...

document.getElementById('create-drawing').addEventListener('click', function(){
    var dataUrl = canvas.toDataURL("image/jpeg");
    var dataImg = document.createElement('img');
    dataImg.src = dataUrl;
    var drawingField = document.createElement('div');
    drawingField.innerHTML = "<input type='hidden' name='listing[image]' id='image' value='" + dataImg.src + "'>"
    document.getElementById('listing_image').value = dataUrl;
  });

I was able to associate it with my ruby on rails form in my view page.

<%= form_for(listing, html: { multipart: true } ) do |f| %>

<%= f.hidden_field :image %>

 <%= f.submit :id => 'create-drawing' %>

The create-drawing in both the javascript's document.getElementById and the html view's submit form button is how they are linked. I then used the carrierwave-base64 gem and the only thing that I needed to do was my mount_uploader to mount_base64_uploader. I didn't need to do anything else.

Upvotes: 1

Related Questions