I need you to write the javascript to allow for the uploading of a single image at a time using [login to view URL], but allowing the user to crop the image PRIOR to uploading to the server using [login to view URL], all done through a bootstrap modal.
Your code will form part of a larger website, and so dropzone and jcrop are mandatory, as is the version of bootstrap.
Attached is a simple PHP page which you should use as the basis for your code - this page should be edited with all the javascript you write. If you require any additional external libraries, please link to them using the Cloudflare CDN (just like the links to jquery, dropzone and jcrop on this page).
The Dropzone needs to be configured to accept jpg and png files up to 2 Mb, and only 1 at a time. Prior to the file being uploaded to the server, the user should then crop the image to a fixed dimension being a ratio of 4 to 5 - 4 width, 5 height. The user should be able to adjust the size of the cropped image, but not change the shape (i.e. dimensions).
Having completed cropping the image, both the original image AND the cropped image need to be posted to the server.
The scope of this project is to prepare the javascript only - the server side handling of the two images once posted is out of scope.