Ajax File Upload before page is created

[bfncs]

Hello everyone,

I was just asking myself whether any has already created some kind of ajax file upload in Processwire for a page that is not yet created.

As a simple example, think of a user registration form with the usual fields including an avatar image. I'd like to use something like Plupload, Dropzone.js or a similiar Ajax file uploader to upload the file asynchronously already before the rest of the form is processed.

That would make it possible to i.e.

• directly show the user a resized preview of his avatar image,
• build forms with a lot of file uploads that would otherwise break the file upload limit,
• and probably a lot more neat features.

It would be essential, that it is usable like a standard backend file upload/image field afterwards, it would be even better if files are also located in the id-named folder in assets/ after submitting the leftover form.

The way I thought about how to do this would pack the following functionality in a plugin:

1. Use some existing Ajax file uploader to get the file from client to server.
2. There, a module takes care of the request, saves the file to some temporary folder and answers with an (id) reference to the image to work with it later.
3. Ideally - if it's an image - it would already be possible to get a resized version of the image to provide a live preview.
4. When the form finally get's submitted, the request includes the reference to the file.
5. On the server, the image field is constructed as usual and the file itself get's moved to the "default" location. The temporary reference is deleted.

One problem I see with this approach, is that after a while you will have a lot of unused files and references but that's no problem that a cron job with some code to get rid of old stuff couldn't solve.

Having written all that down:

Is there anything that already solves more or less what I described?

And if not: do you see any problems with my outline or do you have a more elegant idea to implement this?

Any feedback on this is appreciated, for sure.

Marc

[diogo]

I did this already and the method that I used was having the images on their own page instead of on the user page (images were avatars for users) and having a page field on the user page to link to the image. This was more or less the process (by memory):

1. First Ajax call for the image creates a image page under the "images" page in the tree and returns the id of the newly created page.
2. The returned id is stored on a hidden field with javascript and sent back to the server with the rest of the form on submission.
3. While processing the form in the server, the previously created image page is stored in the page field of the new user page.

[bfncs]

Hey Diogo,

thanks for your quick answer!

Your approach absolutely makes sense for user images, I already thought about going that route. But if you have something where content is user-generated but afterwards sighted and edited by an editor, it would be great to have everything on one page. And to be able to use already existing modules like apeisa's great and indespensable thumbnails module like they are meant to be used. This practically rules out your approach that will work for a lot of use cases for the things I have in mind.

But just from the fact, that you did it yourself, I assume there's no ready to use solution out there already?

[diogo]

I think there's not a ready solution.

What you could do to overcome your problem is actually not that complicated, and it would only add one step to the process. Instead of storing the image page on a page field, just pull the image to a image field in the "user" page and delete the other page.

[bfncs]

I think you're actually right and I'm probably going exactly that route in the next days. When everything goes well, I'm going to publish it to the modules directory afterwards, for sure.

[bfncs]

So, I built something ugly und unDRY that works for me.

http://processwire.com/talk/topic/3761-dropzonejs-and-file-uploads/?p=47209

https://github.com/bytebus/AjaxImageUpload

This is just a proof-of-concept and by no means ready to use as a drop-in, so take it with caution.