canvas and upload datatype

Evan Jardine 108 posts 168 karma points

Jun 30, 2009 @ 07:53

Canvas and Upload Datatype

Is there any tricks to implementing the Upload Datatype and getting it to work in Canvas Editing mode?

I have a section of our site setup to hold meeting agendas and minutes with the following structure;

- Meetings

- Year

- Month

- Meeting Container

- Agenda.. (upload here)

- Minutes.. (upload here)

Users can browse to the nodes with the file upload and browse for a file and select it. However nothing gets uploaded after save or publish.

If you use the umbraco back office everything works fine.

Thanks

Evan

Copy Link

Richard Soeteman 4054 posts 12927 karma points MVP 3x

Jun 30, 2009 @ 08:58

Hi Evan,

I've read somewhere on the old forum that it is not possible to use the upload datatype in Canvas Editing.

Cheers,

Richard

Copy Link

Evan Jardine 108 posts 168 karma points

Jun 30, 2009 @ 10:39

Thanks Richard

If that is the case, I'll have to re-think my solution. I was thinking of using a media picker and the media library but can't see how Canvas handles the media library yet.

Cheers

Evan

Copy Link

Richard Soeteman 4054 posts 12927 karma points MVP 3x

Jun 30, 2009 @ 11:17

Hi Evan,

I think it has to do with AJAX that cannot handle the upload to well. Maybe you can create your own custom Upload Datatype an work arround issues you have with AJAX and Uploads. I don't know how to create this myself but maybe others do.

Cheers,

Richard

Copy Link

Ismail Mayat 4511 posts 10092 karma points MVP 2x admin c-trib

Jun 30, 2009 @ 11:55

Evan,

We had an openspace session at codegarden and Thomas Rambaud used an iframe to get the upload field to work. I will send him an email with link to this post see if he can help you out a bit.

Regards

Ismail

Copy Link

Thomas Rambaud 2 posts 21 karma points

Jun 30, 2009 @ 13:14

Hi Everybody, Ismail, I wasn't talking about the "Umbraco upload field", sorry for the misunderstanding. To make it work in canvas you would need to embed this in an iframe, which is not possible or a bit tricky because you need to modify umbraco source. I was just saying that using file upload fields in canvas is possible by embedding the <input type="file" /> in a form, in an iframe. I've created a usercontrol that handle ajax posted file images.
 This usercontrol contains an UpdatePanel which display thumbs, some useful infos and contains an hidden field named "XMLValue" to store the current value. The usercontrol also contains an iframe (which is outside the updatepanel) with a form, an upload field, and an hidden field named "IsFromIframe". The form action is the usercontrol path. When submitting the form, the usercontrol know that the code is running further to the iframe form submit because Request("IsFromIframe") exists. Then we can get the the file in Request.Files() and save it. When saved I clear the response to write only the iframe content (because only the iframe has been posted and has to restore). Because I have a new image, I need to tell the UpdatePanel "Hey you can reload now and your new value is *", so I add to the response a javascript snippet that changes the hidden field value which is inside the UpdatePanel to trigger an asyncpostback.

Copy Link

Thomas Rambaud 2 posts 21 karma points

Jun 30, 2009 @ 13:22

Arf, i cannot edit or delete my previous post ?

Hi Everybody, Ismail,
I wasn't talking about the "Umbraco
upload field", sorry for the misunderstanding. To make it work in canvas you would need to embed this in an iframe, which is not possible or a bit tricky because you need to
modify umbraco source. I was just saying that using file
upload fields in canvas is possible by embedding the input type="file" in a form, in an iframe. I've created a usercontrol that handle ajax posted file images. This usercontrol
contains an UpdatePanel which display thumbs, some useful infos and contains an hidden field named "XMLValue"
to store the current value. The usercontrol also contains an iframe (which is outside the updatepanel) with a form, an
upload field, and an hidden field named "IsFromIframe". The form action is the usercontrol path.. When submitting the form, the usercontrol know that the code is running further to
the iframe form submit because Request
("IsFromIframe") exists. Then we can get the the file in Request. Files() and save it. When saved I clear the response to write only the iframe content (because only the iframe has
been posted and has to restore). Because I have a new image, I need to tell the UpdatePanel "Hey you can reload now and your new value is *", so I add to the response a
javascript snippet that changes the hidden field value which is inside the UpdatePanel to trigger an asyncpostback. The UpdatePanel is now able to change his controls values
according to the new XMLValue. I hope to be a bit understandable ;) If you want an example of using ajax posted file in liveediting you can download
my dixxit. umbraco4 project here. Look at the usercontrols. EditorControls. ImgThumbs usercontrol. To test it, simply add a
reference dixxit. umbraco4. dll in your website, and put the desired editorcontrols in the folder /usercontrols/EditorControls/, now you can create some Ascx datatypes.

Copy Link

Evan Jardine 108 posts 168 karma points

Jul 01, 2009 @ 01:27

Thanks Thomas,

I'll have a look and see if it fits in with my solution. It might take me a while I have only done a small amount of AJAX development so far.

Copy Link

is working on a reply...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Flag this post as spam?

Canvas and Upload Datatype