grails: Image upload without page refresh

Question

I had did some research on stack and Google for Image upload via Ajax(In Grails) and I found some old links, therefore I decided to ask to you guys that "Is there any method to upload my user Image using Ajax"? I have found one Grails plugin plugin link but documentation of this plugin is not sufficient.I want to use this plugin(As I said due to lack of good documentation of this plugin it looks me difficult to implement it) or please tell me some alternate options if available.

Ajax doesn't support binary data (file uploads). Any plugin you find will probably use either Flash or hidden iFrames. Both are acceptable solutions. — Gregg, Nov 05 '13 at 17:33
@Gregg Your knowledge of ajax/xhr is quite dated. It has been possible to upload files via ajax/xhr for years now. — Ray Nicholus, Nov 05 '13 at 17:35
You can only do it via Ajax with IE10+ (of course along with real browsers). Not a solution for the vast majority of people. — James Kleeh, Nov 05 '13 at 20:30

score 1 · Accepted Answer · answered Nov 06 '13 at 17:57

Try this..,.

View:

<html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script language="Javascript">
function fileUpload(form, action_url, div_id) {
    // Create the iframe...
    var iframe = document.createElement("iframe");
    iframe.setAttribute("id", "upload_iframe");
    iframe.setAttribute("name", "upload_iframe");
    iframe.setAttribute("width", "0");
    iframe.setAttribute("height", "0");
    iframe.setAttribute("border", "0");
    iframe.setAttribute("style", "width: 0; height: 0; border: none;");

    // Add to document...
    form.parentNode.appendChild(iframe);
    window.frames['upload_iframe'].name = "upload_iframe";

    iframeId = document.getElementById("upload_iframe");

    // Add event...
    var eventHandler = function () {

        if (iframeId.detachEvent) iframeId.detachEvent("onload", eventHandler);
        else iframeId.removeEventListener("load", eventHandler, false);

        // Message from server...
        if (iframeId.contentDocument) {
            content = iframeId.contentDocument.body.innerHTML;
        } else if (iframeId.contentWindow) {
            content = iframeId.contentWindow.document.body.innerHTML;
        } else if (iframeId.document) {
            content = iframeId.document.body.innerHTML;
        }

        document.getElementById(div_id).innerHTML = content;

        // Del the iframe...
        setTimeout('iframeId.parentNode.removeChild(iframeId)', 250);
    }

    if (iframeId.addEventListener) iframeId.addEventListener("load", eventHandler, true);
    if (iframeId.attachEvent) iframeId.attachEvent("onload", eventHandler);

    // Set properties of form...
    form.setAttribute("target", "upload_iframe");
    form.setAttribute("action", action_url);
    form.setAttribute("method", "post");
    form.setAttribute("enctype", "multipart/form-data");
    form.setAttribute("encoding", "multipart/form-data");

    // Submit the form...
    form.submit();

    document.getElementById(div_id).innerHTML = "Uploading...";
}
</script>

<body>
<g:form>
    <input type="file" name="myFile"/><br/><br/>
    <input type="button" value="upload" onClick="fileUpload(this.form, '${g.createLink(controller: 'dashboard', action: 'test')}', 'upload'); return false;">
    <div id="upload"></div>
</g:form>
</body>
</html>

Action:

def test() {
    if (params.myFile) {
        def fileName
        def inputStream
        if (params.myFile instanceof CommonsMultipartFile) {
            fileName = params.myFile?.originalFilename
            inputStream = params.myFile.getInputStream()
        } else {
            fileName = params.myFile
            inputStream = request.getInputStream()
        }

        fileName = fileName.replaceAll(" ", "_")

        File storedFile = new File("DIRECTORY_PATH_TO_SAVE_IMAGE/${fileName}")

        storedFile.append(inputStream)

        render '<img src="data:' + 'jpg' + ';base64,' + new String(new Base64().encode(storedFile.bytes), "UTF-8") + '" ' + ' />'
    } else {
        render "No Image"
    }
}

grails: Image upload without page refresh

1 Answers1

Linked