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.

Hiya. We have an implementation of your superb plugin on a dev site. Two minor issues..

How do we prevent an image resizing below the set width and height of the uploader placeholder? It stops at the limits of an upload box on your demos here – but we cant get that to work for us – at times allowing us to save only a portion of an image – incorrectly cropped – with the remainder being blank space where the image boundaries lay outwith the placeholder itself. Any help pls?. / 2nd – the rotate function.. is this something youre working on?

Hi.. amazing work. Can you let me know when the rotate functions (we found them in JS files) but only rotates 90 degrees then stops. Were assuming this is a feature in progress? (lines 32-33 in the html5ImageUpload.js

Can you let us know when this feature (which we’d love to have) will be available?

Cheers and thx again! :) Paul

Hi. I have bued this script. I’m trying to integrate this to a website. But i live in norway, and there are some files that have norwegian chart in filname. How do i clean filename before upload. I have tried, but failed. When i upload a file that contains norwegian chart, there is no output.

Where in the form.php can i add something, and what do i need to add. The special chart in filename can be removed, doe’s not need to be replaced.

Hello,

I copy-pasted the code found on http://preview.codecanyon.net/item/html-5-upload-image-ratio-with-drag-and-drop/full_screen_preview/8712634 and put all the files where they belong but when I try to resize the image with the Zoom-in Tool, it just gets out of the canvas by sliding to the left. If I try to move it, the image just goes back to its initial state and doesnt resize at all.

What did I do wrong ? What should I do ?

Thank you

Hi. I’m working on a upload script with some functions. I want my user to upload image to a spesific page, save some data to database. But when i test with image that have special chart and white space, this will not work. i live in norway, so many have special chart in their images. How can i trim the image name before this is saved and have a preview on sceen after upload. now there is nothing saved and nothing shown.

this is my code. (it refer to the orginal sync.php)

<form action=”sync_kjede.php?id=<?php print $resultat ?>” method=”post” enctype=”multipart/form-data”> Fra Dato <input required=”required” id=”start” name=”start” type=”date” > Til Dato <input required=”required” id=”stop” name=”stop” type=”date” > Navn: <input id=”navn” name=”navn” type=”text” > <button type=”submit”>Last opp!</button><button onclick=”showhide(‘edit_image’)”>Avbryt</button> </form>

i renemed the sync.php to sync_kjede.php

Hello, I need help, with your plugin. Can you answer me, and I send a problem with screens.

Hello,

in attached a screenshot with my question.

https://www.screencast.com/t/MmWmGVo0Q1S7

thanks

Antonio

I think it has something to do with the CSS on your site. The button is not showing in my example pages… can you send me a link to your page, so I can have a look?

The CSS of the button is “btn btn-default btn-zoom-reset” and the css of all the tools are in “tools”.Maybe you have some CSS with the same .tools class?

i want not visibile this button is possible ?

yes, it is, read my answer!

HI we are using the html5 image loader. we tried it with data-image, data-ajax=false, data-canvas=false, data-save=false. once the image saved it’s stored on full-size without any cropping or positioning, how can we use the plugin to store the cropped image without ajax and show the cropped image in edit form. Thanks.

Hi, did you see my form example? Together with the form.php file this is possible

Hello Team,

I have purchased your plugin . I want to save cropped file into my database but I am not getting value in ‘thumb_values’ in this array while submitting a form. So please help me how can i store image path into my database and image into upload folder.

Thanks

Hi, you can do all this in the php files we send with the plugin. You can write your own code in this to store the image in your db

I have checked your demo form submit with upload png image on crome browser and getting error as per following screenshot.

Can you please let me know how to fix this at my site as well because same issue I am getting? https://gyazo.com/1e3fe5a16e97f3f6fcc45a1c6a0d1079 http://preview.codecanyon.net/item/html-5-upload-image-ratio-with-drag-and-drop/full_screen_preview/8712634?_ga=1.116192390.1214766590.1484736116

Hi, The image quality of the canvas version is not acceptable. So i wanted to use your upload.php version:

div class=”dropzone” data-width=”188” data-height=”200” data-ajax=”true” data-canvas=”false” data-url=”typo3conf/ext/management/Resources/Private/PHP/ImageUploader/upload.php” style=”width:188px;height:200px;”

input type=”file” name=”thumb1”

When i click the green save, it couldnt find the image after loading. So I changed my directiory in upload.php to $dir = ’/typo3conf/ext/management/Resources/Private/PHP/ImageUploader/tmp/’; Now it says “200 OK” for a second and then I am back in edit mode. Whats wrong? :)

I changed line 59 in your upload.php to

“url” => /typo3conf/ext/management/Resources/Private/PHP/ImageUploader/’.$dir.$filename.’?’.time(), //added the time to force

