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.

Hi !

The smaller picture is saved as jpg when saving a continuous BETA..

png doesn’t register as

Merhaba, dosyayı php ile nasıl upload edebilirim veri tabanına ?

Hi, My question is how can i get filename on save in server image. As in case if we use Server image except of upload one then how we will be able to retrieve name of saved image. Feel free to contact with me for further details.

Thanks :)

Hi,

already posted a comment at the item itself like 20 days ago.

I really need some support now for it. I downloaded the HTML 5 Upload image, ratio with drag and drop.

the images dont save properly if i use it…

Here the link: http://dherzog.square7.ch/raumblaetter/

Everything is working fine in the demo but on the download files must be an mistake.

I really need this to work now. Please update the files or something.

Cheers, Daniel

Hi!

I tested your code… this is the AJAX response i get

<style>.bpe a:link, .bpe a:visited, .bpe a:active { color: #0b4c8e; text-decoration: none; } .bpe a:hover { color: #0D7CEC; }</style>
Warning: fopen(/users/dherzog/www/raumblaetter/tmp/1052158_565732640137029_859943589_o.c81526.jpg) [function.fopen]: failed to open stream: No such file or directory in /users/dherzog/www/raumblaetter/canvas.php on line 18
<style>.bpe a:link, .bpe a:visited, .bpe a:active { color: #0b4c8e; text-decoration: none; } .bpe a:hover { color: #0D7CEC; }</style>
Warning: fwrite() expects parameter 1 to be resource, boolean given in /users/dherzog/www/raumblaetter/canvas.php on line 19
<style>.bpe a:link, .bpe a:visited, .bpe a:active { color: #0b4c8e; text-decoration: none; } .bpe a:hover { color: #0D7CEC; }</style>
Warning: fclose() expects parameter 1 to be resource, boolean given in /users/dherzog/www/raumblaetter/canvas.php on line 20
{status“}

So either the /tmp dir is not there (failed to open stream: No such file or directory in )... or something else is wrong on your server…?!

Hi i just bought ur item and uploaded all the files to a testserver of bplaced.

i just realized that the images dont actually “save” after i resize them, if i check the accept button they just stays like this:

http://dherzog.bplaced.de/raumblaetter/bug.png

i didnt change anything in the files, i took the folder like i downloaded it and uploaded it :(

is it possible to include this stuff into codeigniter? if yes, is there a documentation or something how to do it?

Cheers, Daniel

Why are you don’t response my quertion

hi just got this and set it up and works great so far. I am uing it so members of my site can resize and upload their avatar picture…thank you for this

One question and I am sure it is answered but can not find it. say I an uploading name.jpg and when it saves the pic it saves it for example as name.6665a9.jpg. as I need it to be their name how can I get it to just save as name.jpg Overwriting the previous one they uploaded is fine

hello? never got an answer can you please help with my question. Thank you

I am not using PHP, so I need to use the onSave function.

Is there any easy way without jumping through hoops to just return the base64 value of the image to a text input on the page ? (in the onSave would be the best way for me (I think)). But I don’t know how to grab that value there.

You could change the ajax function. there i will send all param to a url (backend PHP) but if you change that to your liking, you have all params you need

Cannot get the buttons to show up. What am I missing ?

<!DOCTYPE html>

<head> <metea charset=”utf8”> <title></title> <script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js”></script> <script src=”/js/crop/html5imageupload.min.js”></script> </head>

<form> <input type=”file” name=”thumb” /> </form> Javascript <script>$(’.dropzone’).html5imageupload();</script> <link href=”/js/crop/html5imageupload.css” rel=”stylesheet”>

got it.. needed bootstrap css .. wish that was just pointed out somewhere.

hi, include the bootstrap CSS, or copy the needed classes for the buttons to let them show.

i will include this in the instructions! Thanks for your feedback

Dear support

this dont working for me on my page

i think the instalation is ok but

i can see the div (dropzone) en it open a file searcher when its cliked but after a pic is selected nothing happing just stare the same

no button show no crop posibility nothing

can you help me?

worst purchase ever.. hope can i have my money back!!!

hi, what is not working for you? Other 1650 customers have it working…

Have a demo url or something where you can show me your implementation?

Hi stbeets, Answer me please.

hi, this is an answer… pls let me know the question

Hello. I recently bought your product. But I have a problem using it

I want to access canvas.php file on asp.net server environment. Do you have any file for asp.net? I dont know about php language so i really need that for c# language version. Look forward to hear from you soon. Best Regard.

Hello stbeets, can you give me Help or more Info with this Overlayer Option. I need this. Thx Qeib

Hello stbeets, delete this last Question please, i have a Solution finding. $('.cropPlaceholder').bind('mousedown touchstart',function(event) { _self.imageHandle(event)});

ok, cool!

Hello. I recently bought your product. But I have a problem using it

I want to access canvas.php file on asp.net server environment. Do you have any file for asp.net? I dont know about php language so i really need that for c# language version.

Look forward to hear from you soon. Best Regard.

Hello,

i have a problem with the Download option. This come not when i save the image. Then i have a Problem with the image zoom before crop the Image. Can i take the image zoom smaller when i have uploadet the Image ?

LG Qeib

responsive in the Background ?

for placeholder, yes! Use -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;

Ok alright, hm the drag not function, hm

Zoom is ok but the drag option not

.dropzone .cropPlaceholder { overflow: hidden; position: absolute; top:0; bottom: 0; left: 0; right: 0; z-index: 11; background: url('../assets/images/universal.png') no-repeat; background-color: transparent; text-align: left; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

LG Qeib

Long time that I bought it but just started to use it. Is it possible the follow scenario: In a block 250w X 200h to save the image with dimensions 750w X 600h?

Thank you
Chris

I must remove it as I need to release the Lite (free) version today. I’ll try to make a new installation at a later time, to include it in the Pro (paid) version. Thank you for your support !!

Hi Chris, sorry i could not have a look at right away…! Please let me know when you have it on a test server. Sorry again

No problem at all. And maybe is better to delay it for the Pro version. As I said the current version should be free and is not wise to include paid plugin(s) to something free.

Is there c# example?

Hello,

thank you for that great plugin.

I want to use the plugin for cropping before uploading the original file to the server to perform a server-side cropping afterwards.

I was wondering if there is the possibility to change the data-width and data-height dynamically after loading an image. For Example if the user wants to switch from 4:3 to 16:9

Thank you for your help.

Regards

Additional Comment: I tried just changing the style attributes. Zooming within the canvas works, but cropping result does not have the correct aspect ratio and centering is not working. So same as I think before… is there a way to update the values of the cropper object?

The script appears to work perfectly, I just don’t see where it actually uploads the file… it tells me it does, using the form version it shows /tmp/filenameetc.123.jpg BUT there are no files in /tmp or anywhere else that I can find.

I’m using IIS 7.5 PHP 5.45

purchase id: b5a60d57-3784-4867-8c79-693a00a529af

Thanks in advance

hi! Thanks for the feedback, do you have a working demo, where i can see the AJAX response? Does the /tmp folder exists on your server?

Hi there,

I encounter some issues with your plugin. It seems like the callback called onAfterSelectImage is not triggered properly. When I assign some function to this callback it throws an exception, probably because the response object does not exist inside given context. The stack trace looks like this:

Uncaught ReferenceError: response is not defined

at html5imageupload.handleFile (html5imageupload.js:286)
at HTMLInputElement.<anonymous> (html5imageupload.js:240)
at HTMLInputElement.dispatch (jquery-1.11.3.js:4670)
at HTMLInputElement.elemData.handle (jquery-1.11.3.js:4338)

Are you sure this feature works properly? Can you provide a working example?

Best regards

Yes i know for a fact it works, because i tested it before releasing it. What is your JS?

That’s minimal JS which crashes after selecting image ``` $dropZone.html5imageupload({ onAfterSelectImage: function () { console.log(‘Testing afterSelectImage’); } });

14 days and no response?

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