Code

Discussion on HTML 5 Upload Image, Ratio with Drag and Drop

Discussion on HTML 5 Upload Image, Ratio with Drag and Drop

By
Cart 1,989 sales
stbeets

stbeets supports this item

Supported

545 comments found.

Hello, I purchase the “Support for HTML5 Upload Image, Ratio with Drag and Drop”. I unzip and uploaded to my site. Parts of it does not seem to be working. The html shows but there is no preview, no drop and drag, no activity as I was expecting to see from the purchase site.

Can you direct me to what I need to check for? Thanks

Cleveland

Are you interested to work on a custom drag and drop builder?

Dear author, Your canvas.php is not working. I tried to upload an image in my hosting and it is not working. As well, I saw the $_POST[‘name’]. I don’t know where it came from. It is an undefined.

Help me asap thx

Hello!

I recently purchased your script and overall its working well, but I have a very annoying problem: I need all the images to end up in 1500×1500 (original image can be any size). The problem is no matter what size the original image is, it starts with a little zoom in, so I have to manually zoom out if I want to use the entire image (even if the original is 1500×1500, it starts zoomed in). Is there any way I can make it load the images with no zoom at all?

Let me know if I make any sense, I’m not sure how to describe it. Worst case scenario I’ll send you a video showing the issue.

Thank you! Andrés

Hello support team!

Wonderful plugin, but still not working for me. I need the image recorded in the / temp / directory to have the same proportions as the image available by the download button.

I have a web application that requests upload of an image, but it should ALWAYS stay in 640px X 120px … I am not able to save the image exactly in that proportion.

My code:

         <input type = “file” name = “thumb” />     

Hey, I would like to request for refund for this plugin. It’s not something we were looking for.. Thanks

hi, refunds are done by Envato, not via the comments. Sorry to hear that this is not what you are looking for… https://help.market.envato.com/hc/en-us/articles/202821460-Can-I-Get-A-Refund-?_ga=2.149589110.1583174058.1511874717-791770319.1511874717

Hi, just purchased.. But when I try to use it resize, delete and other buttons are not displayed.. Also the container for drop image is just single line.. No height. When I set custom height on container and click to upload, select image, no image is displayed? There are no errors on console? What can I do?

I’m an ASP.NET coder and bought this many, many months ago, not realizing that it was PHP dependent and would be useless to me. I gave getting it to work a try, but nothing, but was worn out mentally by the effort. I became determined to improve my site a week ago, and after several months, and having learned just a tad bit more, I was able to work out a solution.

My problem with the original was that it would save the updated image to the file system on my development machine, but not when uploaded to my hosted site.

I successfully worked on custom solution and then thought to try the solution with this application, and it worked beautifully. I simply replaced [canvas.php] with a ASP.NET Generic Handler—Canvas.ashx. The code follows. It’s not super clean, but works super well. I hope it helps, as this was a months long ordeal for me. I still have to figure out how to save the cropped image to a database, however. NOTE: the tilde was removed before the ”/” and should appear as ”~ /Subfolder”

<%@ WebHandler Language=”VB” Class=”Canvas” %>

Imports System Imports System.Web Imports System.Net Imports System.Net.WebRequestMethods.Http Imports System.IO Imports System.Web.Script.Serialization

Public Class Canvas : Implements IHttpHandler

Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
    context.Response.ContentType = "application/json" 
Dim strimageData As String = context.Request.Form(0).ToString
Dim strFileName As String = context.Request.Form(1).ToString
Dim imageData As Byte() = Convert.FromBase64String(strimageData.Split(",")(1))
Dim savepath As String = "" 
Dim tempPath As String = "" 
tempPath = "~ /Subfolder/tmp/" 
savepath = context.Server.MapPath(tempPath)
Dim urldata As String = context.Server.MapPath("~ /Subfolder/tmp/")
Using stream As New FileStream(savepath & strFilename, FileMode.Create)
    stream.Write(imageData, 0, imageData.Length)
    stream.Flush()
End Using
Dim jsonSerializer = New JavaScriptSerializer()
context.Response.Write(jsonSerializer.Serialize(New With { _
    Key .status = "success", _
    Key .url = urldata, _
    Key .filename = strFileName _
}))
End Sub
Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
    Get
        Return False
    End Get
End Property

End Class

Hi I have feedback about your plugin

It has an issue when you use iPhone and Take a Photo and you click Save. The canvas is rotated to the left, it’s the issue, I think you need to check EXIF orientation.

I can’t fix that issue. Please help me check this

Thanks,

Hi, is there a way to rotate de image? when you took a picture with a mobile device it apears rotated. a rotate button can help

I am using canvas and I have existing server-side images that I am displaying with data-image. When I do that, I see the little red trash can as the only icon on the image. If I use editstart then instead of the red trash can, I see the zoomin/reset/zoomout/cancel/save buttons, as expected. What I want to do .. if it’s possible or else as a feature request .. is to display the server-side image with the little red trash can and also the edit button. Pressing the edit button would display the zoomin/reset/zoomout/cancel/save buttons. In other words, I want to start with the buttons that you end up with after you do an edit and a save (the “final” buttons where you see edit & trash). Our users are mostly older and unsophisticated and I think it will be less confusing for them to see an edit button and a trash button on their existing image when the page first displays. Is that possible or might it get added as a feature?

