Get image in upload field in Shadowbox to upload after parent submit?

Question

Parent page includes form, with a button that triggers Shadowbox child.

Shadowbox child includes a form that, after submit, populates hidden parent form data. Non-image data is easy.

How does one handle images? In other words, how do I propagate the image to-be-uploaded from the Shadowbox to the parent, then upload after the parent form has been submitted?

The tags chosen were because I'm working with those languages.

[Should I put tags in my question title ?](http://meta.stackexchange.com/questions/19190/should-questions-include-tags-in-their-titles). No you should not. — phadaphunk, May 09 '13 at 18:51
Well, it makes a little less sense now, but thank you for your input. — Josh, May 09 '13 at 18:53
Have you read the link ? It makes sense since we look a your question and ask ourselves : "Which technology his he talking about ?" this is where the TAG section comes into play. — phadaphunk, May 09 '13 at 18:54
Relax, bud. It does make less sense. Also your reference typically covers languages, not necessarily a plug-in which can be relevant and necessary to understand the scope of the problem. While I won't personally argue that point, I will say that the comments in your reference show that it isn't a completely agreed-upon policy. Just because you read it on meta, doesn't make it valid or a rule. — Josh, May 09 '13 at 18:58
I'm not making the rules here. You can take it on [meta](http://meta.stackexchange.com/questions/ask) if you want to re-open this debat. I'm telling you there is a tag for it and this is the reason why. — phadaphunk, May 09 '13 at 19:00
I'm not saying you are, no worries. In this context, the edit you chose to apply did not make complete sense, so your condescension in your initial comment was unwarranted. If you're going to make changes, do so correctly and gracefully, like many others with the same privileges as you have. — Josh, May 09 '13 at 19:05

score 0 · Accepted Answer · edited May 23 '17 at 12:29

The easiest way I found to solve this is using this answer, which took some serious digging.

Essentially, using an onchange event on the input file field, save the base64 encoded version of the image the user browsed to in a variable in the parent page.

Shadowbox page:

// In your JS
$('[type=file]').change(function ()
{
    if (input.files && input.files[0])
    {
        var reader = new FileReader();

        reader.onload = function (e)
        {
            // This is where the parent var gets the encoded image.
            self.parent.hiddenElement.val(e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

Parent page:

// HTML
<input type='hidden' name='encoded_image' />

// In your JS
var hiddenElement = $('[name=encoded_image]');

This base64 encoded image can now be saved to blob storage on your server after your parent page's form is submitted.

Get image in upload field in Shadowbox to upload after parent submit?

1 Answers1