545 comments found.
Hello, we have implemented this Upload Tool into a form. There a user can upload 10 images. For that we have implemented this tool 10 times (so 10 upload fields with this feature). All works fine – BUT not on iPhone Safari. There if you upload image and zoom, drag and so there is very often a moment when then safari hangs somehow up. then you are not able to do click somewhere else and need to reload. Only happens on safari on iOS. We researched a bit and found that safari has issues with canvas. so my Question is – do you think you have a solution for that?
Joachim
Does this plug-in no longer work with PHP ver 8?
Hi, I have 2 questiion regarding this plugin. 1. Issue: Some clients (and I cannot reproduce) say that they cannot see the image placeholder or the image uploaded. https://media.discordapp.net/attachments/989501034319740968/1136639422700458044/image002.png?width=1882&height=646 Also I cannot ask them to let me enter to thei computer to check and debug. Do you know any similar issues like this from other users? Or what to check? 2. When I have the green OK button over the image, I must push it to save it. Can I automatically save it when is uploaded the image then when is dragged, again save it? Or save at every 5 seconds? Then if I hit an another button to submit a form and the image to save also the image even if the green button is not pushed? People complaining that is too hard to push the green then the submit button.
Hi, I have 2 questiion regarding this plugin. 1. Issue: Some clients (and I cannot reproduce) say that they cannot see the image placeholder or the image uploaded. https://media.discordapp.net/attachments/989501034319740968/1136639422700458044/image002.png?width=1882&height=646 Also I cannot ask them to let me enter to thei computer to check and debug. Do you know any similar issues like this from other users? Or what to check? 2. When I have the green OK button over the image, I must push it to save it. Can I automatically save it when is uploaded the image then when is dragged, again save it? Or save at every 5 seconds? Then if I hit an another button to submit a form and the image to save also the image even if the green button is not pushed? People complaining that is too hard to push the green then the submit button.
Hello! Great addon, have bought from another account. Is it possible to add webp support? I mean to upload a jpg pic and convert it to webp.
Hi, this can be done in the PHP file, just add / replace the line where you save a jpg to webp
// Save the image
imagewebp($im, ‘image.webp’);
Good morning. I purchased your tool a few days ago. I would like to know how do I save the cropped image to my server? When I do the saving it leaves it with the original size and format. Thank you.
if (!empty($_FILES“thumb”)) { // Get file info $fileName = basename($_FILES“thumb”); $fileType = pathinfo($fileName, PATHINFO_EXTENSION); // Allow certain file formats $allowTypes = array(‘jpg’, ‘png’, ‘jpeg’, ‘gif’); if (in_array($fileType, $allowTypes)) { $image = $_FILES‘thumb’; $imgContent = addslashes(file_get_contents($image)); } }
hi, it is not in the $_FILES variable, but in the $_POST[‘data’] variable where you find the image. Because i use a canvas to create the thumb, i base64 the data and put it in a variable “data”. The upload.php script which is included in the package outlines how this is done.
Will this only work with php? I would like to crop and edit file pre-upload like a standard html form.
In the form, you will get a canvas image and it will be send with a POST request to the server side. To store it, you need a backend, PHP, .NET, node, etc. The example given is PHP, but you can build anything you would like. If you dont want to store it, you dont need PHP.
Can I just get a refund? This isn’t working for me on my mobile. It’s just a big hassle. Looks like it hasn’t been updated in awhile.
Thank you
if you want we can refund, but i dont think my plugin is the reason it is not working in mobile, read the answer above
I have a big problem. It seems that on mobile if the user clicks anywhere outside of the box before cropping, after cropping all the buttons are disabled. Even in the demo it does it.
But is this because of the plugin? Because i dont have any js events outside my plugin / div..
Is there a way to load the image with the crop already applied? Meaning people don’t have to click the greed checkmark? They can just click edit if they want to.
this would mean that everytime a user makes a changes, it would upload the cropped canvas to the server.. this is not the best approach..
How do I add like a PNG image? Like an overlay? I’m using this in a profile frame generator. Is this possible? If not possible, how do I add just an overlay PNG even if it’s not in the output?
Where do you want to add the overlay? On the plugin or on the final image? On the overlay is not possible in HTML, or you need to add more javascript to all the events. On the final image it can be done, depends on your backend code. If you use PHP, it can be done.. see here for more info: https://stackoverflow.com/questions/2269363/put-png-over-a-jpg-in-php
Thank you, yes I have the code for the PHP working already. But I wish the user can see how the final image will look, like how the profile frame will cover their face and stuff. Is there a way to load an overlay image (like the buttons). I can code so if you could just point me to the right info I can take it from there. Thanks!
what you could do is add a div with the png after finish event on the image, so that it will have an overlay.. this can be done..
Hello
On start I set width=100 and height=100ok, what’s your question?
Is it possible to keep the name of the file when uploading it, or to rename it later?
Good luck with your sales
Dear developer, I have been having problems for some time with the HTML5 upload Image, Ratio with Drag and Drop I bought in 2016.
The problem is as follows: If I place an image in the canvas drop zone I can zoom in and out. Then I press the green button to fix the operation. If I then look at the edited image (e.g. open in a new tab) I see that the height of the image is for a large part not visible.
I have tested this with different images. Image locally on the computer, but also from the cloud. I estimate that about 25% of the photo (bottom) is not displayed.
I have never had this problem in previous years. Can you give me an explanation for this? Thank you very much in advance. I’m not using it as a plugin in Wordpress, but just for my own project in a PHP / HTML website.
Hi,
When I press the “save” button after uploading the file, the photo is saved, but the buttons on the front do not change. eg: btn-edit, btn-download
Thanks
Hi I’m using your HTML5 upload image tool, I would like to use it with bootstrap 4, the latest version, that doesn’t have glyphicon library for button’s icon. How can I remedy this ?
Hi Dorian, you could replace the code where i use the icons with your own icons. it’s in the top of the js file.
Okay, significant new issue. The script seems to be working as it allows uploading and there’s no problem with how the menu seems to operate, but it doesn’t actually crop nor change the size of the target image. Could you tell me why it isn’t cropping? The cropping part was one of the reasons why I bought this script.
To explain further, I’m cropping images for book covers to suit the dimensions I want them to be. So the frame for this cropper is set to that dimension… but regretfully, it uploads the whole image without any changes.
“but it doesn’t actually crop nor change the size of the target image.” what do you mean with this? Are you using the $_FILES or $_GET parameters? The cropped image is stored in a base64 param in the $_GET param, i can’t and it’s not allowed to overwrite the $_FILES param.
do you have an addon that would crop and resize?
Your script does crop and resize. If you save it back after canvas works from the page, it’s cropped and scaled. Can you help me figure out how to replace the file that was uploaded with that cropped version and upload that?
How do I use the $_GET Parameter? I’m using the $_FILES and that’s probably why it saves the original.
I found a way to work around the method you used for uploading to a temporary directory using upload.php, however… I’ll have to engineer moving it to the appropriate directory afterwards, but more seriously, there’s a problem with the upload.php cropping process.
The intended cropped image is this: https://cdn.discordapp.com/attachments/644310217085157388/768617730651717652/unknown.png What i get is this: https://www.quillheaven.com/tmp/bughunting.bbb901.jpgAnd another picture ended up being entirely black…
The conclusion I’ve come to is the upload.php script is flawed (And I haven’t edited it)
Do you use the $_FILES variable or the $_POST variable?! The upload.php isn’t flawed, tested it today, works as it should. Maybe server settings?
I can’t tweak server settings. It’s not a Dedicated Server. ATM, I haven’t tweaked the PHP document, but those are the results above. It always displays it correctly on the page, but the image that it saves is what I showed.
it’s like the version that the php saves is fundamentally different from the version that the form displays after the cropping is applied.
refer to https://www.quillheaven.com/tmp/ to inspect the result of running upload.php without any changes made to it.
You’ll see that the file names are exactly what your script would output, but the quality of the cropping is in question. There are black bars up top where it seems to put it together wrong… and one was solid black as indicated above.
the images linked above were moved to tmp/tmppastresults
You failed in your duty to support your code. You get a score of 30/100! But a solution at least was found, and I won’t post it. smiles Thanks so much for the base code at least.
I have a problem with the Ratio with Drag and Drop Script. The thing is, I can’t use the bootstrap css, or at least all of it, but I have no idea what your script needs from it. It’s playing havoc with my website’s formatting. Can you tell me the specific elements it’s using to generate the mini-menu to scale pictures?
I accidentally purchased this twice…. ’^^ that was unintentional.
also, I tried to download that specific release of bootstrap and linked the CSS file and it resulted in two little blobs of color that are barely clickable and eliminates the other 3 functions.
Hi, i only use the buttons, glyphicons and alerts as real bootstrap items. All the other stuff can be marked up with your own CSS. So the “btn, glyphicon, alert” classes.
thank you for that response! Unfortunately, though, it doesn’t work unless I include the href for bootstrap.min.css that you use for the demo.
<link href=”//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css” rel=”stylesheet”>
I got rid of any css that didn’t have to do with btn, glyphicon, and alert, and the little menu is flattened and there’s only a red and green blob where they should appear. Do you know if it will work with the non-minified version? I can’t edit the minified one (it’s too much of a crunched mess)
Oh, my bad! It was missing the fonts. I redirected to point to where I uploaded them. <3 all good now!
Hi-Tech Team, actually the problem is when are added new file input by javascript then images not uploading no browse option available.
Please find screenshot. please help me.
Hi, i am sorry, but i dont understand, the sentence doesn’t make any sense.. which screenshot? What browse option?
Hi stbeets, please find documents, where i maintained the issue https://www.techknowten.com/radanya/issue.docx
I have looked at your screenshots, i think you have a problem with the javascript, when you at a new element, you need to reload the plugin, because it hasn’t been applied to your new element.
Yes now you got the exact problem, please help out … how i can reload the plugin, please suggest
Hi stveets, Please help how i can reload the plugin, please share the code, so I can use it.
When adding a new upload element, please just load the code on the element, just do $(’.newelement’).html5imageupload(); and please dont do something like $(’.image’).html5imageupload(); which will reload all the uploadimage field, only do it on the new element.
Hi Stbeets, I have already tried it see code https://prnt.sc/uqegk6 and second one is not working properly see – https://prnt.sc/uqehqv
Is there an error in your script or in the console? Because i do the same thing with the modal example on my demo page and that is working like it should..
$( ”#myModal” ).on(‘shown.bs.modal’, function(){ $(’#modaldialog’).html5imageupload(); });
Hi Stbeets, see the screenshot https://prnt.sc/uqgej3 No error is there…. please give me the perfect solution ….
