Uploading images clienside without using Miva Admin like popup.

[RayYates]

MivaScript.com contains this document describing how to upload a file to a server. http://www.mivascript.com/topic/file-uploading.html

I wrote a module to duplicate the process used in the admin when you click one of the [upload] buttons. (e.g. image uploading) A popup opens that provides a File Upload dialog which uses the <input type="file"> form field to post to my module which handles the actual upload process. Once the upload is complete JavaScript passes the filename back to the calling form and closes the popup.

My difficulty is using this process with mobile devices and/or with browsers that block popups.

Here is what I have. I have contact form where I have currently have a button that triggers a popup (see image below) and works just like Miva Admin. The popup has its own form that gets posted and

Here is what I want. Provide a browse and upload button without the popup that triggers some ajax process and then returns the filename that I embed into the form along with an image thumbnail. I seem to have a mental block and can't see through how to make this work.

Something like the Miva Forum process for uploading images would be great.
Also what security concerns do I need to address?

Any guidance would be appreciated.

[wmgilligan]

Try using a modal. It is not considered a popup, and I have been able to do a ton with them.

[RayYates]

Thanks William,

As written, the popup contains a form that posts back to itself, then sends the uploaded file name back to the target/parent form via javascript. So I tried doing it as a modal IFrame. But was was having issues getting the iframe to parent document communications working. I got the file name to pass but could not get the "cancel" button to close the modal.

I can't really embed the model directly into the page because of having to POST the form data to get the upload to work and I can't embed a form inside a form.

Sorry, I know that's a confusing sentence.

I am looking into "faking" the popup form posting by embedding a "Browse" button ( <input type "file"> ) in my parent page/form then using onchange to trigger an Ajax call to do the POST / Upload in the background, and return the file name. That would eliminate the popup all together.

[Bruce - PhosphorMedia]

What are you using to build the model? I usually rely on FeatherLight which supports iframes and never had a problem with 'closing' the model. As for Form within Form...have you tried the 'hyper-link' as form trick? (i.e, calling a jquery or javscript form post).

[wmgilligan]

Can you use this http://www.dropzonejs.com/ inside a modal?
Then when clsoing the modal (from the modal close _not_ in the iframe - refresh the page to show the updated info?

[RayYates]

Wish I had see DropzineJs earlier anyway... I eliminated the popup all together.

I embedded the form from the popup directly into the bottom of the page and absolute positioned it off the screen. Then, used some jQuery to pass a click event to the [Browse] button in the hidden form so that instead of opening the popup, I open the OS window to locate the file. When an image is selected, an onchange event triggers posting the hidden form using ajax which returns the filename.

I then pass the file name and display image on the original form. one click, select a file, done.

The only thing left is to debug with intentional user errors, (e.g. invalid file type, file too large, upload too slow etc.)

Formatting for mobile will be much less troublesome with out popups or modals.

[RayYates]

Thanks for the feedback Bill and Bruce. Sometimes I just need to explain the problem to someone for the solution to become clear.

[Gordon - Phosphor Media]

Thanks for the feedback Bill and Bruce. Sometimes I just need to explain the problem to someone for the solution to become clear.

This is a well-known programming behavior and has a name: "confessing your code."

[RayYates]

For Posterity...

I finished the project last week, but over the weekend, I re-wrote the module and modernized it. Contact me off list if it's something you need.

[lesliekirk]

Permission to ask my ignorant question(s) - is this something that would enable a user/store owner to upload images independent of any product or category?

[RayYates]

Yes. Leslie. You add this to any form. (like a contact us page) so you can decide what to do with the file name after the upload.

For example email a link to the image or save it in a custom field. My client has two file upload buttons on their Warranty Contact page like this. http://pdqcoders.com/test.html

Configuration: https://screenshots.firefox.com/IO62....simplenet.com

Integration: https://screenshotscdn.firefoxuserco...18519e0260.png

The documentation is built into the module.

Integration is pretty straight forward and you may customize the visual section as needed.

<mvt:item name="fileupload2" param="css" />
</head>

<form name="MyForm">

<mvt:assign name="g.upload_ndx" value="1" />
<mvt:assign name="g.upload_Prompt" value="'Proof of Purchase: '" />
<mvt:assign name="g.upload_isRequired" value="1" />
<mvt:item name="fileupload2" param="visual" />

Hidden script at the bottom of the page.
<mvt:item name="fileupload2" param="hidden" />
</body>

[afiumano]

Could this be used on a product page to allow customer to upload photo to customize their product?

[lesliekirk]

Forgive my ignorance, is this a module that is available for download or purchase?