Image Cropper with Image Dropper

Phoenix Forum Questions / Help
, ,
1

Hi,
I need help in adding cropper with image dropper.


Drag and drop files here or click
to browse your files.
Maximum File Size: 4GB.
    </form>
    <div class="error text-red">
      <%= error_tag f, :listing_images %>  
    </div>
    

  </div>
  <div 
    class='listing-d-images' 
    data-url-delete='<%= HomepieWeb.Router.Helpers.listing_path(HomepieWeb.Endpoint, :listing_image_delete, @workflow_listing.id, "") %>' 
    data-url-delete-temp='<%= HomepieWeb.Router.Helpers.listing_workflow_path(HomepieWeb.Endpoint, :listing_image_delete, @workflow_listing.id, "") %>' 
    data-url-cover='<%= HomepieWeb.Router.Helpers.listing_path(HomepieWeb.Endpoint, :listing_image_put, @workflow_listing.id, "") %>' 
    data-signature-url='<%= HomepieWeb.Router.Helpers.upload_signature_path(HomepieWeb.Endpoint, :create_signature_post) %>'
    data-save-url='<%= HomepieWeb.Router.Helpers.listing_path(HomepieWeb.Endpoint, :upload_image_post, @workflow_listing.id) %>'
    data-csrf_token='<%= @ctoken %>'
  >
    <%= for image <- @workflow_listing.listing_images do %>
      <% isImage = String.starts_with?(image.content_type, "image/") %>
      <div class='image-wrap-0 <%= if image.cover, do: " cover", else: "" %>' data-id="<%= image.id %>">
        <span class='text-green cover-show'>Cover Photo</span>

        <div class='image-wrap <%= if Enum.member?(@images_flagged_for_delete, "#{image.id}"), do: "deleting" %>'>
          <%= if isImage do %>
            <div class='listing-image' style="background-image: <%= Homepie.Properties.ListingImage.css_urls(image) %>"></div>
          <% else %>
            <div class='listing-image'>
              <video class="listing-image-video">
                <source src="<%= Homepie.Properties.ListingImage.original_url(image) %>"  />
              </video>
            </div>
          <% end %>

          <span class='cover cover-show'>
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="#FFF"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
          </span>

          <%= if !isImage do %>
            <span class='cover cover-play-video'>
              <svg enable-background="new 0 0 32 32" width="40" height="40" version="1.1" viewBox="0 0 32 32"  xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g> <path clip-rule="evenodd" d="M0,16c0,8.836,7.164,16,16,16c8.837,0,16-7.164,16-16   c0-8.837-7.163-16-16-16C7.164,0,0,7.163,0,16z M30.031,16c0,7.72-6.312,14-14.031,14C8.28,30,2,23.72,2,16C2,8.28,8.28,2,16,2   C23.72,2,30.031,8.28,30.031,16z" fill-rule="evenodd"/> <path clip-rule="evenodd" d="M13.08,8.626c-0.056,0.134-0.079,0.276-0.075,0.419v13.942   c-0.024,0.887,1.07,1.38,1.702,0.742l6.899-6.999c0.382-0.386,0.382-1.043,0-1.429L14.715,8.31   C14.221,7.793,13.346,7.966,13.08,8.626C13.025,8.76,13.228,8.259,13.08,8.626C13.025,8.76,13.228,8.259,13.08,8.626   C13.025,8.76,13.228,8.259,13.08,8.626z M19.488,16.016l-4.494,4.559v-9.118L19.488,16.016z"  fill-rule="evenodd"/> </g> </svg>
            </span>
          <% end %>

          <div class='image-actions'>
            <span class='delete pull-right <%= @workflow_listing.status == "approved" && "delete-temp-listing-image" || "delete-listing-image" %>'>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                <g fill="#FFF" fill-rule="nonzero">
                  <path d="M2 6v8c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V6H2zM12 3V1c0-.6-.4-1-1-1H5c-.6 0-1 .4-1 1v2H0v2h16V3h-4zm-2 0H6V2h4v1z"/>
                </g>
              </svg>
            </span>
            <%= if isImage do %>
              <span class='cover cover-listing-image' title='Set as cover photo'>
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="#FFF"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              </span>
            <% else %>
              <span class='cover cover-play-video'>
                <svg enable-background="new 0 0 32 32" width="40" height="40" version="1.1" viewBox="0 0 32 32"  xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g> <path clip-rule="evenodd" d="M0,16c0,8.836,7.164,16,16,16c8.837,0,16-7.164,16-16   c0-8.837-7.163-16-16-16C7.164,0,0,7.163,0,16z M30.031,16c0,7.72-6.312,14-14.031,14C8.28,30,2,23.72,2,16C2,8.28,8.28,2,16,2   C23.72,2,30.031,8.28,30.031,16z" fill-rule="evenodd"/> <path clip-rule="evenodd" d="M13.08,8.626c-0.056,0.134-0.079,0.276-0.075,0.419v13.942   c-0.024,0.887,1.07,1.38,1.702,0.742l6.899-6.999c0.382-0.386,0.382-1.043,0-1.429L14.715,8.31   C14.221,7.793,13.346,7.966,13.08,8.626C13.025,8.76,13.228,8.259,13.08,8.626C13.025,8.76,13.228,8.259,13.08,8.626   C13.025,8.76,13.228,8.259,13.08,8.626z M19.488,16.016l-4.494,4.559v-9.118L19.488,16.016z"  fill-rule="evenodd"/> </g> </svg>
              </span>
          <% end %>
          </div>
        </div>
      </div>
    <% end %>
  </div>
</div>

its urgent.Please help

2

Please provide more info on what You have tried, and what You want to achieve…

As a side note, this is looking like a job task You have been asked to do, and urgent does not work the same in open source world.

3 Likes
3

No Actually i am new for elixir. i have got a project build in elixir. I just need assistance like how it can be achieved,
There is one image dropper and what we need is , User should be able to rotate and crop the image. i have heard about using cropper.js. but not sure how to integrate this… If anyone here have used it

4

Your question is related to Javascript, not Elixir.

5

I am implementing this feature in elixir!!

6

You will need to break the problem down for us. There is a cropper.js part which is not Elixir. What does that create? Where is it meant to go? What approach would you take with another backend language and where are you struggling with Elixir?

3 Likes