AJAX image upload

monx663 has asked for the wisdom of the Perl Monks concerning the following question:

Hi all

I have a web application written that allows the web user, using any browser, to upload an image or other file to the web server using a <form action="/cgi/sript.pl" method="POST" enctype="multipart/form-data"> and the <input name="file" value="" type="file"> HTML element. The web being what it has become, I want to allow the user to select an image from their local file system and once they have chosen it, get the HTML page using jquery,javascript/AJAX, to automatically upload it to the server and present the user with a thumbnail preview of the image they just uploaded.

Could anybody point me to an example of doing this? I'm pretty proficient with Perl, HTML and cgi programming but I am not sure what is the easiest or perhaps standardized way of doing this nowadays.

For example, I have seen examples of jquery submitting data to a url on the web server, but I am not sure what is the nature of this data, whether it is multipart/form-data or what... Also, I am not sure what javascript/jquery expect as a response/output from the script running on the web server.

Any pointers?

Cheers,
Kostas

Comment on AJAX image upload

Replies are listed 'Best First'.
Re: AJAX image upload by Corion (Patriarch) on Aug 16, 2018 at 07:57 UTC
I have not yet released it to CPAN, but there is HTTP::Upload::FlowJs, which allows you to use the FlowJs library on the frontend and upload stuff to Perl with it. I believer the FlowJs examples also show how to display thumbnails while uploading, but I'm not sure.	[reply]
Re^2: AJAX image upload by monx663 (Sexton) on Aug 16, 2018 at 10:39 UTC
Thanks Corion. If I remember correctly I had tried using the Perl API for the afore mentioned web library, but it was not working as documented. There were unresolved issues with the uploaded files disappearing from the uploaded directory.	[reply]
Re^3: AJAX image upload by Corion (Patriarch) on Aug 16, 2018 at 14:23 UTC
It's very likely that the module has bugs. Can you please report them on Github, so that I can fix them? The module has not yet been released on CPAN and thus has not yet received widespread testing outside of my needs. So please, if you find something that does work not as advertised, please open an issue on Github, ideally with example code that shows what goes wrong. If it is example code using Test::More, that's even better!	[reply]
Re^4: AJAX image upload by monx663 (Sexton) on Aug 16, 2018 at 14:36 UTC
Re: AJAX image upload by thanos1983 (Parson) on Aug 16, 2018 at 07:58 UTC
Hello monx663, I am not sure if I understand your question but are you looking for something like that Perl Gui File browser select files? Update: Also at this Simple example of CGI (Perl) + HTML + CSS + Javascript/jQuery + Ajax. Hope this helps, BR. Seeking for Perl wisdom...on the process of learning...not there...yet!	[reply] [d/l] [select]
Re^2: AJAX image upload by monx663 (Sexton) on Aug 16, 2018 at 16:01 UTC
Hi Thanos I think you understood my question just fine. What you recommended might be what I am looking for. As soon as I had time to check the solution proposed by "Corion", I will also check the stuff you suggested Cheers, Kostas	[reply]