Proper way to upload file using ajax associated with text parameters.
Hi,
just a quick question how do I upload image via ajax with some text parameters I have search the internet but it seems I can't find the detailed one that can help me solve this problem. I forgot how do I access the file (filename, path, etc..) in my api controller?
got this modal with populated fields using jquery
and the ajax I'm using post type
the controller I extend to UmbracoApiController and how do I access the file here?
any suggestion would be appreciated hope someone can help I updated the question is this the proper way?
It converts the JSON into an instance of FormData (heads up, that requires IE10 or greater, I think). By adding the file with formData.append(key, file), it is able to submit the file to the server with AJAX.
IIRC, setting content type to undefined was also necessary for some reason.
Proper way to upload file using ajax associated with text parameters.
Hi,
just a quick question how do I upload image via ajax with some text parameters I have search the internet but it seems I can't find the detailed one that can help me solve this problem. I forgot how do I access the file (filename, path, etc..) in my api controller?
got this modal with populated fields using jquery
and the ajax I'm using post type
the controller I extend to UmbracoApiController and how do I access the file here?
any suggestion would be appreciated hope someone can help I updated the question is this the proper way?
Formulate supports AJAX upload of files. You can poke around here to see how it does it: https://github.com/rhythmagency/formulate/tree/daae047296fd9451040617b9851160972ffadc1c/src/formulate.app/JavaScript/FormTemplates/responsive.bootstrap.angular/directives/form
It's built with Angular, but the concept should translate pretty well to jQuery. It first gets the file from the files array on the input element: https://github.com/rhythmagency/formulate/blob/daae047296fd9451040617b9851160972ffadc1c/src/formulate.app/JavaScript/FormTemplates/responsive.bootstrap.angular/directives/form/fileChange.js#L21
Before the AJAX submission occurs, it transforms the request: https://github.com/rhythmagency/formulate/blob/daae047296fd9451040617b9851160972ffadc1c/src/formulate.app/JavaScript/FormTemplates/responsive.bootstrap.angular/directives/form/responsiveForm.js#L23
It converts the JSON into an instance of
FormData(heads up, that requires IE10 or greater, I think). By adding the file withformData.append(key, file), it is able to submit the file to the server with AJAX.IIRC, setting content type to undefined was also necessary for some reason.
Hi Nicholas ,
Big thanks for the response really appreciated, got last question here how do I implement ajax calls using umbraco forms? any articles you might know?
Cheers,
See here: https://our.umbraco.org/forum/umbraco-pro/contour/60788-Umbraco-Forms-and-Ajax#comment-238535
I'm assuming you mean the product, Umbraco Forms (as opposed to the concept of general purpose forms within Umbraco).
Hi Nicholas,
glad to hear that and thank you for your time.
Glen
is working on a reply...