How to get uploaded images from Parse using javascript API

Question

Problem:

I have the Url (eg. http://files.parse.com/../../..jpg ) of the uploaded file and it's fileName, and now need to retrieve the corresponding file from that Url(Parse.com) by using Only via Javascript . Any one have the answer let me know. Thank you very much!

Code: (upload):

function uploadFn(fileName,fileType,fileData,c){ 
        var parseUrl='https://api.parse.com/1/files/'+fileName; 
$.ajax({
        type:'post',
        beforeSend:function(req){
                req.setRequestHeader('X-Parse-Application-Id',myParseAppId);
                req.setRequestHeader('X-Parse-REST-API-Key',myParseRestApiId);
                req.setRequestHeader('Content-Type',fileType); // fileType always == 'image/jpg;'
            },
        url:parseUrl,
        data:fileData,
        processData:false,
        contentType:false,
        success:function(rslt){
            if(rslt){
            alert('Upload success\n Filename:'+rslt.name+'\n Url:'+rslt.url);
                    imgObj.save({curUser:curUser,fileName:rslt.name,fileUrl:rslt.url,fileId:c},
                                {success:function(succ){
                                    alert('File info saved!');
                                    },error:function(err){ 
                                        alert('Error:'+err.code);
                                        }
                                }) // save


                }
            },
        error:function(err){
                //var errObj=jQuery.parseJSON(err);
                alert('Error:'+err.responseText);
            }
    });
  }

upload is not a problem. It works fine! Only for retrieving from Parse.com

(toRetrieve) [I tried as: ]

function fetchImg(url){
  $.ajax({
   url:url,
   async:false,
   type:'POST',
   beforeSend:function(req){
        req.setRequestHeader('X-Parse-Application-Id',myParseAppId);
        req.setRequestHeader('X-Parse-REST-API-Key',myParseRestApiId);
        req.setRequestHeader('Content-Type','image/jpg');
    },
   complete:function(rslt){
        $('#imgId').attr('src','data:image/jpg;base64,'+rslt.responseText);
    },
   success:function(){//Success
    },
   error:function(err){
        alert('Error: '+err.responseText+'\nStatus: '+err.statusText);
    }
   })
  }

[output:]

'Error-msg>The specified method not allowed against this resouce' Status: Method Not allowed!.

Notes: ¤ (I saved the fileName, fileUrl to the Parse DataBrowser, and used this for try to retrieve the uploaded file.)

¤ (App is based on 'Phonegap')

¤ Im novice to Parse/Javascript.

Thanks a lot! *

score 0 · Answer 1 · edited May 23 '17 at 10:26

Check here: Load contents of image from camera to a file

basically: with the info in this post. . Big thanks to Raymond Camden!

function gotPic(data) {

window.resolveLocalFileSystemURI(data, function(entry) {

var reader = new FileReader();

reader.onloadend = function(evt) {
    var byteArray = new Uint8Array(evt.target.result);
    var output = new Array( byteArray.length );
    var i = 0;
    var n = output.length;
    while( i < n ) {
        output[i] = byteArray[i];
        i++;
    }                
    var parseFile = new Parse.File("mypic.jpg", output);

    parseFile.save().then(function(ob) {
            navigator.notification.alert("Got it!", null);
            console.log(JSON.stringify(ob));
        }, function(error) {
            console.log("Error");
            console.log(error);
        });

}

reader.onerror = function(evt) {
      console.log('read error');
      console.log(JSON.stringify(evt));
  }

entry.file(function(s) {
    reader.readAsArrayBuffer(s);
}, function(e) {
    console.log('ee');
});

});
}

score 0 · Answer 2 · answered Sep 05 '15 at 19:27

0

I think to retrieve the image method should be GET instead of POST for your ajax request.

answered Sep 05 '15 at 19:27

Ahmadbaba46

221
2
7

How to get uploaded images from Parse using javascript API

2 Answers2