I have a form that edits user profile, and I want to do a async profile photo upload. My layout looks like this:
The behaviours I have to have are:
dropzone should load the current photo from server (done, used mockFile and its working);
I'd like to disable the drag/drop functionality, but don't know if its possible;
To change picture, user should click the "change pic" button and dropzone should open "browse..." window, user selects the photo and when click ok dropzone should automatically remove the mockFile, change thumbnail and upload the new picture asynchronously.
Anyone could help me with this?
Related
I have a form that using dropzone to upload images
The problem is when users have been uploaded images but not submit the form and leave my site
it caused trash images if many users perform the same behavior.
what is the best way to upload images using dropzone.
Thanks in advance
Im new to JS. I am currently trying to implement a link/button that will download an image to the user's computer. The image will not be from the same url but a completely different one: for example, some random URL like this one. What I tried doing is implementing the button like this:
<a href="https://cdn.akc.org/Marketplace/Breeds/Rottweiler_SERP.jpg" download=""</a>
But when ever i press the link, I am taken to another page showing the image but the download is not being initiated. Is there any way I can get the image to be downloaded once the user clicks the image/link?
I have recently noticed that the file upload image preview on my site is not working. It previously did work. The current state is that the Select Image prompt works, asks you to select a file and, if you submit the form, it actually adds the image into the DB. However, the stats prompting the image preview and interactive buttons (change/remove) do not work.
What makes this problem specifically difficult is that I cannot see any specific javascript errors associated with the file and the plugin file itself loads from the S3 server.
The image previews can be found: https://www.rigsandwagons.com/listings/add/
On facebook, if you click on edit picture, you get a menu that offers the option Upload photo. I want to implement something similar on my website. I want the browser's file upload dialog to appear once I click on Upload photo, and I'd like it to automatically be submitted once the user selects a picture. How should this be implemented?
A colleague suggested a hidden div that has with an input field of type file, and to automatically trigger the click event when the user clicks on Upload photo, and then, to listen for the change event on the file field, and submit the form using jquery. What do you think?
I would look into a file uploader plugin such as plupload. Plupload has several nice features specifically for the uploading of images such as:
Lower the quality of the image to a specific percentage of the original
Resize the image to specific dimensions if possible
Also, I am pretty sure that plupload has a built in option to automatically submit once the user has selected an image.
I'm using the YUI Uploader component and want to automatically open the browse dialog on page load so the user can choose a file without first clicking the upload button. Is this possible?
The uploader component is a Flash movie so I don't think it's possible to trigger a click on the upload button using Javascript.
You can't because since Flash 10, the upload browser can only be shown when a user explicitly click on the browse button
(this a security issue: http://www.adobe.com/devnet/flashplayer/articles/fplayer10_security_changes_02.html#head3)