How can I implement facebook-like avatar upload? - javascript

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.

Related

Dropzone.js as a profile photo uploader. How to do it?

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?

How to hide "open with" option at the time of downloading file using javascript?

I have small requirement for downloading the file, here I would like to hide "open with" option and "Save" should be "Save As", could you please help me,
I'm assuming this is firefox relating. I don't think it's possible to change the options you're trying to change. However you can change the download action which might be useful to yourself. Please see below
This will not affect media embedded in a web page - only links to the files themselves.
Click the menu button and choose Options
Select the Applications panel.
The Applications panel will display. Select the type of file for which you want to change the default action.
The Action column will give you a drop-down menu, with options on action to take, whenever you click that type of file.
Always ask: will prompt you to select what action you want Firefox to take when you click on that type of file. This can be useful if Firefox is automatically saving a file type or is always opening it with a certain program and you want to be asked what to do.
Save File: will always save the file to your computer using the Downloads window, whenever you click that type of file.
Open the file with an application or plugin of your choosing.
Click Ok to close the options window after making changes]
Further reading here

WordPress : how to add an image upload button to the edit form?

I want to add an image upload button to the WordPress edit form and retrieve the ID of the uploaded media.
If it is possible, I want the user to click the button, choose his image on his computer and then display a tag containing the ID of the media in the textarea. Do you know a way to do that?
Thanks
I found by myself how to add and use a media button. If someone else is searching for that, I wrote a tutorial about doing this on SitePoint. You can also find a French version on my blog.
Basically, it uses the action media_buttons which is currently not listed on the WordPress Codex. This action is called when media buttons are displayed in the WordPress editor: all you have to do is displaying your own button with a dedicated function.
Then, you can open a media window and retrieve the user's selection thanks to a good (but hidden!) API.

Jasny Bootstrap File Upload Image Preview Not Working

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/

YUI Uploader: automatically open browse dialog

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)

Categories