CODEWITHSUNDEEP
javascriptdojo
Mowgli
Mowgli

Reputation: 29

Need the complete code for uploading a picture in dojo

I need the complete code for uploading a file in dojo. Especially the ajax call and its button creation, and its url must get stored into database. I use the following code, but it's not working:

function uploadPicture()
{
    alert("yes");
    var xhrArgs = {
        url:"/service/ajax/uploadPictureToOption/",                 
        form: dojo.byId("optionsForm"),
        handleAs: "json",
        content :{},
        load: function(response, ioArgs){
            if (response == "failed")
            {
                alert("Failed");
                window.location.reload();
            }
            else if (response == "success")
            {
                window.location.reload();
            }
            else
            {
                alert("Successfully deleted");
                window.location.reload();
            }
        },
    }
    var deferred = dojo.xhrPost(xhrArgs);
}

Upvotes: 0

Views: 1192

Answers (2)

mschr
mschr

Reputation: 8641

Making assumption that your file is binary, otherwise see Moz MDN - File.getAsBinary Optionally you could make use of FormData (xhr2). IFrame is the way to go since IE doesnt support HTML5 up until IE10

var xhr=(window.XMLHttpRequest && new window.XMLHttpRequest()),
    input = dojo.byId('inputelementId')
    boundary = "---------------------------" + (new Date).getTime(),
    message = ""
xhr.open("POST", this.getUrl());
xhr.setRequestHeader("Content-Type", "multipart/form-data; boundary=" + boundary);
//      if(input.files.length > 1) {
    message += "--" + boundary + "\r\n" 
        + 'Content-Disposition: form-data; name="' + input.name + '";'
        + ' filename="'+ (input.files ? input.files[0].name : input.value) + '"' + EOL;
    message += "Content-Type: application/octet-stream" + "\r\n" + "\r\n";
//      }
if(!!xhr.sendAsBinary) {
        xhr.send(message + input.files[0].getAsBinary())
} else {
    // here is the kicker; IE does not support neither FileData nor AsBinary
        var fobj  = new ActiveXObject("Scripting.FileSystemObject"),
            fd    = fobj.OpenTextFile(input.value, 1); 
        xhr.send(message + fd.ReadAll());
        fd.Close();
}

Upvotes: 1

Ricardo Garza V.
Ricardo Garza V.

Reputation: 909

to begin with your idea for a file upload is currently imposible using the xhr modules of dojo (AKA AJAX[only handdles plain text]). The closest posible thing you can do is to subbmit the form to a hidden iframe.

EDIT

The code for a hidden iframe should be something like this:

<form method=”post” action=”formProcess.php” target=”hiddenIFrame”>
<input type=”file” name=”test” />
<input type="submit" value="Submit">
</form>

<iframe style=”width:0px;height:0px;border:0px;” name=hiddenIFrame />

you can also search in google as "hidden iframe submit"

Upvotes: 0

Related Questions