How to handle image upload

[AttitudeMonger]

The Trumbowyg example page shows the editor where user can upload an image, and then the image is rendered in the editor. On inspecting the HTML, the image seems to be hosted in imgur. For me, it will be in my host. How to handle the image upload event so that it can be uploaded to my server, and the image rendered in the editor with the path to the image path in my server?

[Globulopolis]

@AttitudeMonger see these options https://github.com/Alex-D/Trumbowyg/blob/develop/plugins/upload/trumbowyg.upload.js#L14

These options is not covered in documentations:
serverPath - an URL where to upload. See http://api.jquery.com/jQuery.ajax/
fileFieldName - the name of the input file field which will send to server.
data - additional POST data. Array. See http://api.jquery.com/jQuery.ajax/
headers - additional HTTP headers. Object {'my_header: 'value'}. See http://api.jquery.com/jQuery.ajax/
xhrFields - additional xhr data. See http://api.jquery.com/jQuery.ajax/
urlPropertyName - ?
statusPropertyName - ?
success - callback function on success. See http://api.jquery.com/jQuery.ajax/
error - same as success but for error. See http://api.jquery.com/jQuery.ajax/

[AttitudeMonger]

Thanks mate. I will try it out. :)

[AttitudeMonger]

I am not able to understand the exact format of the Ajax request to be sent. Going by the source code of this page: http://alex-d.github.io/Trumbowyg/js/main.js, the code appears to be:

upload: {
                        serverPath: 'https://api.imgur.com/3/image',
                        fileFieldName: 'image',
                        headers: {
                            'Authorization': 'Client-ID 9e57cb1c4791cea'
                        },
                        urlPropertyName: 'data.link'
                    }

And on inspecting the Ajax request response, I can see that the link key holds the value of the image URL, which maps to the data.link value for the urlPropertyName key above. But what about the uploading part? What do I specify in the fileFieldName key, and how do I use it in the backend script?

[Globulopolis]

fileFieldName value will be append to data variable.

what value do I put for Authorization

I'm think you should search this in google.

[Globulopolis]

@AttitudeMonger you can add it into URL or add into data like:
data: data + '&variable=value&variable1=value1' or even add it into beforeSend. See http://api.jquery.com/jQuery.ajax/