Hi Dtynan,

In order to do this, there must be alot more stored on the server, because we only display the “final” image. We have no knowledge anymore of all the edits that took place before.

Maybe i miss understood your question and you only want the buttons?

Let me know.

Regards,

Sander

Thanks for the reply! Let me try to be clearer…

I have the user’s image on the server already. I display it to him with data-image=whatever.

OPTION A ) He sees the image and it only has the little red trash can icon (if I don’t do editstart).

OPTION B ) He sees the zoomin/reset/zoomout/cancel/save (if I do editstart).

Rather than either of those two scenarios what I want him to see is the edit button (data-button-edit) and the red trash can. Then, pressing the edit button would show the zoomin/reset/zoomout/cancel/save. Is that possible?

In other words, I want to start with this look: http://imgur.com/6CKeKXl When the user clicks the pencil icon, he gets: http://imgur.com/a/8wsim

This is my code:
<div class="dropzone" data-width="200" data-height="300" data-resize="false" data-editstart="true" data-image="/finsecurity/photos/dragon.jpg" data-url="/finsecurity/canvas.php" style="width: 100%;" />

I just want editstart (or some similar option) to show the pencil icon initially… Can that be done?

what a have to do for get de croped imagen and save in a var?

Hi, I have purchased your product but I am confused regarding using the modal form to show the image and writing the filename of the image saved to a database table.

I can get the form to work OK but what else do I need to get the filename after a successful file upload?

Regards

Alan

Plz can some help me

i can’t save croped imagen, just the original with “this.imageGhost0.currentSrc”

plz i need help

huawhauwauwh best suport ever!!!

hi there, i just purchased your pluggin its already runnign on the front end but im having problems to catch it on the server side with a JAVA servlet, im using this code on the html but I’m getting the parameters thumb and data null

<form action=”Actores” Method=”Post” enctype=”multipart/form-data”> <input type=”file” name=”thumb” /> </form>

can you help me out please? am I missing some parameter?

sorry thats not the correct code im using <form action=”Actores” Method=”Post” enctype=”multipart/form-data”> <input type=”file” name=”thumb” /> </form>

Whats the name of the parameter that has the base64 file? Ive tried thumb_values, data and thumb, all 3 are null

forget it I found the parameter, you should put it on the documentation, the parameter on the request is thumb_values

>So either the /tmp dir is not there

Oh, god. I had the same problem. Spent few hours of my working time trying to figure out the problem. Maybe you should add the script which automatically creates that folder if it doesn’t exist? Thank you

Hi Sir/Ma’am,

It is a very nice plugin and easy to use. But right now I am facing an issue in IOS devices.When I try to crop a pic on mobile (I’m using iPhone and IPAD) image will be rotated, either by taking a photo or use an existing photo.

When I click the “tick” button on mobile the pic will be rotated 90 degrees and the image gets blurry. It works fine on the desktop. It would be great if you can help me for this issue.

Thanks in advance

Hi Is there any update or solution on this?

Hello,

I post form using “file” not “base64/json” and it works fine. But I need to be able to retrieve on my form post page in addition to “file” all image attributes: “imageOriginalWidth, imageOriginalHeight, imageWidth, imageHeight etc.” as simple ”$POST” values (or an array but keeping file as a regular file).

My image field name is “thumb” so I tried to get “thumb_height” > empty

Currently I setup my form with these settings: data-canvas=”true data-save=”false” data-originalsave=”true” data-ajax=”false”

I tried to play a bit with it but without success… So please tell me the name of $Post value.

Thank you.

Antoine

Hi my name is Roberto. I have same problems when I use your plugin and jansy bootstrap to file upload. When I use to first jansy for upload a file an then I use your plugin I get this error . Uncaught RangeError: Maximum call stack size exceeded at String.replace (<anonymous>) at Function.fb.matchesSelector (jquery.js:2) at Function.m.filter (jquery.js:2) at w (jquery.js:2) at m.fn.init.is (jquery.js:2) at m.fn.init.$.fn.val (bootstrap-select.js:133) at c.clear (jasny-bootstrap.min.js:6) at c.reset (jasny-bootstrap.min.js:6) at HTMLFormElement.e (jquery.js:2) at HTMLFormElement.dispatch (jquery.js:3). Why ? this is the link of Jansy bootstap: http://www.jasny.net/bootstrap/javascript/#fileinput Thanks

Does the drag and drop feature work any more with modern browsers? Even on your live demo it says “Please wait, image is loading” when you drop an image. Nothing happens (I’m using Chrome 58.0.3029.110)

It’s a shame this plugin hasn’t been updated in over 2 years. I know for one I would have continued to pay for support and continued to use it. As it is, the next chance I get to replace it, I will, which is a shame.

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey