Maximum bid: $100
Because the hard part is already done...
Modify an existing open source script, such as this one:
[url removed, login to view]
Use the open source script to create an Angular version of the "drag and drop" and "file upload" on this page: [url removed, login to view]
1. The user can drag and drop an image anywhere on the page. Or click a button and browse to the file in a file manager dialog.
2. The image file is immediately uploaded on mouse release (no clicks)
3. A progress bar shows the progress of the file upload
4. When the file upload is complete, convert the image file to a base64 string and store the string in an angular variable such as $[url removed, login to view]
5. Put the string into an <img src="stringHere"> element on the page so the user can see the uploaded image using the base64 string.
Please make a function, directive or module that I can re-use on multiple pages throughout an app (eg, I just copy it into the new page, and it works).
Please make it able to handle multiple inputs at different places on a page. For example, I might have one "drag and drop / file input" at the top of the page, then heaps of text, then at the bottom of the page I might have a 2nd different "drag and drop / file input" for a different input field. Please make it easy for the script to handle this multiple input field scenario.
This script is for commercial production use.
Please include a reference to the Source.
Please use open source, DO NOT copy a commercial product.
Please use Twitter Bootstrap for CSS if the library you use does not have CSS included.
Good luck! :)
14 freelancers are bidding on average $126 for this job
3 years commercial experience in Angular. Team lead in big gaming company. Right now I'm responsible for maintenance 100K line of code app in Angular 1.5.x