Need help with picEdit?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

135 Stars 58 Forks MIT License 62 Commits 50 Opened issues


An attempt to create a simple front-end image editor jQuery plugin that would replace a file-upload input box in a HTML form.

Services available


Need anything else?

Contributors list

# 345,949
47 commits
# 443,676
5 commits


This plugin is work in progress! Use with caution!

The plugin will turn your form's

 box into a tiny image editor/uploader. Perform basic image operations and preview your image before uploading to the server. The functionality for the plugin is very similar to the one introduced in website and photobooth.js library.

In other words, your good old html form with the file upload field, like this:

will change to something more user-friendly:

This plugin allows you to receive images from 3 different sources:

  1. You can search your computer for images by clicking on the image button in the center of the plugin, it will behave just like a regular file input field, you can also drag-and-drop your image on to the widget (work only in browsers that support drag and drop api)
  2. You can use your computer/tablet web-camera to make a photo by clicking on the camera button in the center of the plugin (work only in browsers that support WebRTC)
  3. You can copy and paste the image from the clipboard (work only in browsers that support clipboard api)

The plugin allows to perform image rotations, cropping, resizing and pen tool. Once you're done with the image manipulations you can just upload the form as usual, the updated image will be uploaded along with the form as the a part of the form.

Note: Due to limitations of HTML5 Form API the form will be submitted with XMLHttpRequest/Ajax. The submission is handled by picEdit. If your form uses any js plugins or custom javascript this can create issues!

See the demo here:

Usage Example

Include jquery, the plugin js and css files

Create a form in your html code with the file upload input box ex.:

Name: Image: Submit

Bind the plugin to the file upload input box, that's it!

Available methods and options


type: string, default: false - an image to be loaded in the editor by default ('path/to/image')

use only images located on the same server to prevent CORS issues


type: int/auto, default: 400 - max width for the picedit element (the original image will not be re-scaled if it's wider than maxWidth, this parameter controls image preview only)


type: int/auto, default: auto - max height for the picedit element (same as with maxWidth parameter)


type: string/bool, default: false - the form redirect url. When defined it will redirect the user to the specified url after the form is submitted.


type: func - the callback function to be called when the image is updated/changed. Exposes the image object as the first parameter of the function.

  imageUpdated: function(img){
     alert('Image updated!');


type: func - the callback function to be called once the form is submitted to the server. Exposes the XMLHttpRequest response object as the first parameter of the function.

  formSubmitted: function(response){
     alert('Form submitted!');

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.