Seems to work now. Just that it doesnt resize the image properly. But i guess i can fix that by myself.

Yeah. So the second bugfix i did in upload.php was line 47. The left and top coordinates were negative. So i changed it by substracting again: imagecopyresampled($finalImage, $resizedImage, 0, 0, -$_POST[‘left’], -$_POST[‘top’], $_POST[‘width’], $_POST[‘height’], $_POST[‘width’], $_POST[‘height’]);

Hello,

I have some problems with the plugin:

1) is impossible to edit the second time an image, ‘cause after saving resize and move commands stop working 2) If I try to edit an image already on server (passing data-image attribute), every edit i’ve done won’t be saved

Hi,

1) yes this should be possible, you should be able to edit it multiple times.. do you have an example or URL where i can take a look, because mine is working.

2) this is unfortunately not possible, because you only provide the cropped image, i can not “save” the original image and positions.

Thank you very much for the answer, it was a problem of my server side script. Another question: is it possible to save via ajax a reduced version of the picture instead the original one? Thanks in advance

Hello

We just bought script it is working great but we have one problem with crop The croft version have different size than the one on the front Example: This is script https://info.fakturaxl.pl/inne_skrypty_329382/codecanyon/ This is output image: https://info.fakturaxl.pl/inne_skrypty_329382/codecanyon/img/

Could we get any help with that? Croped image is larger then selected area, we can use the script in this situation :(

It’s working, thanks stbeets for support.

Last question: We would like to give users a possibility to change working area height. Is it possible to setup data-height=”auto” ?

I will be thankful for any reply please…

Hi, no this is not possible.. becasue of the resizing of the image and all, it’s a fixed height! Sorry.

Dear author,

today I bought your license for “HTML 5 Upload Image” and I tried to implement your example into my code.

When I tested your example file “index.hml” everything works nice, but I implement this code:

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

<link href=”/htmlUploadImage/assets/css/html5imageupload.css” rel=”stylesheet”> <script src=”/htmlUploadImage/assets/js/html5imageupload.js”></script> <script>$(’.dropzone’).html5imageupload();</script>

And here is the problem that after the image upload I don’t see a toolbar (edit, zoomin, zoomout, etc. buttons).

Are you able to help me with this?

I’m looking forward to hearing from you

Kind regards Michal Madleňák

Ok, I found it … it’s necessary include these files: <link href=”//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css” rel=”stylesheet”> <script src=”//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js”></script>

but it’s funny, it brokes my styles :/ i

Hello

We just bought script it is working great but we have one problem with crop The croft version have different size than the one on the front

Example: This is script https://info.fakturaxl.pl/inne_skrypty_329382/codecanyon/ This is output image: https://info.fakturaxl.pl/inne_skrypty_329382/codecanyon/img/

Dude this shit is not working

stbeets says: Rotation will come beginning of April :) almost 2 years ago.. Which year do u mean?

https://codecanyon.net/comments/9418274

ah i saw u worked on it .. i see

data-canvas=”false” How should i do to get / save the only canvas size of image ?? please let me know.

Hi, if you use canvas=”false”, if you have ajax= true, there will be all the options in the $_POST in a PHP variable, if you use the <form> version, there will be an extra input field, name “yourimagename”_values which contains all data, like heights, widths, etc.

Hello,

one question to your great piece of code.

i want to start the upload by a custom php script. that works fine as long as the ‘green button’ was clicked for cropping confirmation.

is it possible to auto-crop if the button was not pressed before?

thanks

Ralf

so you want to crop the image, automaticly but when do you know when to crop, because the user needs to change, drag, zoom before he / she has to correct image.

Can you explain some more what you want to achive?

the actual problem is, although the input form is set as ‘required’ i do not get feedback that the green button has to be pressed. as soon as an image is loaded the upload of the image by a php script won’t start because the image is missing. therefore one idea was to autocrop in case the user forgot to do it. a message ‘please press the green button’ would work as well.

i understand the problem, i have nothing for this at the moment. What you can do is trigger click the checkbutton, when submitting the form, then in the onAfterProcessImage function try to submit the form. $(’<form>’).on({ submit: function( ){ $(’.htmlimageupload .btn-ok’).trigger(‘click’); } }); $(’.htmlimageupload’).html5imageupload({ onAfterProcessImage: function() { $(’<form>’).submit(); } });

Let me know how / if that works out

Hi, For me it works better in the most of the browser and computers.

Only in my laptop it doesn’t work.

The dropzone to not load, I have a Dell with windows 10 and touchscreen.

When I run dropzone demo plugin separately it works.

Anyone knows what is happening?

Hi, please support the item by purchasing it. If and when you purchase it, please provide the URL of your demo so i can take a look and help you find the problem.

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